© delcarmat/Shutterstock.com
Eigene CSS-Funktionen definieren

Houdini: Hausgemachte CSS-Magie


CSS wirkt manchmal fast schon magisch. Aber auch die besten Zaubertricks stoßen an ihre Grenzen, wenn man etwas erreichen möchte, das noch in keiner Formel beschrieben wurde. Im Fall von CSS gibt es aber Abhilfe: Houdini erlaubt die Definition eigener Funktionen.

Wie fügt man eine neue Funktion zu CSS hinzu? Man könnte sich auf Twitter darüber beschweren und einfach darauf hoffen, dass jemand vom Standardisierungsgremium sich des Anliegens annimmt – und voilà, in ein paar Jahren ist das benötigte Feature vielleicht verfügbar. Oder: Man schreibt selbst einen JavaScript-Polyfill, der aber nicht sonderlich leistungsfähig ist.

CSS ist halt irgendwie auch „magisch“. Wird ein einziger Style verändert, kann das die gesamte Webseite beeinflussen oder den Code beschädigen, sodass Vorsicht angeraten ist. Mit CSS Houdini können Entwickler nun aber ihre eigene „Magie“ erschaffen. Denn durch das Einklinken in die Renderingphasen des Browsers können neue Funktionen zu CSS hinzugefügt und dem Browser so einige neue Tricks beigebracht werden.

Wie funktioniert das Rendering?

Browser haben normalerweise vier Hauptphasen in ihrer CSS-Rendering-Pipeline (Abb. 1). Um die CSS-Stufen zu verstehen, muss mit den Styles begonnen werden. Hier sammelt der Browser alle Stylesheets, die sich im Dokument befinden, und findet dann heraus, welches Element von welchem dieser Styles betroffen ist. Sobald der Browser weiß, wie groß die Elemente sind und an welcher Position sie gerendert werden sollen, beginnt er, die leeren und transparenten Felder auf der Seite anzuordnen. Im nächsten Schritt kann der Browser einfach das Layout der Seite übernehmen und die Pixel „malen“. Dabei handelt es sich in der Regel um Text, Farben, Bilder, Rahmen, Hintergründe usw. Das Malen erfolgt auf mehreren Oberflächen, die als Ebenen bezeichnet werden. Sobald dieser Malprozess fertig ist, werden alle Ebenen an den Compositor übergeben. Der Compositor fügt sie auf der Seite, die wir sehen, zusammen. Wenn sich etwas auf einer eigenen Ebene befindet, können diese Ebenen verschoben und so Animationen erstellt werden.

shete_houdini_1.tif_fmt1.jpgAbb. 1: Renderingschritte im Browser

Was ist Houdini?

Harry Houdini war ein berühmter Illusionskünstler. Er ist die Inspiration für die Namensgebung dieses CSS API. Houdini ist ein Standard in der CSS-Arbeitsgruppe im W3C (World Wide Web Consortium), um besseren Zugang zur CSS Engine des Browsers zu erhalten und mehr Kontrolle darüber zu haben, wie eine Seite aussieht oder gerendert wird. Mit Houdini kann dem Browser beigebracht werden, Farben oder Layout zu verarbeiten. Das erlaubt es Entwicklern, Layouteffekte, Rahmen, Hintergründe, Bilder oder andere Dinge zu erstellen, die derzeit in CSS nicht möglich sind. Außerdem müssen weniger Polyfills und JavaScript-Abhängigkeiten geschrieben werden und es können reine CSS-Polyfills verfasst und so neue CSS-Funktionen geschaffen werden, ohne darauf warten zu müssen, dass diese nativ im Browser implementiert werden. Damit sind ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang