Sie können Ihr Preisvergleichsportal mit nur wenigen Klicks mit Farb-Worklets von Houdini erweitern.
CSS Houdini ist ein Sammelbegriff für eine Reihe von Low-Level-Browser-APIs, die Entwicklern viel mehr Kontrolle und Kontrolle über die geschriebenen Stile geben.
Houdini ermöglicht semantischere CSS-Elemente mithilfe des typisierten Objektmodells. Entwickler können über die Properties and Values API erweiterte benutzerdefinierte CSS-Eigenschaften mit Syntax, Standardwerten und Übernahme definieren.
Außerdem werden Worklets für Paint, Layout und Animation eingeführt, die eine Welt voller Möglichkeiten eröffnen, da sie es Autoren einfacher machen, sich in den Stil- und Layoutprozess des Rendering-Moduls des Browsers einzuarbeiten.
Houdini-Worklets
Houdini-Worklets sind Browseranweisungen, die außerhalb des Hauptthreads ausgeführt 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 für Ihre Anwendung registriert und können nach der Registrierung mit dem Namen in Ihrem CSS verwendet werden.
Worklet-Datei schreiben
Worklet-Modul registrieren (CSS.paintWorklet.addModule(workletURL)) Worklet verwenden (background: paint(confetti))
Eigene Funktionen mit der CSS Painting API implementieren
Ein Beispiel für ein solches Worklet (das Paint-Worklet) ist die CSS Painting API. Mit ihr können Entwickler canvasähnliche benutzerdefinierte Painting-Funktionen definieren, die direkt in CSS als Hintergründe, Rahmen, Masken usw. verwendet werden können. Es gibt eine ganze Reihe von 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 Ränder implementiert, können Sie Ihr eigenes Paint-Worklet schreiben oder ein vorhandenes veröffentlichtes Worklet verwenden. Wenden Sie dieses Worklet dann, anstatt „Border-Radius“ zu verwenden, auf Rahmen und zum Ausschneiden an.
.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 Empfehlung des W3C-Kandidaten. Sie ist derzeit in allen Chromium-basierten Browsern aktiviert, wird in Safari teilweise unterstützt und wird auch für Firefox in Betracht gezogen.
Aber auch ohne vollständige Browserunterstützung können Sie mit der Houdini Paint API trotzdem kreativ werden und mit CSS Paint Polyfill Ihre Stile in allen modernen Browsern verwenden. Mein Team hat houdini.how entwickelt, um einige einzigartige Implementierungen zu präsentieren und eine Ressourcen- und Worklet-Bibliothek bereitzustellen.
Houdini.how
Houdini.how ist eine Bibliothek und Referenz für Houdini-Worklets und -Ressourcen. Hier finden Sie alles, was Sie über CSS Houdini wissen müssen: Browsersupport, einen Überblick über die verschiedenen APIs, Nutzungsinformationen, zusätzliche Ressourcen und Live-Paint-Worklet-Beispiele. Jedes Beispiel auf Houdini.how wird von der CSS Paint API unterstützt. Das bedeutet, dass es in allen modernen Browsern funktioniert. Probier es aus!
Houdini verwenden
Houdini-Worklets müssen entweder lokal über einen Server oder in der Produktion auf 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 zur Bereitstellung der Dateien verwenden. Anschließend müssen Sie das Worklet lokal registrieren.
Es gibt verschiedene Möglichkeiten, die Houdini.how Showcase-Worklets in Ihre eigenen Webprojekte einzubinden. Sie können entweder über ein CDN in einer Prototyping-Kapazität verwendet werden oder Sie können die Worklets mithilfe von npm-Modulen selbst verwalten. In beiden Fällen sollten Sie auch die CSS-Eigenschaft Paint Polyfill einbinden, um die browserübergreifende Kompatibilität sicherzustellen.
1. Prototyping mit einem CDN
Bei der Registrierung von unpkg können Sie direkt auf die Datei worklet.js verlinken, ohne das Worklet lokal installieren zu müssen. Unpkg wird in worklet.js als Hauptskript aufgelöst. Sie können es aber auch selbst angeben. Unpkg verursacht keine CORS-Probleme, da es über HTTPS bereitgestellt wird.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Dabei werden die benutzerdefinierten Eigenschaften nicht für Syntax- und Fallback-Werte registriert. Stattdessen haben sie jeweils Fallback-Werte in das Worklet eingebettet.
Fügen Sie optional auch die Datei properties.js ein, um die benutzerdefinierten Eigenschaften zu registrieren.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
So fügen Sie das CSS-Element Paint Polyfill mit unpkg ein:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Worklets über NPM verwalten
Installieren Sie Ihr Worklet von npm aus:
npm install <package-name>
npm install css-paint-polyfill
Beim Importieren dieses Pakets wird das Paint-Worklet nicht automatisch eingeschleust. Um das Worklet zu installieren, müssen Sie eine URL generieren, die in die worklet.js des Pakets aufgelöst wird, und diese registrieren. Dazu verwenden Sie:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Den Namen und den Link des npm-Pakets finden Sie auf jeder Worklet-Karte.
Sie müssen außerdem CSS Paint Polyfill über ein Skript einbinden oder direkt wie bei einem Framework oder Bundler importieren.
Hier ist ein Beispiel, wie Houdini mit Farb-Polyfill in modernen Setzern verwendet werden kann:
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 ein paar Houdini-Samples ausprobiert hast, bist du an der Reihe! Auf Houdini.how werden keine Worklets selbst gehostet, sondern die Arbeit der Community präsentiert. Wenn du ein Worklet oder eine Ressource einreichen möchtest, sieh dir das GitHub-Repository mit Beitragsrichtlinien an. Wir freuen uns auf Ihren Beitrag!