CSS Typed OM: CSS-Werte typisiert per JavaScript lesen und schreiben

1. Das Problem mit String-basiertem CSS: style.cssText und getPropertyValue

Wer heute mit element.style.width = "320px" arbeitet, manipuliert in Wahrheit einen reinen Text-String, den der Browser bei jedem Zugriff neu parsen muss, um daraus eine interne Zahl mit Einheit zu machen. Für eine einzelne Zuweisung ist dieser Umweg unmerklich, aber sobald ein Skript Werte häufig liest, verrechnet und wieder schreibt, etwa in einer Animation oder einem Drag-Handler, summiert sich das wiederholte Parsen und Serialisieren zu echtem, messbarem Overhead.

Die CSS Typed OM (Object Model) löst dieses Problem, indem sie CSS-Werte als strukturierte JavaScript-Objekte abbildet, etwa CSSUnitValue für eine Zahl mit Einheit oder CSSKeywordValue für Schlüsselwörter wie auto. Diese Objekte tragen ihren Typ und ihre Einheit direkt in sich, sodass Rechnungen wie "addiere 10px" ohne String-Parsing auskommen und der Browser dieselbe interne Repräsentation nutzen kann, die er ohnehin für das Rendering braucht.

2. attributeStyleMap: der typisierte Ersatz für element.style

Der zentrale Einstiegspunkt der Typed OM ist element.attributeStyleMap, eine Map-ähnliche Schnittstelle mit get(eigenschaft) und set(eigenschaft, wert). Statt einen String zuzuweisen, übergibt man ein CSSStyleValue-Objekt, das über Hilfsfunktionen wie CSS.px(320) erzeugt wird und automatisch die richtige Einheit trägt, ohne dass ein Tippfehler in der Einheit erst zur Laufzeit als falsches Layout auffällt.

Der Rückgabewert von get() ist ebenfalls typisiert: Statt eines Strings wie "320px" erhält man ein CSSUnitValue-Objekt mit den Eigenschaften value (die Zahl 320) und unit (der String "px"), die sich direkt weiterverarbeiten lassen, ohne einen regulären Ausdruck zum Trennen von Zahl und Einheit zu schreiben.

const box = document.querySelector('.box');

// Classic string-based style API
box.style.width = '320px';
const widthString = box.style.width; // "320px" -- needs parsing to use

// CSS Typed OM: typed values in and out
box.attributeStyleMap.set('width', CSS.px(320));
const widthValue = box.attributeStyleMap.get('width'); // CSSUnitValue
console.log(widthValue.value, widthValue.unit); // 320 "px"

3. Typisierte Werte im Detail: CSSUnitValue, CSSKeywordValue, CSSTransformValue

Die Typed OM unterscheidet mehrere konkrete Werttypen, die alle von der gemeinsamen Basisklasse CSSStyleValue erben. CSSUnitValue deckt Zahlen mit Einheit ab, von px über % bis deg, während CSSKeywordValue reine Schlüsselwörter wie auto oder inherit repräsentiert und sich sauber von einer numerischen Länge unterscheiden lässt, was mit einem einzelnen String vorher nicht typsicher möglich war.

Für zusammengesetzte Eigenschaften wie transform gibt es CSSTransformValue, das eine Liste einzelner Transform-Komponenten (Translation, Rotation, Skalierung) als eigene Objekte hält, statt eine einzige Funktions-String-Kette wie "translateX(10px) rotate(5deg)" von Hand zusammenzubauen. Das macht es möglich, gezielt nur die Rotation einer bestehenden Transform-Kette zu ändern, ohne den gesamten String neu zu parsen und wieder zusammenzusetzen.

4. computedStyleMap() gegen getComputedStyle(): der praktische Vergleich

getComputedStyle(element) liefert für jede Eigenschaft einen serialisierten String zurück, selbst für reine Zahlenwerte, und erzwingt bei jedem Zugriff auf eine layoutabhängige Eigenschaft potenziell ein Reflow, wenn das Layout gerade als "dirty" markiert ist. element.computedStyleMap() liefert stattdessen dieselben berechneten Werte als typisierte CSSStyleValue-Objekte, was das nachgelagerte Parsen komplett entfallen lässt, wenn der Wert direkt weiterverrechnet werden soll.

In der Praxis zeigt sich der Unterschied am deutlichsten bei zusammengesetzten Werten wie font oder background: getComputedStyle liefert dafür einen einzigen, oft schwer zu zerlegenden String zurück, während computedStyleMap() die Einzelwerte über get('font-size') und get('background-color') gezielt und bereits typisiert herausgibt, ohne dass ein eigener Mini-Parser für den zusammengesetzten String geschrieben werden muss.

const box = document.querySelector('.box');

// Classic: always a string, even for pure numbers
const opacityString = getComputedStyle(box).opacity; // "0.5"
const opacityNumber = parseFloat(opacityString);

// Typed OM: already a typed CSSUnitValue with .value as a real number
const opacityValue = box.computedStyleMap().get('opacity');
console.log(opacityValue.value); // 0.5, no parseFloat needed

5. Performance: Parsing-Overhead in Animation-Loops vermeiden

In einer requestAnimationFrame-Schleife, die pro Frame Position oder Größe eines Elements anpasst, summiert sich der Overhead des String-Parsens bei sechzig Frames pro Sekunde messbar auf, besonders wenn mehrere Elemente gleichzeitig animiert werden. Jede Zuweisung von element.style.left = wert + "px" erzwingt eine String-Konkatenation und anschließendes Parsing durch die CSS-Engine, während attributeStyleMap.set('left', CSS.px(wert)) diesen Umweg komplett überspringt.

Der gemessene Unterschied ist pro einzelnem Aufruf winzig, aber in datenintensiven Anwendungen wie Canvas-Overlays, Drag-and-Drop-Bibliotheken oder Diagrammen mit hunderten animierten DOM-Knoten summiert er sich zu einem spürbaren Unterschied im Profiling. Für die meisten alltäglichen UI-Interaktionen bringt die Typed OM vor allem Typsicherheit und lesbareren Code, den echten Performance-Gewinn spielt sie bei hoher Update-Frequenz und vielen Elementen aus.

6. Custom Properties über die Typed OM lesen und schreiben

Auch CSS Custom Properties lassen sich über attributeStyleMap setzen und lesen, allerdings liefert get('--my-color') standardmäßig ein CSSUnparsedValue zurück, weil der Browser ohne @property-Registrierung keinen konkreten Typ kennt. Erst eine Registrierung mit @property und einer passenden syntax-Angabe sorgt dafür, dass dieselbe Custom Property als typisierter Wert wie CSSUnitValue zurückkommt, statt als unstrukturierter Text-Token.

Diese Kombination aus @property und Typed OM ist besonders für Design-System-Tokens wertvoll, wenn ein Skript etwa einen Abstand aus einer Custom Property lesen, per JavaScript verändern und typsicher wieder zurückschreiben soll, ohne jedes Mal eine eigene Parsing-Logik für die jeweilige Einheit mitzuschleppen.

7. Arithmetik mit CSSNumericValue: add, mul und to()

Numerische Typed-OM-Werte erben von CSSNumericValue und bringen eingebaute Methoden wie add(), sub(), mul() und to(einheit) mit, mit denen sich Werte direkt verrechnen lassen, ohne zuerst manuell in eine Zahl zu konvertieren. Ein Skript kann so CSS.px(100).add(CSS.px(20)) schreiben und erhält ein neues, korrekt typisiertes CSSUnitValue zurück, statt Strings zusammenzukleben und auf einen Tippfehler bei der Einheit zu hoffen, dass er ausbleibt.

Die to()-Methode erlaubt zusätzlich Einheitenumrechnungen, etwa von rem in px, direkt im Objektmodell, was besonders nützlich ist, wenn ein Skript zwei Werte mit unterschiedlichen Einheiten vergleichen oder addieren muss. Ohne Typed OM müsste dieselbe Umrechnung manuell über die berechnete font-size des Wurzelelements erfolgen, ein fehleranfälliger Zwischenschritt, den die Typed OM komplett kapselt.

const base = CSS.px(100);
const extra = CSS.px(20);

const total = base.add(extra); // CSSUnitValue: 120px
console.log(total.value, total.unit); // 120 "px"

// Convert between compatible units directly in the object model
const remValue = CSS.rem(2);
const pxEquivalent = remValue.to('px'); // requires a resolved context in practice

8. Browser-Support und ein robustes Fallback-Pattern

Chrome und Edge unterstützen die CSS Typed OM vollständig, Firefox implementiert nur Teile davon, und Safari bietet bislang keine Unterstützung für attributeStyleMap oder computedStyleMap(). Für produktiven Code bedeutet das, dass die Typed OM nur dort eingesetzt werden sollte, wo ein Fallback auf die klassische String-API vorhanden ist, etwa in Utility-Funktionen, die zuerst auf die Verfügbarkeit von CSS.number prüfen.

Die Feature-Detection erfolgt am zuverlässigsten mit if ('attributeStyleMap' in Element.prototype), weil das direkt die tatsächlich benötigte Schnittstelle prüft, statt sich auf eine Versionsabfrage des Browsers zu verlassen, die bei zukünftigen Browser-Updates schnell veraltet. Innerhalb einer solchen Utility-Funktion lässt sich derselbe logische Vorgang dann wahlweise über die Typed OM oder die klassische Style-API abbilden.

function setWidthPx(element, px) {
  if ('attributeStyleMap' in Element.prototype) {
    element.attributeStyleMap.set('width', CSS.px(px));
  } else {
    element.style.width = `${px}px`;
  }
}

9. Praxisbeispiel: ein Drag-Handler mit CSS Typed OM

Ein Drag-Handler, der bei jedem pointermove-Ereignis die Position eines Elements aktualisiert, profitiert besonders von der Typed OM, weil er in kurzer Zeit sehr viele Style-Updates auslöst. Statt bei jedem Frame einen neuen String wie `${x}px` zusammenzubauen, liest der Handler die aktuelle Position typisiert aus, addiert die Mausbewegung direkt als CSSUnitValue und schreibt das Ergebnis ohne Zwischenschritt über String-Konkatenation zurück.

Dieses Muster reduziert nicht nur den Parsing-Overhead, sondern macht den Code auch robuster gegen Einheitenfehler, weil CSS.px() immer eine gültige, typisierte Länge erzeugt und ein versehentliches Verrechnen von Pixeln mit Prozent zur Laufzeit mit einer klaren Fehlermeldung auffällt, statt stillschweigend ein falsches Layout zu produzieren.

10. Zusammenfassung

11. FAQ: CSS Typed OM: Das Wichtigste auf einen Blick