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

Chrome 66, Safari 16.4; Firefox atrás de flag (Nightly a partir do 154, agosto de 2026). Não é Baseline.

Chrome 66Edge 66Safari 16.4Firefox flag

Uma API JavaScript tipada para valores CSS: leia `el.computedStyleMap().get('width')` como um `CSSUnitValue` com `.value` e `.unit`, escreva `el.attributeStyleMap.set('translate', CSS.px(10))` sem concatenar strings. Relevante quando você registra tokens com `@property` e os controla pelo 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: Detecte `el.attributeStyleMap` e use atribuição de string em `el.style` caso contrário.

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

Prompt

Quando o JS precisar definir valores numéricos de CSS, use a Typed OM onde disponível (`el.attributeStyleMap.set('rotate', CSS.deg(n))`, `computedStyleMap().get(prop).value`) com um fallback de string em `el.style` para o Firefox. Combine com custom properties registradas via `@property` para tokens tipados.