Houdini-APIs

Houdini ist eine Sammlung von Low-Level-APIs, die Teile der CSS-Engine offenlegt, um Entwicklern die Möglichkeit zu geben, CSS zu erweitern, indem sie sich in den Styling- und Layoutprozess der Rendering-Engine eines Browsers einklinken. Houdini ist eine Gruppe von APIs, die Entwicklern direkten Zugriff auf das CSS Object Model (CSSOM) gewährt, sodass Entwickler Code schreiben können, den der Browser als CSS parsen kann, und somit neue CSS-Funktionen erstellen, ohne darauf warten zu müssen, dass diese native in Browsern implementiert werden.

Vorteile von Houdini

Houdini ermöglicht schnellere Parsing-Zeiten als die Verwendung von JavaScript HTMLElement.style für Stiländerungen. Browser parsen das CSSOM — einschließlich Layout-, Mal- und Kompositionsprozessen — bevor sie Stilaktualisierungen aus Skripten anwenden. Darüber hinaus werden Layout-, Mal- und Kompositionsprozesse für JavaScript-Stilaktualisierungen wiederholt. Houdini-Code wartet nicht darauf, dass der erste Rendering-Zyklus abgeschlossen ist. Vielmehr wird er in diesen ersten Zyklus aufgenommen und erzeugt darstellbare, verständliche Stile. Houdini bietet eine objektbasierte API zum Arbeiten mit CSS-Werten in JavaScript.

Houdini's CSS Typed Object Model API ist ein CSS-Objektmodell mit Typen und Methoden, die Werte als JavaScript-Objekte bereitstellen und damit intuitivere CSS-Manipulationen als vorherige, auf Zeichenfolgen basierende HTMLElement.style-Manipulationen ermöglichen. Jedes Element und jede Regel im Stylesheet hat eine Stilkarte, die über ihre StylePropertyMap zugänglich ist.

Ein Feature von CSS Houdini ist das Worklet. Mit Worklets können Sie modulare CSS erstellen, das nur eine einzige Zeile JavaScript benötigt, um konfigurierbare Komponenten zu importieren: Keine Pre-Prozessoren, Post-Prozessoren oder JavaScript-Frameworks erforderlich.

js
CSS.paintWorklet.addModule("css-component.js");

Dieses hinzugefügte Modul enthält PaintWorkletGlobalScope.registerPaint-Funktionen, die vollständig konfigurierbare Worklets registrieren.

Die CSS-paint()-Funktion ist eine zusätzliche Funktion, die vom <image>-Typ unterstützt wird. Sie nimmt Parameter entgegen, die den Namen des Worklets sowie zusätzliche vom Worklet benötigte Parameter umfassen. Das Worklet hat zudem Zugriff auf die benutzerdefinierten Eigenschaften des Elements: Diese müssen nicht als Funktionsargumente übergeben werden.

Im folgenden Beispiel wird der paint()-Funktion ein Worklet namens my-component übergeben.

css
li {
  background-image: paint(my-component, stroke, 10px);
  --highlights: blue;
  --theme: green;
}

Hinweis: Mit großer Macht kommt große Verantwortung! Mit Houdini könnten Sie Ihre eigene Mauerwerk-, Gitter- oder Regionen-Implementierung entwickeln, aber das ist nicht unbedingt die beste Idee. Die CSS-Arbeitsgruppe leistet viel Arbeit, um sicherzustellen, dass jede Funktion leistungsfähig ist, alle Randfälle abdeckt und Sicherheit, Datenschutz und Zugänglichkeit berücksichtigt. Wenn Sie CSS mit Houdini erweitern, achten Sie darauf, diese Überlegungen zu berücksichtigen und klein anzufangen, bevor Sie sich an ehrgeizigere Projekte wagen.

Die Houdini-APIs

Im Folgenden finden Sie Links zu den Hauptreferenzseiten, die die APIs abdecken, die unter das Houdini-Dach fallen, zusammen mit Links zu Leitfäden, die Ihnen helfen, wenn Sie Anleitung in ihrer Verwendung benötigen.

CSS Properties and Values API

Definiert eine API zum Registrieren neuer CSS-Eigenschaften. Eigenschaften, die mit dieser API registriert werden, werden mit einer Parsing-Syntax versehen, die einen Typ, das Vererbungsverhalten und einen Startwert definiert.

CSS Typed OM

Das Umwandeln von CSSOM-Wertezeichenfolgen in bedeutungsvolle, typisierte JavaScript-Darstellungen und zurück kann einen erheblichen Leistungsaufwand verursachen. Die CSS Typed OM stellt CSS-Werte als typisierte JavaScript-Objekte bereit, um deren performante Manipulation zu ermöglichen.

CSS Painting API

Entwickelt, um die Erweiterbarkeit von CSS zu verbessern, ermöglicht die Painting-API Entwicklern das Schreiben von JavaScript-Funktionen, die direkt in den Hintergrund, den Rand oder den Inhalt eines Elements über die paint()-CSS-Funktion zeichnen können.

Worklets

Eine API zum Ausführen von Skripten in verschiedenen Phasen der Rendering-Pipeline unabhängig von der Haupt-JavaScript-Ausführungsumgebung. Worklets sind konzeptionell ähnlich wie Web Workers und werden vom Rendering-Engine aufgerufen und erweitert.

CSS Layout API

Entwickelt, um die Erweiterbarkeit von CSS zu verbessern, ermöglicht diese API Entwicklern, ihre eigenen Layout-Algorithmen zu schreiben, wie zum Beispiel Mauerwerk oder Zeilenfang.

Diese API hat eine teilweise Unterstützung in Chrome Canary. Sie ist noch nicht auf MDN dokumentiert.

CSS Parser API

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

Diese API ist derzeit ein Vorschlag und hat keine Browserimplementierungen oder Dokumentation auf MDN.

Font Metrics API

Eine API, die Schriftmetrik offenlegt und Zugriff auf typografische Layout-Ergebnisse gibt.

Diese API ist derzeit ein Vorschlag und hat keine Browserimplementierungen oder Dokumentation auf MDN.

siehe auch