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

Chrome 66, Safari 16.4; Firefox hinter einem Flag (Nightly ab 154, August 2026). Nicht Baseline.

Chrome 66Edge 66Safari 16.4Firefox flag

Eine typisierte JavaScript-API für CSS-Werte: lies `el.computedStyleMap().get('width')` als `CSSUnitValue` mit `.value` und `.unit`, schreibe `el.attributeStyleMap.set('translate', CSS.px(10))` ohne String-Verkettung. Relevant, wenn du `@property`-Tokens registrierst und sie aus JS steuerst.

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: Prüfe per Feature-Detection auf `el.attributeStyleMap` und nutze sonst die `el.style`-String-Zuweisung.

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

Prompt

Wenn JS numerische CSS-Werte setzen muss, nutze das Typed OM, wo verfügbar (`el.attributeStyleMap.set('rotate', CSS.deg(n))`, `computedStyleMap().get(prop).value`), mit einem String-`el.style`-Fallback für Firefox. Kombiniere mit per `@property` registrierten Custom Properties für typisierte Tokens.