Browserübergreifende Paint Worklets und Houdini.how

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

Una Kravets

Das Preisvergleichsportal Houdini ist ein Überbegriff für beschreibt eine Reihe von Low-Level-Browser-APIs, die Entwicklern viel mehr Kontrolle und mehr Kontrolle über die von ihnen geschriebenen Stile.

Houdini ermöglicht mehr semantisches CSS mit dem typisierten Objekt Modell. Entwickler können erweiterte benutzerdefinierte CSS-Eigenschaften mit Syntax, Standardwerten und Vererbung mithilfe der Properties and Values API

Außerdem werden Farbe, Layout und Animation vorgestellt. Worklets, die ein eine Welt voller Möglichkeiten, indem es Autoren den Einstieg in den Stil- und Layoutprozess erleichtert. des Rendering-Moduls des Browsers.

Houdini-Worklets verstehen

Houdini-Worklets sind Browseranweisungen, die über den Hauptthread ausgeführt werden und aufgerufen werden können, wenn erforderlich. Mit Worklets können Sie modularen CSS-Code schreiben, um bestimmte Aufgaben zu erledigen, und einen einzigen zu importierende und zu registrierende JavaScript-Zeile. Ähnlich wie Service Worker für den CSS-Stil können auch Houdini-Worklets sind für Ihre Anwendung registriert und können nach der Registrierung in Ihrem Preisvergleichsportal namentlich verwendet werden.

Worklet-Datei schreiben und 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 eine solche Worklet (das Paint-Worklet) und ermöglicht es Entwicklern, benutzerdefinierte Paint-Funktionen im Canvas-Stil zu definieren. die direkt in CSS als Hintergründe, Rahmen, Masken usw. verwendet werden können. Es gibt eine ganze Welt wie Sie CSS Paint in Ihren eigenen Benutzeroberflächen verwenden können.

Anstatt beispielsweise zu warten, bis ein Browser eine Funktion für abgeschrägte Ränder implementiert hat, können Sie Ihr eigenes Paint-Worklet oder verwenden Sie ein bereits veröffentlichtes Worklet. Dann wird anstelle von „Border-Radius“ dieses Worklet auf Rahmen und Beschnitt anwenden.

<ph type="x-smartling-placeholder">

</ph>

Im obigen Beispiel wird dasselbe Paint-Worklet mit unterschiedlichen Argumenten verwendet (siehe Code unten), um dieses Ergebnis zu erzielen. Demo zu 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 W3C. Empfehlung von Kandidaten. Sie ist derzeit in allen Chromium-basierten Browsern aktiviert, teilweise unterstützt und wird für Firefox in Betracht gezogen.

<ph type="x-smartling-placeholder">

</ph>

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

Doch auch ohne umfassende Browserunterstützung können Sie mit der Houdini Paint API kreativ werden und Ihre Styles funktionieren mit der CSS Paint-Funktion in allen modernen Browsern Polyfill Und um einige einzigartige sowie eine Ressourcen- und Worklet-Bibliothek zur Verfügung zu stellen, houdini.how.

Houdini.how

<ph type="x-smartling-placeholder">

</ph>

Screenshot der Startseite von Houdini.how

Houdini.how ist eine Bibliothek und Referenz für Houdini-Worklets und -Ressourcen. Es enthält alles, was Sie über CSS Houdini wissen müssen: Browser-Support, Übersicht über die verschiedenen APIs, Verwendung Informationen, zusätzliche Ressourcen und Live-Painting-Worklet Beispiele. Jedes Beispiel auf Houdini.how wird von der CSS Paint API unterstützt. Das bedeutet, funktionieren sie in allen modernen Browsern. Probier es aus!

Houdini verwenden

Houdini-Worklets müssen entweder lokal über einen Server oder in der Produktion auf HTTPS ausgeführt werden. Um ein Houdini-Worklet nutzen können, müssen Sie es entweder lokal installieren oder Netzwerk (CDN) wie unpkg, um die Dateien bereitzustellen. Anschließend müssen Sie die Worklet lokal gespeichert.

Es gibt verschiedene Möglichkeiten, die Houdini.how-Showcase-Worklets in Ihre eigenen Webprojekte zu integrieren. Sie können entweder über ein CDN in einer Prototyping-Kapazität verwendet werden oder Sie die Worklets selbst mit npm-Module. In jedem Fall sollten Sie auch die CSS-Paint-Polyfill hinzufügen, um sicherzustellen, dass sie browserübergreifend kompatibel.

1. Prototyping mit einem CDN

Bei der Registrierung von „unpkg“ können Sie direkt auf die Datei „worklet.js“ verweisen, ohne sie lokal herunterladen zu müssen. um das Worklet zu installieren. „Unpkg“ wird in „worklet.js“ als Hauptskript aufgelöst. Alternativ können Sie es angeben. selbst. Das Entfernen verursacht keine CORS-Probleme, da die Bereitstellung über HTTPS erfolgt.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

Die benutzerdefinierten Eigenschaften werden dabei nicht für Syntax- und Fallback-Werte registriert. Stattdessen werden sie haben jeweils Fallback-Werte in das Worklet eingebettet.

Wenn Sie die benutzerdefinierten Eigenschaften registrieren möchten, schließen Sie auch die Datei „properties.js“ ein.

<script src="https://unpkg.com/<package-name>/properties.js"></script>

So schließen Sie die CSS-Paint-Polyfill mit unpkg ein:

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. Worklets über NPM verwalten

Installieren Sie Ihr Worklet aus npm:

npm install <package-name>
npm install css-paint-polyfill

Beim Importieren dieses Pakets wird das Paint-Worklet nicht automatisch injiziert. Um das Worklet zu installieren, müssen Sie eine URL generieren, die zum "worklet.js" des Pakets aufgelöst wird, und diese URL registrieren. Sie: Dabei gilt:

CSS.paintWorklet.addModule(..file-path/worklet.js)

Den Namen und den Link des npm-Pakets finden Sie auf jeder Worklet-Karte.

Sie müssen den CSS-Code "Paint Polyfill" auch über ein Skript hinzufügen oder direkt importieren, mit einem Framework oder Bundler.

Hier ist ein Beispiel für die Verwendung von Houdini mit dem Farb-Polyfill in modernen Bundler:

import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';

CSS.paintWorklet.addModule(workletURL);

Hinweis : Eine genauere Anleitung für die einzelnen Bundles findest du auf der Nutzungsseite auf Houdini.how.

Beitragen

Nachdem du jetzt mit einigen Houdini-Beispielen gespielt hast, bist du an der Reihe, eigene Houdini-Beispiele hinzuzufügen. Houdini.how hostet selbst keine Worklets, sondern präsentiert stattdessen die Arbeit der Community. Wenn Sie ein Worklet oder eine Ressource einreichen möchten, sehen Sie sich das GitHub-Repository Repository mit Beitragsrichtlinien. Wir sind gespannt, was dir einfällt.