28 VIEWS

It’s #FrontendFriday – CSS Houdini

12.02.2021

Es ist mal wieder soweit – Its #FrontendFriday.

Im heutigem Blog schauen wir uns CSS Houdini an. Was ist das? Welche Vorteile ergreift man sich damit?

 

Was ist CSS Houdini?

Beziehung zwischen JavaScript und CSS – Das gibt es? Ja mit Houdini, denn es wir als auch “Schlüssel” für die Zusammenarbeit von JavaScript und CSS benannt.

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) zu zugreifen und diese anzupassen.

CSS-Funktionen nativ im Browser implementieren? Das ist nun mit Houdini Vergangenheit, denn mit Houdini hat der Entwickler die Möglichkeit CSS-Code zu schreiben, welches der Browser parsen kann 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 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?

Bisher gibt es zu den folgenden APIs noch keine Dokumentation bzw. Referenz:

  • Parser API
  • Layout API

Parser API

Eine API, die den CSS-Parser direkter 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. Mit dieser API registrierte Eigenschaften 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 den 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 da dank diesem Styles von nun an Objekte sind. Es muss nicht mehr mit Strings gearbeitet werden.

Bisher wurde zum setzen eines Padding-top so aus:

el.style.paddingTop = "50px";

Dank des neuen CSSOM ist diese Variante nicht mehr notwendig. Diese vereinfachte Variante kann verwendet werden.

el.attributeStyleMap.set('padding-top',CSS.px(50));

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

Information hierzu findet ihr mehr 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.

Als Beispiel hierzu können wir ein Border erstellen. Hierbei werden wir im CSS die “paint()” Methode verwenden und die dazugehörige JS-Funktion.

Beim CSS ist es erstmals wichtig zu wissen: Welche Methode möchte ich verwenden und welche Parameter sind benötigt?

Hierbei sieht man, dass wir die Übergabeparameter “–border-height” und “–border-position” verwenden. Diese werden zur Paint Funktion “borderRandomColor” übergeben.

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

Uns erwartet eine Paint-Funktion mit drei Parameter:

  • ctx – PaintRenderingContext2D – dieses ist ein Teil von CanvasRenderingContext2D, weshalb einiges ähnlich ist. Da es darauf aufbaut, kann man sich prima am Canvas-Parameter orientieren.
  • size/geom – enthält die Höhe und die Breite des Elements, wo die Paint-Funktion verwendet wird. In unserem Beispiel enthält es die Höhe und Breite der h1.
  • props – enthält unsere gesetzten Parameter. Über einen Getter können wir diese abrufen
Das Ergebnis kann sich sehen lassen:

Random Color Border
https://hellocoding.de/images/category/css/houdini-magie/randomcolorborder.webp

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 wird.

Dies kann ebenso das Arbeiten eines Entwickler bei doubleSlash vereinfachen da bspw. die native Implementierung von Funktionen auch wegfällt und somit mehr Möglichkeiten bereitgestellt wird. Der Entwickler kann auf Grund dem Zugriff auf das CSS Object Model (CSSOM) seine Ideen und Kundenwünsche umsetzen.

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

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.