Mit nur wenigen Klicks können Sie Ihr CSS mit Houdini-Paint-Worklets optimieren.
CSS Houdini ist ein Oberbegriff, der eine Reihe von Low-Level-Browser-APIs beschreibt, die Entwicklern viel mehr Kontrolle und Möglichkeiten bei der Erstellung von Stilen bieten.
Mit dem Typisierten Objektmodell ermöglicht Houdini semantischeres CSS. Entwickler können erweiterte benutzerdefinierte CSS-Eigenschaften mit Syntax, Standardwerten und Vererbung über die Properties and Values API definieren.
Außerdem werden Worklets für Malen, Layout und Animation eingeführt, die eine Vielzahl von Möglichkeiten eröffnen, da Autoren so einfacher auf den Stil- und Layoutprozess der Rendering-Engine des Browsers zugreifen können.
Houdini-Worklets
Houdini-Worklets sind Browseranweisungen, die im Hauptthread ausgeführt werden und bei Bedarf aufgerufen werden können. Mit Worklets können Sie modulares CSS für bestimmte Aufgaben schreiben. Zum Importieren und Registrieren ist nur eine Zeile JavaScript erforderlich. Ähnlich wie Service Worker für den CSS-Stil werden Houdini-Worklets bei Ihrer Anwendung registriert und können dann in Ihrem CSS per Name verwendet werden.
Workletdatei schreiben Worklet-Modul registrieren (CSS.paintWorklet.addModule(workletURL)) Worklet verwenden (background: paint(confetti))
Eigene Funktionen mit der CSS Painting API implementieren
Die CSS Painting API ist ein Beispiel für ein solches Worklet (das Paint-Worklet). Damit können Entwickler Canvas-ähnliche benutzerdefinierte Malfunktionen definieren, die direkt in CSS als Hintergründe, Rahmen, Masken usw. verwendet werden können. Es gibt viele Möglichkeiten, wie Sie CSS Paint in Ihren eigenen Benutzeroberflächen verwenden können.
Anstatt beispielsweise darauf zu warten, dass ein Browser eine Funktion für schräge Rahmen implementiert, können Sie Ihr eigenes Paint-Worklet schreiben oder ein vorhandenes veröffentlichtes Worklet verwenden. Verwenden Sie dann anstelle von „border-radius“ dieses Worklet für Rahmen und Ausschnitte.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
Die CSS Painting API ist derzeit eine der am besten unterstützten Houdini APIs. Ihre Spezifikation ist eine W3C-Empfehlung. Sie ist derzeit in allen Chromium-basierten Browsern aktiviert, wird in Safari teilweise unterstützt und wird für Firefox geprüft.
Aber auch ohne vollständige Browserunterstützung können Sie mit der Houdini Paint API kreativ werden und mit dem CSS Paint Polyfill sehen, ob Ihre Stile in allen modernen Browsern funktionieren. Um einige einzigartige Implementierungen zu präsentieren und eine Ressourcen- und Worklet-Bibliothek bereitzustellen, hat mein Team houdini.how entwickelt.
Houdini.how
Houdini.how ist eine Bibliothek und Referenz für Houdini-Worklets und ‑Ressourcen. Dort finden Sie alles Wissenswerte über CSS Houdini: Browserunterstützung, eine Übersicht über die verschiedenen APIs, Nutzungsinformationen, zusätzliche Ressourcen und Beispiele für Live Paint-Worklets. Jedes Beispiel auf Houdini.how wird von der CSS Paint API unterstützt und funktioniert daher in allen modernen Browsern. Probier es aus!
Houdini verwenden
Houdini-Worklets müssen entweder lokal über einen Server oder in der Produktionsumgebung über HTTPS ausgeführt werden. Wenn Sie mit einem Houdini-Worklet arbeiten möchten, müssen Sie es entweder lokal installieren oder ein Content Delivery Network (CDN) wie unpkg verwenden, um die Dateien bereitzustellen. Anschließend müssen Sie das Worklet lokal registrieren.
Es gibt verschiedene Möglichkeiten, die Worklets von Houdini.how in Ihre eigenen Webprojekte einzubinden. Sie können entweder über ein CDN für das Prototyping verwendet werden oder Sie können die Worklets selbst mit npm-Modulen verwalten. In jedem Fall sollten Sie auch den CSS Paint Polyfill einbinden, damit die Funktionen plattformübergreifend kompatibel sind.
1. Prototyping mit einem CDN
Wenn Sie sich über unpkg registrieren, können Sie direkt auf die Datei „worklet.js“ verlinken, ohne das Worklet lokal installieren zu müssen. Unpkg löst „worklet.js“ als Hauptscript auf. Sie können es auch selbst angeben. Unpkg verursacht keine CORS-Probleme, da es über HTTPS bereitgestellt wird.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Die benutzerdefinierten Properties werden dabei nicht für Syntax und Fallback-Werte registriert. Stattdessen sind in jedem Fall Fallback-Werte in das Worklet eingebettet.
Wenn Sie die benutzerdefinierten Properties optional registrieren möchten, fügen Sie auch die Datei „properties.js“ ein.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
So fügen Sie den CSS Paint Polyfill mit unpkg ein:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Worklets über NPM verwalten
Installieren Sie Ihr Worklet über npm:
npm install <package-name>
npm install css-paint-polyfill
Wenn Sie dieses Paket importieren, wird das Paint-Worklet nicht automatisch eingefügt. Zum Installieren des Worklets müssen Sie eine URL generieren, die auf „worklet.js“ des Pakets verweist, und diese registrieren. Dazu haben Sie folgende Möglichkeiten:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Der Name und der Link zum npm-Paket finden Sie auf jeder Worklet-Karte.
Außerdem müssen Sie den CSS Paint Polyfill über ein Script einbinden oder direkt importieren, wie Sie es bei einem Framework oder Bundler tun würden.
Hier ist ein Beispiel dafür, wie Sie Houdini mit der Paint-Polyfill in modernen Bundlern verwenden:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Beitragen
Nachdem du dich mit einigen Houdini-Samples vertraut gemacht hast, ist es an der Zeit, eigene zu erstellen. Houdini.how hostet keine Worklets selbst, sondern zeigt stattdessen die Arbeit der Community. Wenn Sie ein Worklet oder eine Ressource einreichen möchten, finden Sie in der GitHub-Repository mit den Richtlinien für Beiträge weitere Informationen. Wir sind gespannt auf deine Ideen!