Houdini-APIs

Houdini ist eine Reihe von Low-Level-APIs, die Teile der CSS-Engine verfügbar machen und den Entwicklern die Möglichkeit geben, CSS zu erweitern, indem sie in den Styling- und Layout-Prozess der Rendering-Engine eines Browsers eingreifen. Houdini ist eine Gruppe von APIs, die Entwicklern direkten Zugriff auf das CSS Object Model (CSSOM) gewähren. Dadurch können Entwickler Code schreiben, den der Browser wie CSS interpretieren kann, und neue CSS-Funktionen erstellen, ohne darauf warten zu müssen, dass sie nativ in Browsern implementiert werden.

Vorteile von Houdini

Houdini ermöglicht schnellere Analysezeiten als die Verwendung von JavaScript HTMLElement.style für Stiländerungen. Browser analysieren das CSSOM – einschließlich Layout-, Zeichen- und Kompositionsprozesse – bevor sie jegliche Stilaktualisierungen anwenden, die in Skripten gefunden werden. Darüber hinaus werden Layout-, Zeichen- und Kompositionsprozesse für JavaScript-Stilaktualisierungen wiederholt. Houdini-Code wartet nicht darauf, dass dieser erste Rendering-Zyklus abgeschlossen ist. Stattdessen wird er in diesen ersten Zyklus integriert und erstellt renderbare, verständliche Stile. Houdini stellt eine objektbasierte API für die Arbeit mit CSS-Werten in JavaScript bereit.

Die CSS Typed Object Model API von Houdini ist ein CSS-Objektmodell mit Typen und Methoden, das Werte als JavaScript-Objekte zugänglich macht, wodurch CSS-Manipulationen intuitiver werden als frühere, stringbasierte Operationen mit HTMLElement.style. Jedes Element und jede Regel im Stylesheet hat eine Stilkarte, die über die StylePropertyMap zugänglich ist.

Ein Merkmal von CSS Houdini ist der Worklet. Mit Worklets können Sie modulare CSS-Komponenten erstellen, die nur eine einzige JavaScript-Zeile benötigen, um konfigurierbare Komponenten zu importieren. Keine Preprozessoren, Postprozessoren oder JavaScript-Frameworks sind erforderlich.

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

Dieses zusätzliche Modul enthält Funktionen wie PaintWorkletGlobalScope.registerPaint, 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, darunter den Namen des Worklets sowie zusätzliche Parameter, die vom Worklet benötigt werden. Das Worklet hat außerdem Zugriff auf die benutzerdefinierten Eigenschaften des Elements: Diese müssen nicht als Funktionsargumente übergeben werden.

Im folgenden Beispiel wird die paint()-Funktion mit einem Worklet namens myComponent verwendet.

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

Hinweis: Mit großer Macht kommt große Verantwortung! Mit Houdini könnten Sie Ihre eigene Umsetzung für Masonry, Grid oder Regions erfinden, aber das ist nicht unbedingt die beste Idee. Die CSS-Arbeitsgruppe leistet viel Arbeit, um sicherzustellen, dass jede Funktion performant ist, alle Edge-Cases berücksichtigt und Sicherheits-, Datenschutz- sowie Barrierefreiheitsaspekte beachtet. Wenn Sie CSS mit Houdini erweitern, denken Sie daran, diese Überlegungen im Auge zu behalten und beginnen Sie mit kleineren Projekten, bevor Sie ehrgeizigere Vorhaben angehen.

Die Houdini-APIs

Unten finden Sie Links zu den Hauptreferenzseiten, die die APIs abdecken, die unter das Houdini-Dach fallen, zusammen mit Verweisen auf Leitfäden, die Ihnen bei der Nutzung helfen, falls Sie Unterstützung beim Lernen benötigen.

CSS Properties and Values API

Definiert eine API zum Registrieren neuer CSS-Eigenschaften. Eigenschaften, die mit dieser API registriert wurden, werden mit einer Syntax zum Analysieren bereitgestellt, die einen Typ, ein Vererbungsverhalten und einen Anfangswert definiert.

CSS Typed OM

Das Konvertieren von CSSOM-Wert-Strings in bedeutungsvoll typisierte JavaScript-Repräsentationen und zurück kann eine erhebliche Leistungseinbuße verursachen. Das CSS Typed OM stellt CSS-Werte als typisierte JavaScript-Objekte dar, um ihre performante Manipulation zu ermöglichen.

CSS Painting API

Entwickelt, um die Erweiterbarkeit von CSS zu verbessern. Die Painting API erlaubt es Entwicklern, JavaScript-Funktionen zu schreiben, die direkt in den Hintergrund, Rand oder Inhalt eines Elements via der CSS-Funktion paint() zeichnen.

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. Diese API ermöglicht es Entwicklern, ihre eigenen Layout-Algorithmen zu schreiben, wie z. B. Masonry- oder Zeilen-Snapping-Layouts.

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

CSS Parser API

Eine API, die den CSS-Parser direkter verfügbar macht, um beliebige CSS-ähnliche Sprachen in eine leicht typisierte Darstellung zu parsen.

Diese API ist derzeit ein Vorschlag und hat keine Browser-Implementierungen oder Dokumentationen auf MDN.

Font Metrics API

Eine API, die Schriftartenmetriken verfügbar macht, sodass typografische Layout-Ergebnisse zugänglich werden.

Diese API ist derzeit ein Vorschlag und hat keine Browser-Implementierungen oder Dokumentationen auf MDN.

Siehe auch