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

Chrome 66, Safari 16.4; Firefox detrás de un flag (Nightly desde 154, agosto de 2026). No es Baseline.

Chrome 66Edge 66Safari 16.4Firefox flag

Una API de JavaScript tipada para valores CSS: lee `el.computedStyleMap().get('width')` como un `CSSUnitValue` con `.value` y `.unit`, escribe `el.attributeStyleMap.set('translate', CSS.px(10))` sin concatenar cadenas. Relevante cuando registras tokens con `@property` y los controlas desde 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: Detecta `el.attributeStyleMap` y usa asignación de cadenas con `el.style` en caso contrario.

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

Prompt

Cuando JS deba definir valores CSS numéricos, usa la Typed OM donde esté disponible (`el.attributeStyleMap.set('rotate', CSS.deg(n))`, `computedStyleMap().get(prop).value`) con un respaldo de cadena en `el.style` para Firefox. Combínalo con custom properties registradas con `@property` para tokens tipados.