CSS Typed Object Model

The CSS Typed Object Model (OM) API provides a more typed and structured way to interact with CSS values in JavaScript, as opposed to the traditional string-based approach of element.style.

Getting Started

The CSS Typed Object Model (OM) exposes CSS values as typed JavaScript objects rather than simple strings. This allows for more robust and performant manipulation of CSS properties directly from JavaScript.

Traditionally, when you get a CSS value via element.style.width or getComputedStyle(element).width, you get a string like '100px'. With Typed OM, you get a CSSUnitValue object.

    const element = document.getElementById('myElement');

// Traditional way (string-based)
element.style.opacity = '0.5';
const opacityString = element.style.opacity; // "0.5"
console.log(typeof opacityString); // "string"

// Using CSS Typed OM
if (element.attributeStyleMap) {
  // Set a value
  element.attributeStyleMap.set('opacity', CSS.number(0.7));
  
  // Get a value
  const opacityTyped = element.attributeStyleMap.get('opacity');
  console.log(opacityTyped.value); // 0.7
  console.log(opacityTyped.constructor.name); // CSSUnitValue or CSSNumericValue (CSSNumberValue in some impl)

  // Example with units
  element.attributeStyleMap.set('width', CSS.px(200));
  const widthTyped = element.attributeStyleMap.get('width');
  console.log(widthTyped.value); // 200
  console.log(widthTyped.unit); // "px"

  // You can also work with computed styles
  const computedOpacity = element.computedStyleMap().get('opacity');
  console.log('Computed Opacity:', computedOpacity.value);
} else {
  console.log('CSS Typed OM not supported in this browser.');
}
  

In this example, element.attributeStyleMap provides access to inline styles as typed objects. CSS.number(), CSS.px(), CSS.percent(), etc., are factory functions to create these typed values.

Benefits of Typed OM include:

• Performance: Reduces string parsing overhead as values are already numbers.
• Correctness: Less error-prone as you work with specific units and types.
• Arithmetic: CSSNumericValue objects support arithmetic operations (e.g., CSS.px(10).add(CSS.percent(50))).

The Typed OM is a powerful addition for developers who need to manipulate CSS values dynamically and efficiently in JavaScript.