The CSS Typed Object Model (OM)
Work with CSS values as typed JavaScript objects instead of strings using the CSS Typed OM API.
What is the CSS Typed OM?
The CSS Typed Object Model (Typed OM) is part of the CSS Houdini project. It exposes CSS values as typed JavaScript objects rather than plain strings, enabling faster manipulation, richer arithmetic, and type safety.
Old vs New
Traditional CSSOM returns strings; Typed OM returns objects with type information:
// Old CSSOM (string)
const old = element.style.opacity; // '0.5'
// CSS Typed OM (typed object)
const opacity = element.computedStyleMap().get('opacity');
// CSSUnitValue { value: 0.5, unit: 'number' }All lessons in this course
- The CSS Typed Object Model (OM)
- CSS Properties and Values API (@property)
- CSS Paint API: Worklets
- CSS Layout API and Scope