CSS Paint API

Laut dem Autor des Materials, dessen Übersetzung wir heute veröffentlichen, ist die CSS Paint API eine unglaublich interessante Technologie. Darüber hinaus sprechen wir nicht nur über seine aktuellen Fähigkeiten, sondern auch über die Phänomene, die ihm präsentiert werden, und dass sein Erscheinungsbild den Beginn sehr bemerkenswerter Veränderungen in der CSS-Welt markiert. Hier werden wir über die CSS Paint API und die Gründe für ihr Erscheinungsbild sprechen und darüber, wie man sie verwendet.

Was ist die CSS Paint API?

Die fragliche API ist nur ein kleiner Teil der neuen Spezifikationen, die im Rahmen des CSS Houdini-Projekts entwickelt werden. Die kurze Beschreibung dieses Projekts beruht auf der Tatsache, dass Entwickler auf niedriger Ebene Zugriff auf interne CSS-Mechanismen erhalten.

Mit der CSS Paint API können Sie die Funktion paint() in Situationen aufrufen paint() in denen unter normalen Bedingungen beispielsweise mit einem bestimmten Wert gearbeitet wird, der eine Art Bild beschreibt. Ein häufiges Beispiel hierfür ist die Eigenschaft " background-image , mit der Sie bei der Arbeit die Funktion " url() können, um dem System einen Link zur Bilddatei zu übergeben:

 area { background-image: url('assets/myimage.jpg'); } 

Mit der CSS-Paint-API können Sie anstelle einer ähnlichen Funktion die Funktion paint() aufrufen und das von JavaScript beschriebene sogenannte Worklet übergeben. Ein Vorklet kann als Code wahrgenommen werden, mit dem ein Entwickler fast alles programmgesteuert zeichnen kann, was er möchte. Und da es sich um JavaScript handelt, kann das Bild dynamisch gestaltet werden. Diese API ist der HTML5-Canvas-API an sich sehr ähnlich, und jetzt werden wir darüber sprechen, wie alles funktioniert.

CSS Paint API-Funktionen

Wenn Sie jetzt das Gefühl haben, dass dies alles gut klingt, aber kompliziert aussieht und Sie der Meinung sind, dass Sie mit gewöhnlichen Bildern recht vertraut sind, denken Sie daran, dass gewöhnliche Bilder mit dem Aufkommen neuer Technologien nicht an Relevanz verlieren. Es ist völlig normal, sie wie immer zu benutzen. Die Tatsache, dass etwas Neues am Horizont aufgetaucht ist und wahrscheinlich vielversprechend ist, bedeutet nicht, dass jeder dieses Neue sofort nutzen muss, um alle bestehenden Probleme zu lösen. Gewöhnliche Bilder sind jedoch statisch. Die neue API überzeugt mit der Idee, dynamische Bilder zu erstellen.

Lassen Sie uns über den linearen Gradienten der CSS-Funktion nachdenken. Das Ding ist sehr mächtig. Schauen Sie sich das zum Beispiel an. Aber können Sie sich vorstellen, wie viel einfacher es wäre, den gleichen Effekt zu erzielen, der durch überlappende Ebenen entsteht, wenn Sie nicht viele Hintergrundbilder verwenden müssten? Dies ist jedoch nicht der einzige Punkt. Wenn Sie sich mit der CSS Paint-API befassen, können Sie verstehen, wie solche Bilder während der Programmausführung erstellt werden, und dies kann sehr nützlich sein (genau das planen wir hier).

Was ist mit der CSS-Funktion mit konischem Gradienten ? Es kann gesagt werden, dass es von Browsern ohne Polyfill noch nicht unterstützt wird. Mit der neuen API können Sie konische Verläufe erstellen und deren Parameter anpassen, die sich nicht besonders von den Angaben in der Spezifikation unterscheiden. All dies bedeutet, dass Sie in der Praxis mithilfe der neuen API Ihre eigene native Polyfüllung erstellen können. Und das ist einfach wunderbar.

Denken Sie daran, dass all dies Teil einer größeren Gruppe von Funktionen ist, die als CSS Houdini bekannt sind. In der Projektdokumentation heißt es dazu: „Das Ziel der CSS-TAG Houdini Task Force (CSS Houdini) besteht darin, gemeinsam Mechanismen zu entwickeln, die das Rätsel der Technologie lösen, Webseiten zu gestalten und ihre Layouts zu erstellen.“

Hört sich gut an, oder? Tatsächlich sollen diese neuen Mechanismen es Entwicklern ermöglichen, die Funktionalität von CSS selbst zu erweitern und ihnen bessere Styling-Tools, browserübergreifende Unterstützung und die Möglichkeit zum Erstellen von Polyfills zu bieten.

Der Standardisierungsprozess neuer Technologien kann einige Zeit dauern. Zunächst wird ein Vorschlag für eine neue CSS-Funktion gemacht. Als nächstes wird eine Spezifikation geschrieben, andere Prozesse treten auf. Infolgedessen implementieren Browserhersteller neue Spezifikationen. Und da Entwickler es oft nicht erwarten können, so schnell wie möglich mit der Verwendung neuer Funktionen zu beginnen, müssen sie berücksichtigen, dass alte Browser möglicherweise keine Innovationen unterstützen und dass einige Spezifikationen, wenn sie noch nicht vollständig implementiert sind, im Laufe der Zeit möglicherweise nicht vollständig implementiert werden Entwicklung, ernsthafte Veränderung. Vielleicht gibt es nichts zu sagen über die typischen Nuancen der Implementierung verschiedener Technologien in verschiedenen Browsern. Das Houdini-Projekt kann diese Probleme weitestgehend lösen, sodass wir die Browserfunktionalität selbst entwickeln, verwenden und ruhig darauf warten können, dass die Browserhersteller bestimmte Funktionen implementieren. Hier einige Materialien zu diesem Thema. Die erste ist den Stärken von Houdini gewidmet, und die zweite besteht darin, die Fähigkeiten dieses Projekts zu nutzen, um komplexe Animationen zu erstellen.

Unterstützung für CSS Paint API durch Browser

Kann ich heute die CSS Paint API verwenden? Wir können diese Frage positiv beantworten, obwohl zu beachten ist, dass bei weitem nicht alle Browser diese Technologie unterstützen. Um Supportinformationen für diese API zu erhalten, können Sie die Ressource caniuse.com verwenden .


Unterstützung für die CSS Paint API durch verschiedene Browser (Juli 2018)

Wie Sie sehen, unterstützt diese API bisher nur Chrome. Aber wie auch immer, lassen Sie uns darüber sprechen, wie man es benutzt. Wir werden die Software-Konstrukte behandeln, die erforderlich sind, damit die neue API funktioniert. Dies beinhaltet neue CSS-Funktionen und einige relativ neue JavaScript-Mechanismen. Unser Beispiel wird in drei Schritte unterteilt.

Schritt 1: CSS

Denken Sie daran, dass die Widgets zum Erstellen eines Bildes mit der CSS Paint-API die Fragmente des JS-Codes sind. Daher müssen wir dem Worklet zunächst einen Namen geben und es in CSS aufrufen. Nennen awesomePattern es awesomePattern . Infolgedessen sieht das CSS folgendermaßen aus:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

Die vorbereitenden Vorbereitungen sind abgeschlossen, aber bis der Rest unseres Beispiels fertig ist, wird dies alles nicht funktionieren.

Schritt 2: JavaScript

Jetzt müssen wir das Worklet mit JS beschreiben. Hier wird gezeigt, wie im Hauptskript ein anderes Skript geladen wird, das die von uns benötigten Funktionen implementiert.

 CSS.paintWorklet.addModule('patternWorklet.js'); 

Auch in diesem Stadium passiert nichts, da das interessanteste in der Datei patternWorklet.js versteckt ist.

In der Datei patternWorklet.js wir die Klasse des Vorklets registrieren:

 registerPaint('awesomePattern', Shape); 

Hier rufen wir die Funktion registerPaint() und übergeben sie als Worklet, in diesem Fall awesomePattern . Außerdem übergeben wir dieser Funktion einen Link zu der Klasse, die wir schreiben werden, in diesem Fall Shape . Dieser Befehl muss nach der Deklaration der entsprechenden Klasse hinzugefügt werden. Wenn Sie Klassen deklarieren und verwenden, können Sie sich nicht auf einen Mechanismus zum Auslösen von Funktionsdeklarationen verlassen. Bevor Sie eine Klasse verwenden können, müssen Sie sie deklarieren.

Als Nächstes verwenden wir die Syntax zum Deklarieren von ECMAScript 2015-Klassen und schreiben eine Klasse, die das Hintergrundbild zeichnet. Da diese Klasse jetzt als Klasse der Arbeiterklasse registriert ist, können wir einige spezielle Mechanismen verwenden, die automatisch in ihr verfügbar sind.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

Der paint() Rückruf enthält die Parameter ctx , geom und properties . Der Parameter ctx dem 2D-Rendering-Kontext, der vom <canvas> abgerufen werden kann. Nun, es ist fast das gleiche. Tatsache ist, dass Sie mit dem <canvas> Pixeldaten lesen können, die CSS Paint-API jedoch nicht. Trotz der Unterschiede können wir mit ctx dieselben grafischen Ausgabemethoden verwenden, die bei der Arbeit mit dem <canvas> . In diesem Beispiel zeichnen wir mit der Funktion arc() einen Kreis.

Die ersten beiden an die Funktion arc() Werte sind die X- und Y-Koordinaten des Kreismittelpunkts in Pixel relativ zum Ursprung in der oberen linken Ecke des Elements. Ich möchte jedoch, dass sich der Kreis in der Mitte des Elements befindet. Um dieses Problem zu lösen, ist der geom Parameter für uns nützlich. Es bietet Zugriff auf das PaintSize Objekt, das eine Beschreibung der Bildeinstellungen darstellt. Insbesondere wenn wir uns darauf beziehen, können wir die Parameter für width und height lesen, und genau das benötigen wir, um den Kreis zu zentrieren.

Als Ergebnis kommen wir zu diesem Code:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

Siehe die Arbeitsversion des Beispiels auf CodePen . Genau genommen gibt dieser Code dies aus.


Kreis erstellt mit CSS Paint APIs

Das alles ist gut, aber unser Beispiel ist sehr einfach. Lassen Sie uns anstelle des üblichen Kreises etwas Interessanteres zeichnen. Zum Beispiel - so ein Sternchen - das Logo der Website css-tricks.com.


Mit CSS Paint APIs erstelltes Sternchen

Hier ist ein CodePen-Projekt, mit dem Sie dies tun können.

drawStar() Sie beim Betrachten des JS-Codes für dieses Projekt auf die drawStar() -Methode und die vielen Funktionen, die beim Arbeiten mit dem <canvas> .

Schritt 3: Benutzerdefinierte CSS-Eigenschaften

Mit neuen Technologien können wir viel weiter gehen als nur Kreise und Sterne zu zeichnen. Wir können uns die leistungsstarken Funktionen benutzerdefinierter CSS-Eigenschaften (Variablen) ansehen. Sie sind übrigens selbst sehr interessant. In unserem Fall erweisen sie sich als besonders nützlich.

Angenommen, wir möchten die Größe oder Farbe eines zuvor erstellten Logos ändern können. Diese Parameter können in Form von benutzerdefinierten Eigenschaften in den CSS-Code eingefügt und dann über den dritten Parameter, der an den paint() Rückruf übergeben wird, im Programm verwendet werden. Es geht um den properties .

Wir fügen unserem CSS-Code die Eigenschaft --star-scale hinzu, mit der die --star-scale gesteuert werden soll, und die Eigenschaft --star-color , mit der die Änderung der Logo-Farbe direkt in CSS organisiert wird. Folgendes haben wir:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

Nun zurück zur Klasse der Arbeitstücher. Hier müssen wir mit den oben beschriebenen Benutzereigenschaften interagieren. Dies erfolgt mit der inputProperties Methode, mit der wir auf alle CSS-Eigenschaften und ihre zugewiesenen Werte zugreifen können.

 static get inputProperties() { return ['--star-scale','--star-color']; } 

Jetzt können Sie mit ihnen in der paint() -Methode arbeiten:

 const size = parseInt(properties.get('--shape-size').toString()); 

Natürlich können die erhaltenen Werte in dem Code verwendet werden, der für die Bilderzeugung verantwortlich ist. Dies führt dazu, dass, wenn wir im CSS-Code den Wert der --star-scale oder --start-color , sich dies sofort auf das Aussehen des Bildes auswirkt.


Der Einfluss benutzerdefinierter CSS-Eigenschaften auf das fertige Bild

Diese Funktionalität ist in demselben CodePen-Projekt implementiert, das wir oben erwähnt haben.

Übrigens ist zu beachten, dass bei Verwendung der neuen API alle üblichen CSS-Eigenschaften, die sich auf das Festlegen des Hintergrunds von Elementen beziehen, wie z. B. background-size und background-repeat , auf dieselbe Weise wie zuvor funktionieren. Sie haben nicht an Relevanz verloren.

Zusammenfassung

Die CSS Paint API ist eine sehr leistungsstarke Technologie, deren Funktionen nicht nur auf die Erstellung von Hintergrundbildern beschränkt sind.

Stellen Sie sich vor, das Element sollte einen speziellen Rand haben, z. B. einen, der nicht vollständig sichtbar ist, oder einen doppelten. Um solche Effekte zu erzielen, verwenden Sie normalerweise die Pseudoelemente ::before oder ::after oder einen speziell konfigurierten box-shadow . Rahmen (und vieles mehr) können mithilfe der CSS Paint-API und der border-image Eigenschaft implementiert werden.

Die CSS Paint-API vereint viele großartige Funktionen wie Widgets, ECMAScript 2015-Klassen und die Funktionen des <canvas> . Darüber hinaus bietet es dem Entwickler eine JavaScript-basierte Bildverwaltungssoftware. Mithilfe des Ereignismechanismus können Sie beispielsweise die Aktualisierung benutzerdefinierter Eigenschaften organisieren. requestAnimationFrame bedeutet, dass das Bild selbst wie hier ausgeführt wird , wenn das requestAnimationFrame den Prozess der Aktualisierung von Eigenschaften in der Funktion requestAnimationFrame startet, mit der Sie jedes Mal eine Animation erstellen können, wenn der Benutzer auf die Schaltfläche klickt. Darüber hinaus werden auch die Koordinaten des Mauszeigers beim Klicken berücksichtigt.

Auf den ersten Blick mag dies alles etwas verwirrend erscheinen, aber werfen wir einen Blick auf einige andere Teile des Houdini-Projekts, mit denen wir uns möglicherweise treffen:

• Mit der CSS-Layout-API kann der Entwickler beispielsweise display: layout('myCustomLayout') . Ein typisches Beispiel ist die Erstellung eigener Layouts im Mauerwerksstil. Der Anwendungsbereich dieser Funktion ist jedoch viel breiter.
• Mit der CSS-API für Eigenschaften und Werte können Sie benutzerdefinierte Eigenschaftstypen festlegen.
• Die CSS Animation Worklet API überträgt Animationsverarbeitungsvorgänge über den Hauptstrom hinaus, was zu perfekt reibungslosen Animationen führen sollte.

Infolgedessen können wir sagen, dass buchstäblich vor unseren Augen Technologien auftauchen, die Webentwicklern viele neue Möglichkeiten eröffnen. Die Prozesse ihrer Standardisierung und Implementierung in Browsern sind nicht so schnell, aber sie werden möglicherweise enorme Auswirkungen auf alles haben, was mit dem Styling von Webseiten zu tun hat.

Liebe Leser! Welche Bereiche der CSS Paint API-Anwendung finden Sie am interessantesten?