coderef

CSS typed object modelLimited availability

The CSSStyleValue and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.

Not yet supported in all major browsers — check the table and provide a fallback.

Browser support

DesktopChrome
1–65Not supported
66+Supportedsince Apr 17, 2018
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27
MobileChrome Android
18–65Not supported
66+Supportedsince Apr 17, 2018
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27

How to use

Not supported in Firefox, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: CSSImageValue.

Feature detection

JS · check before using
if ("CSSImageValue" in globalThis) {
  // CSSImageValue is available
} else {
  // load a polyfill or use a fallback
}

Sub-features

Support for each part of the feature (132). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSImageValue6679✕16.466✕16.4
CSSKeywordValue6679✕16.466✕16.4
CSSKeywordValue.CSSKeywordValue6679✕16.466✕16.4
CSSKeywordValue.value6679✕16.466✕16.4
CSSMathClamp100100✕16.4100✕16.4
CSSMathClamp.CSSMathClamp100100✕16.4100✕16.4
CSSMathClamp.lower100100✕16.4100✕16.4
CSSMathClamp.upper100100✕16.4100✕16.4
CSSMathClamp.value100100✕16.4100✕16.4
CSSMathInvert6679✕16.466✕16.4
CSSMathInvert.CSSMathInvert6679✕16.466✕16.4
CSSMathInvert.value6679✕16.466✕16.4
CSSMathMax6679✕16.466✕16.4
CSSMathMax.CSSMathMax6679✕✕66✕✕
CSSMathMax.values6679✕16.466✕16.4
CSSMathMin6679✕16.466✕16.4
CSSMathMin.CSSMathMin6679✕✕66✕✕
CSSMathMin.values6679✕16.466✕16.4
CSSMathNegate6679✕16.466✕16.4
CSSMathNegate.CSSMathNegate6679✕16.466✕16.4
Show 112 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSMathNegate.value6679✕16.466✕16.4
CSSMathProduct6679✕16.466✕16.4
CSSMathProduct.CSSMathProduct6679✕✕66✕✕
CSSMathProduct.values6679✕16.466✕16.4
CSSMathSum6679✕16.466✕16.4
CSSMathSum.CSSMathSum6679✕✕66✕✕
CSSMathSum.values6679✕16.466✕16.4
CSSMathValue6679✕16.466✕16.4
CSSMathValue.operator6679✕16.466✕16.4
CSSMatrixComponent6679✕16.466✕16.4
CSSMatrixComponent.CSSMatrixComponent6679✕16.466✕16.4
CSSMatrixComponent.matrix6679✕16.466✕16.4
CSSNumericArray6679✕16.466✕16.4
CSSNumericArray.@@iterator6679✕16.466✕16.4
CSSNumericArray.entries6679✕16.466✕16.4
CSSNumericArray.forEach6679✕16.466✕16.4
CSSNumericArray.keys6679✕16.466✕16.4
CSSNumericArray.length6679✕16.466✕16.4
CSSNumericArray.values6679✕16.466✕16.4
CSSNumericValue6679✕16.466✕16.4
CSSNumericValue.add6679✕16.466✕16.4
CSSNumericValue.div6679✕16.466✕16.4
CSSNumericValue.equals6679✕16.466✕16.4
CSSNumericValue.max6679✕16.466✕16.4
CSSNumericValue.min6679✕16.466✕16.4
CSSNumericValue.mul6679✕16.466✕16.4
CSSNumericValue.parse_static6679✕16.466✕16.4
CSSNumericValue.sub6679✕16.466✕16.4
CSSNumericValue.to6679✕16.466✕16.4
CSSNumericValue.toSum6679✕16.466✕16.4
CSSNumericValue.type6679✕16.466✕16.4
CSSPerspective6679✕16.466✕16.4
CSSPerspective.CSSPerspective6679✕16.466✕16.4
CSSPerspective.length6679✕16.466✕16.4
CSSRotate6679✕16.466✕16.4
CSSRotate.CSSRotate6679✕16.466✕16.4
CSSRotate.angle6679✕16.466✕16.4
CSSRotate.x6679✕16.466✕16.4
CSSRotate.y6679✕16.466✕16.4
CSSRotate.z6679✕16.466✕16.4
CSSScale6679✕16.466✕16.4
CSSScale.CSSScale6679✕16.466✕16.4
CSSScale.x6679✕16.466✕16.4
CSSScale.y6679✕16.466✕16.4
CSSScale.z6679✕16.466✕16.4
CSSSkew6679✕16.466✕16.4
CSSSkew.CSSSkew6679✕16.466✕16.4
CSSSkew.ax6679✕16.466✕16.4
CSSSkew.ay6679✕16.466✕16.4
CSSSkewX6679✕16.466✕16.4
CSSSkewX.CSSSkewX6679✕16.466✕16.4
CSSSkewX.ax6679✕16.466✕16.4
CSSSkewY6679✕16.466✕16.4
CSSSkewY.CSSSkewY6679✕16.466✕16.4
CSSSkewY.ay6679✕16.466✕16.4
CSSStyleRule.styleMap6679✕16.466✕16.4
CSSStyleValue6679✕16.466✕16.4
CSSStyleValue.parseAll_static6679✕16.466✕16.4
CSSStyleValue.parse_static6679✕16.466✕16.4
CSSStyleValue.toString6679✕16.466✕16.4
CSSTransformComponent6679✕16.466✕16.4
CSSTransformComponent.is2D6679✕16.466✕16.4
CSSTransformComponent.toMatrix6679✕16.466✕16.4
CSSTransformComponent.toString6679✕16.466✕16.4
CSSTransformValue6679✕16.466✕16.4
CSSTransformValue.@@iterator6679✕16.466✕16.4
CSSTransformValue.CSSTransformValue6679✕16.466✕16.4
CSSTransformValue.entries6679✕16.466✕16.4
CSSTransformValue.forEach6679✕16.466✕16.4
CSSTransformValue.is2D6679✕16.466✕16.4
CSSTransformValue.keys6679✕16.466✕16.4
CSSTransformValue.length6679✕16.466✕16.4
CSSTransformValue.toMatrix6679✕16.466✕16.4
CSSTransformValue.values6679✕16.466✕16.4
CSSTranslate6679✕16.466✕16.4
CSSTranslate.CSSTranslate6679✕16.466✕16.4
CSSTranslate.x6679✕16.466✕16.4
CSSTranslate.y6679✕16.466✕16.4
CSSTranslate.z6679✕16.466✕16.4
CSSUnitValue6679✕16.466✕16.4
CSSUnitValue.CSSUnitValue6679✕16.466✕16.4
CSSUnitValue.unit6679✕16.466✕16.4
CSSUnitValue.value6679✕16.466✕16.4
CSSUnparsedValue6679✕16.466✕16.4
CSSUnparsedValue.@@iterator6679✕16.466✕16.4
CSSUnparsedValue.CSSUnparsedValue6679✕16.466✕16.4
CSSUnparsedValue.entries6679✕16.466✕16.4
CSSUnparsedValue.forEach6679✕16.466✕16.4
CSSUnparsedValue.keys6679✕16.466✕16.4
CSSUnparsedValue.length6679✕16.466✕16.4
CSSUnparsedValue.values6679✕16.466✕16.4
CSSVariableReferenceValue6679✕16.466✕16.4
CSSVariableReferenceValue.CSSVariableReferenceValue6679✕16.466✕16.4
CSSVariableReferenceValue.fallback6679✕16.466✕16.4
CSSVariableReferenceValue.variable6679✕16.466✕16.4
Element.computedStyleMap6679✕16.466✕16.4
HTMLElement.attributeStyleMap6679✕16.466✕16.4
StylePropertyMap6679✕16.466✕16.4
StylePropertyMap.append6679✕16.466✕16.4
StylePropertyMap.clear6679✕16.466✕16.4
StylePropertyMap.delete6679✕16.466✕16.4
StylePropertyMap.set6679✕16.466✕16.4
StylePropertyMapReadOnly6679✕16.466✕16.4
StylePropertyMapReadOnly.@@iterator6679✕16.466✕16.4
StylePropertyMapReadOnly.entries6679✕16.466✕16.4
StylePropertyMapReadOnly.forEach6679✕16.466✕16.4
StylePropertyMapReadOnly.get6679✕16.466✕16.4
StylePropertyMapReadOnly.getAll6679✕16.466✕16.4
StylePropertyMapReadOnly.has6679✕16.466✕16.4
StylePropertyMapReadOnly.keys6679✕16.466✕16.4
StylePropertyMapReadOnly.size6679✕16.466✕16.4
StylePropertyMapReadOnly.values6679✕16.466✕16.4