Arbeiten mit dem neuen CSS Typed Object Model

Eric Bidelman stellt das CSS Typed Object Model vor. Es scheint, dass es das Abrufen und Setzen von Stilwerten über JavaScript einfacher und fehlerunanfälliger machen wird. Weniger "stringy", mehr "number-y", wenn angebracht.

Wenn wir zum Beispiel den Innenabstand eines Elements wissen wollten, würden wir klassischerweise

var el = document.querySelector("#thing");
var style = window.getComputedStyle(el);
console.log(style.padding);

tun und bekämen „20px“ als Zeichenkette oder was auch immer es ist.

Eine dieser neuen APIs lässt uns das so machen

console.log(
  el.computedStyleMap().get('padding').value,
  el.computedStyleMap().get('padding').unit
);

und wir bekommen 20 als echte Zahl und „px“ als Zeichenkette.

Es gibt auch attributeStyleMap mit Gettern und Settern, sowie Funktionen für jeden der Werte (z. B. CSS.px() CSS.vw()).

Eric zählt die Vorteile auf

1. Weniger Fehler.
2. Arithmetische Operationen & Einheitenumrechnung.
3. Wertbegrenzung & Rundung.
4. Bessere Leistung.
5. Fehlerbehandlung.
6. Benennung entspricht exakt CSS.

Direkter Link →