Die CSS-Paint-API

0
17

Die CSS-Paint-API ist extrem spannend, nicht nur für das, was es ist, aber was es darstellt, das ist der Anfang einer sehr spannenden Zeit für CSS. Wir gehen über das, was es ist, warum wir es haben und wie anfangen, es zu benutzen.

Was ist der CSS-Paint-API?

Die API ist nur ein Teil einer ganzen suite von neuen Daten alle unter dem Dach von dem, was ist bekannt als CSS Houdini. Houdini, im Wesen, gibt Entwicklern Low-level Zugriff auf CSS selbst. Kein Scherz.

Die CSS-Paint-API ausdrücklich erlaubt Sie zu nennen, eine paint () – Funktion, wo würden Sie normalerweise schreiben eines Wertes, wo ein Bild erwartet. Ein gängiges Beispiel ist die background-image-Eigenschaft, wo Sie möglicherweise verwenden Sie die url () – Funktion, um einen link zu einer Bild-Datei wie dieser:

Bereich {
background-image: url(‘assets/myimage.jpg’);
}

Die CSS-Paint-API ermöglicht Ihnen das aufrufen der paint () – Funktion statt, und übergeben Sie eine Farbe worklet, die Sie definiert haben, durch JavaScript. Denke da ein bisschen code können Sie programmgesteuert zeichnen (ziemlich viel), was Sie wollen. Und weil es auf JavaScript basiert, können Sie es dynamisch zu. Die API selbst ist sehr ähnlich wie die HTML5 – <canvas> – API (und die bekommen wir, wie das funktioniert, dass in einer minute).

Das klingt cool, aber kompliziert. Ich bin schon glücklich über regelmäßige Bilder…

Das ist toll! Es gibt absolut nichts falsch mit der Verwendung regelmäßig Bilder wie Sie es bisher getan haben. Nur weil etwas neu ist und wohl auch cool bedeutet nicht, dass wir alle haben, um es zu benutzen für alles. Aber die Bilder sind statisch, und die Idee der Herstellung von etwas dynamisches ist verlockend!

Lassen Sie uns darüber nachdenken linear-gradient für einen moment. Es ist extrem mächtig. Ich meine, diese check-out. Aber können Sie sich vorstellen, wie viel weniger Arbeit es sein würde, die Schaffung von denen geschichteten Muster ohne mehrere Hintergrundbilder? Nicht nur dieses, sondern auch das Graben in den CSS-Paint-API sollte Ihnen auch helfen zu verstehen, wie diese Art von Bildern sind, die während der Laufzeit, das könnte wirklich hilfreich sein (und ist etwas, was wir gerade tun).

Was ist mit conic-Gradienten, die keine browser-Unterstützung noch…ohne polyfill, das ist. Die Nutzung der Paint-API würde ermöglichen es Ihnen, erstellen Sie einen konischen Verlauf und einige Eigenschaften ändern, um es viel die gleiche wie die konkrete Spezifikation. So, in der Realität, würden Sie tatsächlich schaffen werden, Ihre eigene Muttersprache polyfill. Das ist Recht ordentlich!

Denken Sie daran, all dies ist Teil der größeren CSS-Houdini Gruppe von Funktionen. Hier ist ein Zitat aus der CSS-Houdini Wiki:

Das Ziel der CSS-TAG Houdini Task Force (CSS Houdini) ist die gemeinsame Entwicklung von features, die erklären, die “Magie” der Styling und Layout im web.

Hört sich nett an, richtig? Es ist und diese neuen Funktionen richtet sich an die Entwickler erweitern die Funktionalität von CSS selbst, bietet eine bessere Kontrolle, cross-browser-Unterstützung und polyfilling.

Der Normen-Prozess kann eine Weile dauern: vom Vorschlag für eine neue CSS-feature, das schreiben einer Spezifikation, dass die browser-Hersteller implementieren diese neue Spezifikation. Und da Entwickler sind oft begierig, starten Sie mit einem neuen feature so bald wie möglich, haben wir zu berücksichtigen, dass ältere Browser unterstützen möglicherweise nicht und möglicherweise änderungen an der Spezifikation, wenn es noch nicht vollständig umgesetzt wurden — und das ist nicht zu schweigen von den typischen Nuancen von cross-browser-Implementierung. Houdini könnte gehen ziemlich weit, um dabei zu helfen, indem Sie uns erlauben, zu implementieren browser-Funktionalität uns, während wir warten für die Anbieter, um aufzuholen.

Philip Walton hat einen tollen job zu erklären, diese Vorteile von Houdini und mehr in diesem großen Artikel auf Smashing Magazine.

Sie können sehen, wie Ana Tudor hat bereits es verwenden, um das erstellen komplexer Animationen.

Also kann ich es jetzt verwenden?

Sie können! Die CSS-Paint-API wird nur unterstützt, in Chrom-65 an der Zeit zu schreiben, aber hier ist ein support-chart, bleiben im Laufe der Zeit aktualisiert:

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
65 52 Keine Keine Keine Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Keine Keine Keine 67 67 Keine

Aber, es ist noch ein weiter Weg zu gehen.

Egal, lassen Sie uns nehmen einen Blick an, wie wir gehen über die Erstellung des Codes, um es zu verwenden. Ich werde diese brechen in drei Phasen. Es gibt einige neue JavaScript-Funktionen, die wir verwenden werden auf dem Weg, aber der code ist für Sie da und wir gehen durch jeder.

Schritt 1: Der CSS

Zuerst müssen wir die Namen unserer worklet, und rufen Sie es in der CSS. Ich nenne es awesomePattern, also mein CSS-Code würde dann wie folgt Aussehen:

section {
background-image: url(‘fallback.png’);
hintergrund-Bild: Farbe(awesomePattern);
};

Wir sind alle eingerichtet, aber nichts wird passieren, noch nicht.

Schritt 2: Der JavaScript

Jetzt müssen wir hinzufügen, unsere Farbe worklet zu unserer Haupt-JavaScript, das beim laden einer anderen JavaScript-Datei, etwa so:

CSS.paintWorklet.addModule(‘patternWorklet.js’);

Noch, nichts geschehen wird, an diesem Punkt, weil es in unserer patternWorklet.js Datei, wo alle Arbeit wird getan werden.

In patternWorklet.js müssen wir registrieren eine Farbe worklet-Klasse:

registerPaint(‘awesomePattern’, Form);

So nennen wir die registerPaint () – Funktion und übergeben, was wir wollen nennen, das malen, worklet, in diesem Fall awesomePattern, und dann eine Referenz auf die Klasse, die wir schreiben, in diesem Fall die Form. Vergessen Sie nicht, dieses nach der Klasse wir sind dabei, zu definieren, weiter. Im Gegensatz zu der Funktion hochziehen in JavaScript, müssen Sie Klassen definieren, bevor Sie Sie verwenden können.

Als Nächstes gehen wir die ECMAScript2015 Klassen-syntax zu schreiben eine Klasse, die zu ziehen ist der hintergrund für uns. Denn es ist nun registriert als eine Farbe worklet-Klasse, bekommen wir einige Dinge für Sie kostenfrei.

class Form {
Farbe(ctx, geom, Eigenschaften) {

ctx.strokeStyle = ‘white’;
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc( 200, 200, 50, 0, 2*Math.PI);
ctx.stroke();
ctx.closePath();

}
}

In der paint callback, wir haben ctx, geometrie und Eigenschaften. ctx ist das gleiche wie ein 2D-Kontext würde man von einem <canvas> – element. (Na ja, fast: ein <canvas> – element ermöglicht die Fähigkeit zu Lesen wieder die pixel-Daten, in der Erwägung, dass kann man nicht mit der CSS-Paint-API.) Es erlaubt uns, uns alle nutzen die gleichen Methoden zu zeichnen, als würden wir auf Leinwand. In dem Beispiel oben, ich bin einfach zeichnen Sie einen Kreis mit der arc-Funktion.

Die ersten beiden Werte der arc-Funktion werden die X-und Y-Koordinaten, an denen der Kreis positioniert ist, in Pixel von der linken oberen Ecke des Elements. Aber ich möchte, dass der Kreis im Mittelpunkt und das ist, wo die geometrie-Daten kommt in handliches. Es ist tatsächlich vorbei zurück PaintSize, die die Größe der Fläche, dem Bild würde normalerweise füllen und können wir auf die Breite und Höhe Informationen, was genau das ist, was ich brauche, um den Kreis im Zentrum:

Finden Sie den Stift Einfach Kreis: CSS-Farbe-API-Beispiel von Rumyra (@Rumyra) auf CodePen.

Toll, aber das ist ein ziemlich einfaches Beispiel. Wechseln wir aus dem Kreis für etwas ein wenig mehr awesome:

Finden Sie den Stift Einfach Kreis: CSS-Farbe-API-Beispiel von Rumyra (@Rumyra) auf CodePen.

Hier, ich habe eine Methode der Klasse aufgerufen drawStar und es gibt eine ganze Reihe von canvas-Funktionen geht es, zeichnen die CSS-Tricks-logo.”

Schritt Drei: Benutzerdefinierte Eigenschaften

Wir können mehr tun! Wir nutzen die macht von CSS custom properties (aka Variablen). Wir haben alle waren wirklich begeistert von Ihnen, und dies ist einer der Gründe, warum.

Lassen Sie uns sagen, ich will in der Lage sein, ändern Sie die Größe oder die Farbe unserer CSS-Tricks-logo? Auch wir können diese Parameter als benutzerdefinierte Eigenschaften in unsere CSS und greifen Sie mit dem Dritten Stück-callback-Daten, Eigenschaften.

Fügen wir ein-Sterne-Skala-Eigenschaft, um unsere CSS -, die schließlich machen unsere logo größer und kleiner, und ein-Sterne-color-Eigenschaft die Farbe leicht ändern Sie das logo direkt in die CSS.

section {
–star-Skala: 2;
–Sterne-color: hsla(200, 50%, 50%, 1);
hintergrund-Bild: Farbe(awesomePattern)
};

Zurück in unsere Farbe worklet-Klasse, wir benötigen für den Zugriff auf benutzerdefinierte Eigenschaften. Wir tun dies mit der inputProperties Methode, die uns Zugang zu allen CSS-Eigenschaften und Ihre Werte:

statische get inputProperties() { return [‘–Sterne-Skala’,’–star-Farbe’]; }

Nun, wir können Ihnen den Zugang innerhalb der paint-Methode:

const Anzahl = parseInt(properties.get(‘–shape-size’).toString());

…und verwenden Sie diesen Wert in unserem code. Also, wenn wir ändern Sie entweder die –Sterne-Skala oder –start-color-Eigenschaften in CSS, es wird aktualisieren Sie den hintergrund!

Es ist auch erwähnenswert, dass alle Ihre üblichen CSS-hintergrund-Eigenschaften funktionieren, wie erwartet, wie background-size und background-repeat. Das ist gut zu wissen und immer noch wirklich nützlich!

Fazit

Das ist ziemlich starke Sache, und nicht nur für benutzerdefinierte Hintergrundbilder. Stellen Sie sich einen halben oder einen doppelten Rahmen auf Ihrem element. Sie könnten in der Regel in das ::before oder ::after pseudo-Elemente, oder vielleicht eine klug durchdachte box-shadow. Gut, könnte man umsetzen, dass (und mehr) mit der CSS-Paint-API und der border-image-Eigenschaft.

Diese API wirklich zusammen zieht eine Menge Coole features, wie worklets, ECMAScript2015 Klassen und Leinwand. Plus, es gibt uns die ganze interaction layer, die kommt mit JavaScript. Sie könnte leicht hinzufügen von Ereignissen zu aktualisieren, die benutzerdefinierten Eigenschaften und somit das Bild an sich, wie dieses Beispiel aus der Surma, die Kabelbäume, die das click-Ereignis zu starten, aktualisieren der Eigenschaften innerhalb einer requestAnimationFrame-Funktion, um eine animation erstellen jedes mal, wenn der Benutzer klickt auf eine Schaltfläche. Es hat sogar die Koordinaten des Klicks in Rechnung.

Dies mag ein wenig gewunden auf dem Gesicht, aber lassen Sie uns nehmen einen Blick an einigen der anderen Teile der Houdini-suite sind wir über die Begegnung:

  • Die CSS-Layout-API, die sollte es uns ermöglichen, etwas zu tun, wie Darstellung: layout(‘myCustomLayout’), für welche das typische Beispiel wäre ein custom-Mauerwerk Typ layout, aber der Umfang ist viel mehr.
  • Die CSS-Eigenschaften und Werte-API, die ermöglicht uns die Angabe von Typen für benutzerdefinierte Eigenschaften.
  • Die CSS-Animation Worklet-API, die animation dauert die Bearbeitung von der Haupt-thread, das sollte im Ergebnis eine seidig glatte Animationen.

Also, unabhängig davon, ob Sie wirklich Interesse an diesem bestimmten neuen Funktion oder nicht, es ist Teil einer ganzen Reihe von neuen Technologien, die entsperren eine große macht. Watch this space, denn CSS ist etwa, um noch mehr awesome!