What problem does CSS Typed OM solve?

The classic CSSOM exposes styles as strings, so reading element.style.width gives '100px' that you must parse and re-stringify. Typed OM exposes values as typed objects like CSSUnitValue { value: 100, unit: 'px' }, so you read .value as a number, do arithmetic, and write back without error-prone string concatenation.

How do I create a length value?

Use the CSS factory functions: CSS.px(100), CSS.percent(50), CSS.em(2), CSS.deg(45), CSS.number(1.5). Each returns a CSSUnitValue with the given value and unit, ready to assign through a StylePropertyMap such as element.attributeStyleMap.set('width', CSS.px(100)).

What is the difference between attributeStyleMap and computedStyleMap?

element.attributeStyleMap is the typed equivalent of the inline style attribute — it is read/write and reflects only inline styles. element.computedStyleMap() returns a read-only snapshot of the fully resolved computed values, the typed equivalent of getComputedStyle.

Can I do arithmetic on typed values?

Yes. CSSNumericValue provides add, sub, mul, div, min, max and to/toSum. Mixing compatible units stays a CSSUnitValue, while mixing incompatible units (px + %) produces a CSSMathSum that represents a calc() expression, since the result cannot be reduced without layout.

Is CSS Typed OM widely supported?

The core read/write parts (CSSUnitValue, CSS.px, attributeStyleMap, computedStyleMap) ship in Chromium-based browsers and are partially available elsewhere; full math and custom-property registration support varies. Feature-detect with 'computedStyleMap' in Element.prototype before relying on it.

CSS Typed OM Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

The CSS Typed Object Model, part of Houdini, replaces stringly-typed style access with real typed objects. This reference covers the value types and the style-map APIs.

How it works

Instead of strings, styles are objects with numeric fields:

// old CSSOM — strings
el.style.width;                 // "100px"  → must parse

// Typed OM — objects
el.computedStyleMap().get("width");      // CSSUnitValue { value: 100, unit: "px" }
el.attributeStyleMap.set("width", CSS.px(100));

The base class is CSSStyleValue. Concrete subtypes include CSSUnitValue (a number + unit), CSSKeywordValue (an identifier like auto), CSSMathSum/CSSMathProduct (calc expressions), CSSTransformValue and CSSColorValue. The CSS.px(...), CSS.percent(...), CSS.deg(...) and CSS.number(...) factories build unit values directly.

Arithmetic and conversion

CSSNumericValue supports add, sub, mul, div, min, max:

Compatible units reduce to a single CSSUnitValue — CSS.px(10).add(CSS.px(5)) → 15px.
Incompatible units stay symbolic — CSS.px(10).add(CSS.percent(50)) → a CSSMathSum (a calc()), because the result cannot be resolved without layout.
.to(unit) converts within a unit family (e.g. CSS.cm(1).to("mm") → 10mm).

Read computed values with the read-only element.computedStyleMap(); read/write inline values with element.attributeStyleMap. Feature-detect with "computedStyleMap" in Element.prototype.