Neue Möglichkeiten in Chrome 65
Die CSS Paint API (auch als „CSS Custom Paint“ oder „Houdini’s Paint Worklet“ bezeichnet) ist ab Chrome 65 standardmäßig aktiviert. Was ist das? Was kann ich damit machen? Und wie funktioniert das? Lesen Sie einfach weiter…
Mit der CSS Paint API können Sie programmatisch ein Bild generieren, wenn für eine CSS-Eigenschaft ein Bild erwartet wird. Eigenschaften wie background-image oder border-image werden in der Regel mit url() verwendet, um eine Bilddatei zu laden, oder mit integrierten CSS-Funktionen wie linear-gradient(). Stattdessen können Sie jetzt paint(myPainter) verwenden, um auf ein Paint-Worklet zu verweisen.
Paint-Worklet schreiben
Wenn wir ein Paint-Worklet namens myPainter definieren möchten, müssen wir eine CSS-Paint-Worklet-Datei mit CSS.paintWorklet.addModule('my-paint-worklet.js') laden. In dieser Datei können wir mit der Funktion registerPaint eine Paint-Worklet-Klasse registrieren:
class MyPainter {
paint(ctx, geometry, properties) {
// ...
}
}
registerPaint('myPainter', MyPainter);
Im paint()-Callback können wir ctx genauso verwenden wie eine CanvasRenderingContext2D, wie wir sie von <canvas> kennen. Wenn Sie wissen, wie Sie in einem <canvas> zeichnen, können Sie auch in einem Paint-Worklet zeichnen. geometry gibt die Breite und Höhe des verfügbaren Canvas an. properties Ich erkläre es Ihnen später in diesem Artikel.
Schreiben wir als Einführungsbeispiel ein Paint-Worklet mit Schachbrettmustern und verwenden es als Hintergrundbild eines <textarea>. (Ich verwende ein Textfeld, da es standardmäßig veränderbar ist.):
<!-- index.html -->
<!doctype html>
<style>
textarea {
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
paint(ctx, geom, properties) {
// Use `ctx` as if it was a normal canvas
const colors = ['red', 'green', 'blue'];
const size = 32;
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
Wenn Sie <canvas> bereits verwendet haben, sollte Ihnen dieser Code bekannt vorkommen. Hier können Sie sich die Live-Demo ansehen.
Der Unterschied zur Verwendung eines normalen Hintergrundbilds besteht darin, dass das Muster auf Anfrage neu gezeichnet wird, wenn der Nutzer die Größe des Textfelds ändert. Das bedeutet, dass das Hintergrundbild immer genau so groß ist, wie es sein muss, einschließlich der Kompensation für Displays mit hoher Pixeldichte.
Das ist ziemlich cool, aber auch ziemlich statisch. Würden wir jedes Mal ein neues Worklet schreiben, wenn wir das gleiche Muster wollen, aber mit unterschiedlich großen Quadraten? Die Antwort lautet: Nein.
Worklet parametrisieren
Glücklicherweise kann das Paint-Worklet auf andere CSS-Eigenschaften zugreifen. Hier kommt der zusätzliche Parameter properties ins Spiel. Wenn Sie der Klasse ein statisches inputProperties-Attribut zuweisen, können Sie Änderungen an jeder CSS-Eigenschaft abonnieren, einschließlich benutzerdefinierter Eigenschaften. Die Werte werden über den Parameter properties bereitgestellt.
<!-- index.html -->
<!doctype html>
<style>
textarea {
/* The paint worklet subscribes to changes of these custom properties. */
--checkerboard-spacing: 10;
--checkerboard-size: 32;
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
// inputProperties returns a list of CSS properties that this paint function gets access to
static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }
paint(ctx, geom, properties) {
// Paint worklet uses CSS Typed OM to model the input values.
// As of now, they are mostly wrappers around strings,
// but will be augmented to hold more accessible data over time.
const size = parseInt(properties.get('--checkerboard-size').toString());
const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
const colors = ['red', 'green', 'blue'];
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
ctx.fillStyle = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
ctx.fill();
}
}
}
}
registerPaint('checkerboard', CheckerboardPainter);
Jetzt können wir denselben Code für alle Arten von Schachbrettern verwenden. Aber noch besser: Wir können jetzt in den Entwicklertools mit den Werten herumspielen, bis wir den richtigen Look gefunden haben.
Browser, die das Paint-Worklet nicht unterstützen
Derzeit ist das Paint-Worklet nur in Chrome implementiert. Es gibt zwar positive Signale von allen anderen Browseranbietern, aber es gibt nicht viel Fortschritt. Sehen Sie regelmäßig unter Is Houdini Ready Yet? nach, um auf dem Laufenden zu bleiben. In der Zwischenzeit sollten Sie die progressive Verbesserung verwenden, damit Ihr Code auch dann ausgeführt wird, wenn Paint Worklet nicht unterstützt wird. Damit alles wie erwartet funktioniert, müssen Sie den Code an zwei Stellen anpassen: im CSS und im JS.
Sie können die Unterstützung für das Paint-Worklet in JS prüfen, indem Sie das CSS-Objekt überprüfen:
js
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('mystuff.js');
}
Auf der CSS-Seite haben Sie zwei Möglichkeiten. Sie können @supports verwenden:
@supports (background: paint(id)) {
/* ... */
}
Ein kompakterer Trick besteht darin, die Tatsache zu nutzen, dass CSS eine gesamte Eigenschaftsdeklaration ungültig macht und anschließend ignoriert, wenn sie eine unbekannte Funktion enthält. Wenn Sie eine Property zweimal angeben – zuerst ohne Paint-Worklet und dann mit dem Paint-Worklet –, erhalten Sie eine progressive Verbesserung:
textarea {
background-image: linear-gradient(0, red, blue);
background-image: paint(myGradient, red, blue);
}
In Browsern, die Paint Worklets unterstützen, wird die erste Deklaration von background-image durch die zweite überschrieben. In Browsern, die keine Unterstützung für Paint-Worklets bieten, ist die zweite Deklaration ungültig und wird verworfen. Die erste Deklaration bleibt in Kraft.
CSS Paint Polyfill
Für viele Anwendungen ist auch der CSS Paint Polyfill verfügbar, der modernen Browsern Unterstützung für benutzerdefiniertes CSS-Paint und Paint-Worklets hinzufügt.
Anwendungsfälle
Es gibt viele Anwendungsfälle für Paint-Worklets, einige davon sind offensichtlicher als andere. Eine der offensichtlichsten Möglichkeiten ist die Verwendung eines Paint-Worklets, um die Größe des DOM zu reduzieren. Oft werden Elemente nur hinzugefügt, um mit CSS Verzierungen zu erstellen. In Material Design Lite enthält die Schaltfläche mit dem Welleneffekt beispielsweise zwei zusätzliche <span>-Elemente, um die Welle selbst zu implementieren. Wenn Sie viele Schaltflächen haben, kann dies zu einer Vielzahl von DOM-Elementen führen und die Leistung auf Mobilgeräten beeinträchtigen. Wenn Sie den Welleneffekt stattdessen mit dem Paint-Worklet implementieren, benötigen Sie keine zusätzlichen Elemente, sondern nur ein Paint-Worklet.
Außerdem haben Sie etwas, das sich viel einfacher anpassen und parametrisieren lässt.
Ein weiterer Vorteil des Paint-Worklets ist, dass eine Lösung mit Paint-Worklet in den meisten Fällen nur wenige Byte groß ist. Natürlich gibt es jedoch einen Kompromiss: Ihr Paint-Code wird immer dann ausgeführt, wenn sich die Größe des Canvas oder einer der Parameter ändert. Wenn Ihr Code also komplex ist und lange dauert, kann es zu Rucklern kommen. In Chrome wird daran gearbeitet, Paint-Worklets aus dem Haupt-Thread zu entfernen, damit auch langlaufende Paint-Worklets die Reaktionsfähigkeit des Haupt-Threads nicht beeinträchtigen.
Für mich ist die interessanteste Perspektive, dass Paint-Worklet eine effiziente Polyfilling von CSS-Funktionen ermöglicht, die ein Browser noch nicht hat. Ein Beispiel wäre die Polyfill-Funktion für konische Farbverläufe, bis sie nativ in Chrome unterstützt werden. Ein weiteres Beispiel: In einer CSS-Besprechung wurde beschlossen, dass jetzt mehrere Rahmenfarben möglich sind. Während dieses Meetings schrieb mein Kollege Ian Kilpatrick eine Polyfill für dieses neue CSS-Verhalten mit einem Paint-Worklet.
Unkonventionell denken
Die meisten Menschen denken an Hintergrund- und Rahmenbilder, wenn sie das Paint-Worklet kennenlernen. Ein weniger intuitiver Anwendungsfall für das Paint-Worklet ist die mask-imageZuweisung beliebiger Formen an DOM-Elemente. Beispiel: Raute:
mask-image verwendet ein Bild, das der Größe des Elements entspricht. In Bereichen, in denen das Maskierungsbild transparent ist, ist auch das Element transparent. Bereiche, in denen das Maskierungsbild opak ist, ist das Element opak.
Jetzt in Chrome
Paint Worklet ist schon seit einiger Zeit in Chrome Canary verfügbar. In Chrome 65 ist es standardmäßig aktiviert. Probieren Sie die neuen Möglichkeiten aus, die das Paint-Worklet bietet, und zeigen Sie uns, was Sie damit erstellt haben. Weitere Inspirationen finden Sie in der Sammlung von Vincent De Oliveira.