coderef

CSS object model (DOM level 2)Limited availability

The DOM level 2 style specification defined interfaces to access and modify CSS styles, such as CSSValue and CSSPrimitiveValue, that were later excluded from the CSS object model.

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

Discouraged: The DOM level 2 CSS object model was excluded from the later CSS object model (CSSOM) specification. Use instead: CSS object model

How to use ↓Compare browsers

Browser support

DesktopChrome
✕Not supportedup to 155
Current: 155
Edge
✕Not supportedup to 154
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
1–9.1Not supported
10+Supportedsince Sep 20, 2016
Current: 27
MobileChrome Android
✕Not supportedup to 155
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
1–9.3Not supported
10+Supportedsince Sep 13, 2016
Current: 27

How to use

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

Example

Full syntax and examples are on MDN: CSSPrimitiveValue.

Feature detection

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

Documentation (MDN)

Specification

Sub-features

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

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSPrimitiveValue✕✕✕3✕✕1
CSSPrimitiveValue.getCounterValue✕✕✕3✕✕1
CSSPrimitiveValue.getFloatValue✕✕✕3✕✕1
CSSPrimitiveValue.getRGBColorValue✕✕✕3✕✕1
CSSPrimitiveValue.getRectValue✕✕✕3✕✕1
CSSPrimitiveValue.getStringValue✕✕✕3✕✕1
CSSPrimitiveValue.primitiveType✕✕✕7✕✕7
CSSPrimitiveValue.setFloatValue✕✕✕3✕✕1
CSSPrimitiveValue.setStringValue✕✕✕3✕✕1
CSSValue✕✕✕3✕✕1
CSSValue.cssText✕✕✕7✕✕7
CSSValue.cssValueType✕✕✕7✕✕7
CSSValueList✕✕✕3✕✕1
CSSValueList.item✕✕✕3✕✕1
CSSValueList.length✕✕✕10✕✕10
Counter✕✕✕3✕✕1
Counter.identifier✕✕✕3✕✕1
Counter.listStyle✕✕✕3✕✕1
Counter.separator✕✕✕3✕✕1
Rect✕✕✕3✕✕1
Show 4 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
Rect.bottom✕✕✕3✕✕1
Rect.left✕✕✕3✕✕1
Rect.right✕✕✕3✕✕1
Rect.top✕✕✕3✕✕1