CSS Typed OM (CSSStyleValue, attributeStyleMap, CSS.px)

Chrome 66, Safari 16.4; Firefox behind a flag (Nightly from 154, August 2026). Not Baseline.

Chrome 66Edge 66Safari 16.4Firefox flag

A typed JavaScript API for CSS values: read `el.computedStyleMap().get('width')` as a `CSSUnitValue` with `.value` and `.unit`, write `el.attributeStyleMap.set('translate', CSS.px(10))` without string concatenation. Relevant when you register `@property` tokens and drive them from JS.

Typed OM box

CSS

.fx-047 {
  display: inline-block;
  background: #f3f4f6;
  border-radius: 8px;
  font-family: system-ui
}

HTML

<div class="fx-047" id="fx-047">Typed OM box</div>
<script>
  const el=document.getElementById('fx-047');
  if(el.attributeStyleMap){
    el.attributeStyleMap.set('padding',CSS.px(24));
    el.attributeStyleMap.set('rotate',CSS.deg(3));
    const w=el.computedStyleMap().get('width'); el.textContent+=` (${w.value}${w.unit})`;
  }else{el.style.padding='24px';el.style.rotate='3deg'}
</script>

Fallback: Feature-detect `el.attributeStyleMap` and use `el.style` string assignment otherwise.

Source: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154

Prompt

When JS must set numeric CSS values, use the Typed OM where available (`el.attributeStyleMap.set('rotate', CSS.deg(n))`, `computedStyleMap().get(prop).value`) with a string `el.style` fallback for Firefox. Combine with `@property`-registered custom properties for typed tokens.