Browserübergreifende Paint Worklets und Houdini.how

Mit nur wenigen Klicks können Sie Ihr CSS mit Houdini Paint-Worklets ergänzen.

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.

Houdini-Ebene

Houdini ermöglicht durch das typisierte Objektmodell semantisches CSS. Entwickler können erweiterte benutzerdefinierte CSS-Properties 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 modularen CSS-Code schreiben, um bestimmte Aufgaben zu erledigen. Für den Import und die Registrierung ist eine einzige JavaScript-Zeile 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). Sie ermöglicht Entwicklern, canvasähnliche benutzerdefinierte Painting-Funktionen zu 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. Wenden Sie dieses Worklet dann auf Rahmen und Beschnitt an, statt Border-Radius zu verwenden.

Im Beispiel oben wird dasselbe Paint-Worklet mit unterschiedlichen Argumenten verwendet (siehe Code unten), um dieses Ergebnis zu erzielen. Demo auf Glitch
.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.

Caniuse-Support
Die CSS Painting API wird derzeit in Chromium-basierten Browsern unterstützt.

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

Screenshot der Worklet-Seite
Screenshot von der Startseite von 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 Inhalte 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 Hauptskript 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 Eigenschaften werden dabei nicht für Syntax- und Fallback-Werte registriert. Stattdessen sind jeweils Fallback-Werte in das Worklet eingebettet.

Wenn Sie die benutzerdefinierten Eigenschaften registrieren möchten, fügen Sie auch die Datei „properties.js“ hinzu.

<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. Um das Worklet zu installieren, 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 für die Verwendung von Houdini mit der Paint-Polyfill in modernen Bundlern:

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 jetzt mit einigen Houdini-Beispielen gespielt hast, bist du an der Reihe, eigene Houdini-Hörproben hinzuzufügen. 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 im GitHub-Repository mit den Richtlinien für Beiträge weitere Informationen. Wir sind gespannt, was dir einfällt.