Was ist CSS Houdini?

Eine Beziehung zwischen JavaScript und CSS? Dank Houdini, welches auch als „Schlüssel“ für die Zusammenarbeit von JavaScript und CSS bezeichnet wird, ist das möglich.

Houdini beinhaltet APIs, welche CSS-Engine offenlegen und somit auch die Möglichkeit für Entwickler geben, CSS zu erweitern, indem sie sich in den Styling- und Layout-Prozess der Rendering-Engine eines Browsers einklinken. Somit haben die Entwickler die Möglichkeit auf das CSS Object Model (CSSOM) zuzugreifen und diese anzupassen.

CSS-Funktionen nativ im Browser zu implementieren, gehört mit Houdini der Vergangenheit an. Denn mit Houdini besteht für den Entwickler die Möglichkeit, einen CSS-Code zu schreiben, welchen der Browser parsen und somit neue CSS-Funktionen erstellen kann.

Welche Vorteile gibt es?

Da der Entwickler dank Houdini direkt auf das CSSOM zugreifen kann und der Browser diese einschließlich Layout-, Paint- und Composite-Prozesse vor der Stilaktualisierung anwendet, sind die Parse-Zeiten schneller.

Darüber hinaus werden Layout-, Paint- und Composite-Prozesse für JavaScript-Stilaktualisierungen wiederholt. Der Houdini-Code wartet nicht darauf, dass der erste Rendering-Zyklus abgeschlossen ist. Vielmehr ist er in diesem ersten Zyklus enthalten – er erzeugt renderbare, verständliche Stile. Houdini bietet eine objektbasierte API für die Arbeit mit CSS-Werten in JavaScript.

Ein Feature von CSS Houdini ist das Worklet. Mit Worklets können Sie modulares CSS erstellen, das nur eine einzige Zeile JavaScript benötigt, um konfigurierbare Komponenten zu importieren: Es werden keine Präprozessoren, Postprozessoren oder JavaScript-Frameworks benötigt.

Welche APIs hat Houdini?

Mit dem folgenden Link, sieht man, welche APIs verfügbar sind: https://houdini.how/about/

Parser API

Eine API, die den CSS-Parser direkt offenlegt, um beliebige CSS-ähnliche Sprachen in eine leicht typisierte Darstellung zu parsen.

Properties und Values API

Definiert eine API zum Registrieren neuer CSS-Eigenschaften. Registrierte Eigenschaften mit dieser API werden mit einer Parse-Syntax versehen, die einen Typ, ein Vererbungsverhalten und einen Anfangswert definiert.

Wie der Entwickler diese API nutzen kann, wird es auf folgenden Seiten dokumentiert:

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide

Typed OM API

Eine sehr coole und angenehme Neuerung für die Entwickler ist die Typed OM, die dank diesem Styles von nun an Objekte sind. Es muss also nicht mehr mit Strings gearbeitet werden.

Hierbei können wir mit der richtigen Einheit und Integern arbeiten.

Mehr Informationen hierzu findet ihr in der Dokumentation: API Dokumentation, API Usage

Painting API

Diese erzeugt über die Paint-Funktion einen Image Value. Der Image Value kann allen Elementen zugeordnet werden, die ein Image erwarten.

Bei der Funktion ist es in erster Linie wichtig, dass die benötigten Parameter angezogen werden müssen.

Mehr hierzu findet man auf der folgenden Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API

Fazit

CSS Houdini wird jedem Frontend-Entwickler mit einer sehr guten Integration zwischen CSS und JavaScript die Zukunft von CSS bringen – Spätestens wenn alle APIs voll verfügbar und von den Browsern unterstützt werden.

Dies kann ebenso das Arbeiten eines Entwicklers bei doubleSlash vereinfachen, da beispielsweise auch die native Implementierung von Funktionen wegfällt und somit mehr Möglichkeiten bereitgestellt werden. Dank dem Zugriff auf das CSS Object Model (CSSOM) kann der Entwickler sowohl Kundenwünsche als auch eigenen Ideen umsetzen.

Ich bin sehr gespannt, was die Zukunft mit CSS Houdini mit sich bringt.

Unter https://houdini.how/ gibt es noch weitere, interessante Beispiele.

Mehr über Frontend Entwicklung erfahren