Google hat am 17. April 2018 Chrome 66 für Windows, macOS und Linux im Stable-Kanal freigegeben. Die Version unterstützt das CSS Typed Object Model für einen Teil der CSS-Eigenschaften. Die API gehört zum Houdini-Projekt und macht CSS-Werte für JavaScript als typisierte Objekte zugänglich, statt sie ausschließlich als Zeichenketten zu behandeln.
Zahlen und Einheiten getrennt bearbeiten
Für Inline-Stile steht element.attributeStyleMap bereit, für Stylesheet-Regeln styleMap. Die zurückgegebenen StylePropertyMap-Objekte erlauben unter anderem Lesen, Setzen und Iterieren. Ein mit CSS.px(42) angelegter Wert enthält die Zahl 42 und die Einheit px getrennt in value und unit.
Das erleichtert Rechenoperationen, ohne Zahlen zunächst aus einem CSS-String herauszulösen. Die API beschreibt außerdem mathematische Ausdrücke und die Umrechnung absoluter Einheiten. Daraus folgt aber keine pauschale Beschleunigung eines Browser-Spiels: Die konkrete Wirkung hängt vom verwendeten Darstellungspfad und den tatsächlich ausgeführten Operationen ab.
Berechnete Werte sind nicht dasselbe wie aufgelöste Werte
computedStyleMap() liefert berechnete CSS-Werte. Im Unterschied zu den aufgelösten Werten von getComputedStyle() kann eine Breite von 50 Prozent dabei als Prozentangabe erhalten bleiben, statt als Pixelwert zurückzukommen. Code, der eine absolute Breite benötigt, darf beide Schnittstellen deshalb nicht ohne Anpassung austauschen.
Auch die Begrenzung eines Werts erfolgt nicht bereits beim Speichern in der Style-Map. Googles Beispiel setzt opacity auf 3: Die deklarierte Angabe bleibt 3, während die berechnete Deckkraft auf 1 begrenzt wird. Entsprechend wird eine deklarierte z-index-Zahl von 15,4 erst im berechneten Stil auf 15 gerundet.
Unterstützung vor dem Einsatz prüfen
Die damalige Dokumentation empfiehlt eine Funktionsprüfung, etwa auf window.CSS und CSS.number. Chrome 66 deckt noch nicht sämtliche CSS-Eigenschaften ab; aus der Freigabe ergibt sich keine vollständige browserübergreifende Verfügbarkeit.
Bei interaktiven Web-Anwendungen betrifft Typed OM die CSS-Darstellung und deren Steuerung aus JavaScript. Das kurz zuvor vorgestellte WebAssembly Studio für C-, C++- und Rust-Beispiele behandelt dagegen die Übersetzung und Untersuchung von WebAssembly-Code. Die Werkzeuge arbeiten an unterschiedlichen Teilen einer Browser-Anwendung.
Archivhinweis: Beschrieben ist der Stand von Chrome 66 im April 2018. Das Beitragsbild zeigt das damalige Chromium-Projektlogo aus dem Quellbestand dieser Version, nicht eine Oberfläche des heutigen Chrome.