De CSS Verf API

0
17

De CSS Verf API is zeer spannend, niet alleen voor wat het is, maar wat het voorstelt, dat is het begin van een heel spannende tijd voor CSS. Laten we het even hebben over wat het is, waarom hebben we het en hoe gaan gebruiken.

Wat is de CSS Verf API?

De API is slechts één onderdeel van een hele reeks nieuwe specificaties van alle onder de paraplu van wat bekend staat als CSS Houdini. Houdini, in essentie, geeft de ontwikkelaars lager niveau toegang tot de CSS zelf. Geen grapje.

De CSS Verf API specifiek kunt u bellen met een paint() functie waar je normaal gesproken een waarde invult waar een beeld wordt verwacht. Een bekend voorbeeld is de background-image eigenschap, waar u mogelijk gebruik maken van de url() functie om een link naar een image-bestand, als volgt:

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

De CSS-Verf-API kunt u bellen met de verf() functie in plaats en pas in de verf worklet die u hebt gedefinieerd door middel van JavaScript. Denk een beetje van code die u toelaat om programmatisch te trekken (vrij veel) wat je wilt. En omdat het JavaScript, kunt u het dynamische, ook. De API zelf is erg veel lijkt op de HTML5 <canvas> – API (en we krijgen hoe dat werkt in een minuut).

Dit klinkt cool, maar ingewikkeld. Ik ben al blij met reguliere afbeeldingen…

Dat is geweldig! Er is absoluut niets mis met het gebruik van gewone foto ‘ s zoals jullie gedaan hebben. Omdat het iets is nieuw en waarschijnlijk koele betekent niet dat we allemaal moeten gaan gebruiken voor van alles. Echter, de beelden zijn statisch en het idee van het genereren van iets dynamisch is verleidelijk!

Laten we eens nadenken over linear-gradient voor een moment. Het is zeer krachtig. Ik bedoel, vink deze uit. Maar, kun je je voorstellen hoe veel minder werk zou maken van deze gelaagde patronen zonder meerdere achtergrond afbeeldingen? Niet alleen dit, maar graven in de CSS Verf API moet ook u helpen te begrijpen hoe dit soort beelden worden gegenereerd tijdens runtime, die kon echt goed (en is iets wat we aan het doen).

Wat over conic-gradient die heeft geen steun van de browser nog…zonder een polyfill, dat is. Het benutten van de Verf API zou u toestaan om te maken een conisch verloop en een aantal eigenschappen te veranderen vrijwel hetzelfde als de werkelijke specificatie. Dus, in werkelijkheid, zou je eigenlijk het creëren van uw eigen native polyfill. Dat is best netjes!

Vergeet niet, dit is allemaal onderdeel van het grotere CSS Houdini groep van functies. Hier is een citaat van de CSS Houdini Wiki:

De doelstelling van de CSS-TAG Houdini Task Force (CSS Houdini) is om gezamenlijk ontwikkelen van functies die verklaren de “magie” van vormgeving en Lay-out op het web.

Klinkt goed, nietwaar? Het is en deze nieuwe functies zijn gericht op ontwikkelaars om uit te breiden de functionaliteit van CSS zelf, wat een betere controle, cross-browser ondersteuning en polyfilling.

De normen proces kan een tijdje duren: van een voorstel voor een nieuwe CSS-functie, om het schrijven van een specificatie, aan het hebben van de browser leveranciers implementeren van deze nieuwe specificatie. En aangezien ontwikkelaars zijn vaak te popelen om te starten met een nieuwe functie zo spoedig mogelijk, we hebben te overwegen dat oudere browsers kunnen niet ondersteunen en eventuele wijzigingen in de specificaties als deze nog niet volledig ten uitvoer is gelegd — en dat is niet te vergeten de typische, nuances van cross-browser uitvoering. Houdini zou echt een manier om te helpen met dat, door ons toe te implementeren functionaliteit van de browser onszelf terwijl we wachten op verkopers in te halen.

Philip Walton doet een groot werk van het uitleggen van deze voordelen van Houdini en meer in dit geweldige artikel op Smashing Magazine.

U kunt zien hoe Ana Tudor is al te gebruiken voor het maken van complexe animaties.

Dus, kan ik nu gebruiken?

Je kunt! De CSS Verf API wordt alleen ondersteund in Chrome 65 op het moment van schrijven, maar hier is een ondersteuning van de grafiek die de hoogte blijven over tijd:

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
65 52 Geen Geen Geen Geen

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Geen Geen Geen 67 67 Geen

Maar, er is nog een weg te gaan.

Hoe dan ook, laten we eens kijken hoe we het gaan over het maken van de code om deze te gebruiken. Ik ben van plan te breken in drie fasen. Er is een aantal nieuwe JavaScript-functies die we zullen gebruiken langs de weg, maar de code is er voor u en we gaan door elke.

Stap 1: Het CSS

Eerst moeten we de naam van onze worklet en noemen het in de CSS. Ik bel het awesomePattern, dus mijn CSS zou er als volgt uitzien:

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

We zijn al ingesteld, maar niets gaat gebeuren maar toch.

Stap 2: De JavaScript –

Nu, moeten we onze verf worklet onze belangrijkste JavaScript, dat is het laden van een andere JavaScript-bestand als volgt:

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

Nog steeds, zal er niets gebeuren op dit punt, want het is binnen onze patternWorklet.js bestand, waar al het werk zal worden gedaan.

In patternWorklet.js we nodig hebben om te registreren verf worklet klasse:

registerPaint(‘awesomePattern’, Vorm);

We noemen de registerPaint() functie en doorgeven wat we willen noemen is de verf worklet, in dit geval awesomePattern, en dan een verwijzing naar de klas zijn we over te schrijven, in dit geval de Vorm. Vergeet niet om dit toe te voegen na de les zijn we over het definiëren volgende. In tegenstelling tot de functie hijsen in JavaScript nodig om het definiëren van klassen voordat u ze kunt gebruiken.

Vervolgens gaan we gebruik maken van de ECMAScript2015 klassen syntaxis voor het schrijven van een klasse die zal trekken onze achtergrond voor ons. Want het is nu geregistreerd als een verf worklet klasse krijgen we een aantal dingen gratis.

klasse Shape {
verf(ctx, geom, eigenschappen) {

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

}
}

In de verf terugbellen, we hebben ctx, geom en eigenschappen. ctx is hetzelfde als een 2D context we zouden krijgen van een <canvas> element. (Nou ja, bijna: een <canvas> element staat de mogelijkheid om terug lezen pixel data, terwijl je kunt niet met de CSS-Verf-API.) Het stelt ons in staat om alle van dezelfde methoden om te tekenen als we zouden als we waren op het doek. In het bovenstaande voorbeeld, ik ben gewoon het tekenen van een cirkel met de arc-functie.

De eerste twee waarden van de arc-functie worden de X-en Y-coördinaten van de plaats waar de cirkel is geplaatst, in pixels, van de top-links van het element. Maar, ik zou graag de cirkel centraal en dit is waar de geom-gegevens van pas komt. Het is eigenlijk het passeren terug de PaintSize, dat is de grootte van het gebied dat de afbeelding normaal zou vullen en kunnen we toegang krijgen tot de breedte-en hoogte-informatie, en dat is precies wat ik nodig heb om de cirkel centraal:

Zie de Pen Eenvoudige Cirkel: CSS Verf API Bijvoorbeeld door Rumyra (@Rumyra) op CodePen.

Geweldig, maar dit is een vrij eenvoudig voorbeeld. Laat de schakelaar uit de cirkel voor iets een beetje meer awesome:

Zie de Pen Eenvoudige Cirkel: CSS Verf API Bijvoorbeeld door Rumyra (@Rumyra) op CodePen.

Hier heb ik een methode om de klasse met de naam drawStar en er een hele hoop van canvas functies aan de hand is, dat de aandacht van de CSS-Tricks-logo.”

Stap Drie: Aangepaste Eigenschappen

We kunnen meer doen! We kunnen de kracht van CSS aangepaste eigenschappen (ofwel variabelen). We waren echt blij met hen en dit is een van de redenen waarom.

Laten we zeggen dat ik wil in staat zijn om de grootte of de kleur van onze CSS-Tricks-logo? Ook kunnen we de parameters als aangepaste eigenschappen in onze CSS en ze met het derde deel van callback-gegevens, eigenschappen.

Laten we het toevoegen van een –star-schaal woning aan onze CSS, die zal uiteindelijk ons logo groter en kleiner, en een-ster-color eigenschap om gemakkelijk veranderen van de kleur van het logo direct in de CSS.

section {
–star-schaal: 2;
–star-kleur: hsla(200, 50%, 50%, 1);
background-image: verf(awesomePattern)
};

Terug in onze verf worklet klasse, we nodig hebben om toegang te krijgen tot deze aangepaste eigenschappen. Dit doen wij met de inputProperties methode, die geeft ons toegang tot alle CSS-eigenschappen en hun waarden:

statische krijgen inputProperties() { return [‘–star-schaal’,’–star-kleur’]; }

Nu kunnen we de toegang in het kader van de paint-methode:

const size = parseInt(eigenschappen.get(‘–vorm-grootte’).toString());

…en die waarde gebruiken in onze code. Dus, als we het –star-schaal of –start-kleur eigenschappen binnen uit CSS, het bijwerken van de achtergrond!

Het is ook vermeldenswaard dat al uw gebruikelijke CSS eigenschappen achtergrond werkt zoals u verwacht, zoals het op de achtergrond-grootte en achtergrond herhalen. Dat is geweldig om te weten en nog steeds erg handig!

Conclusie

Dit is erg krachtig spul, en niet alleen voor een aangepaste achtergrondafbeeldingen. Stel je voor een halve of een dubbele rand op je element. Je zou normaal gesproken gebruik van de ::vóór of ::after pseudo-elementen, of misschien een slim doordacht box-shadow. Nou, je zou kunnen implementeren dat (en meer) met de CSS-Verf-API en de border-image eigenschap.

Deze API echt samen trekt een heleboel coole functies, zoals worklets, ECMAScript2015 klassen en canvas. Plus, het geeft ons de hele interactie laag die wordt geleverd met JavaScript. Je kan gemakkelijk toevoegen van events aan het bijwerken van de aangepaste eigenschappen en dus ook de afbeelding zelf, zoals dit voorbeeld van de Surma, die maakt gebruik van de klik op de gebeurtenis om te beginnen met updaten eigenschappen binnen een requestAnimationFrame functie voor het maken van een animatie elke keer als de gebruiker klikt op een knop. Het vindt zelfs de coördinaten van de klik in aanmerking.

Dit lijkt misschien een beetje ingewikkeld op het eerste gezicht, maar laten we een kijkje nemen op enkele van de andere delen van de Houdini suite die we gaan tegenkomen:

  • De CSS-Lay-out-API, die ons in staat moet stellen om iets te doen als display: lay-out(‘myCustomLayout’), waarvoor de typisch voorbeeld zou zijn een aangepaste metselwerk type lay-out, maar het bereik is veel meer.
  • De CSS-Eigenschappen en Waarden API die het mogelijk maakt ons te geven types voor aangepaste eigenschappen.
  • De CSS-Animaties Worklet API, die animatie verwerking van de rode draad, die moet resulteren in een zijdezachte animaties.

Dus, ongeacht of u bent geïnteresseerd in deze nieuwe functie of niet, het is een onderdeel van een hele reeks nieuwe technologie voor het ontsluiten van een groot deel van de macht. Bekijk deze ruimte, omdat CSS is over om nog meer geweldig!