CSS Måla API

0
38

CSS Måla API är oerhört spännande, inte bara för vad det är, men vad det står för, som är i början av en mycket spännande tid för CSS. Låt oss gå igenom vad det är, varför vi har det och hur du börjar använda det.

Vad är CSS Måla API?

API är bara en del av en hel serie av nya specifikationer för alla inom ramen för vad som kallas CSS Houdini. Houdini, i huvudsak, ger utvecklare lägre nivå tillgång till CSS själv. Jag skojar inte.

CSS Måla API specifikt tillåter dig att ringa en paint () – funktionen där du normalt skulle skriva ett värde där en bild är förväntat. Ett vanligt exempel är bakgrunden-bild egendom, där du kan använda den url: en () – funktionen för att en länk till en bild, så här:

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

CSS Måla API kan du ringa paint () – funktionen istället och passera i en färg som worklet som man har definierat via JavaScript. Tänk så lite kod som gör att du kan programmässigt rita (ganska mycket) vad du vill. Och eftersom det är JavaScript, kan du göra det dynamiska, också. API i sig är mycket som HTML5 <canvas> – API (och vi ska komma till hur det fungerar på en minut).

Detta låter häftigt, men komplicerat. Jag är redan nöjd med vanliga bilder…

Det är bra! Det är absolut inget fel med att använda vanliga bilder som du har gjort. Bara för att något är nytt och förmodligen cool betyder inte att vi alla måste börja använda det till allt. Men bilder är statiska och tanken på att skapa något dynamiskt är lockande!

Låt oss tänka på linear-gradient för en stund. Det är extremt kraftfull. Jag menar, kolla här. Men, kan ni föreställa er hur mycket mindre arbete det skulle vara att skapa dessa lager mönster utan flera bakgrundsbilder? Inte bara detta, men att gräva i den CSS Måla API bör också hjälpa dig att förstå hur dessa typ av bilder som skapas under körning, vilket kan vara riktigt bra (och är något vi är på väg att göra).

Vad sägs om kon-gradient som inte har en webbläsare som stöder ännu…utan en polyfill, som är. Utnyttja Färg API skulle tillåta dig att skapa en konisk gradient och vissa egenskaper för att ändra det till stor del samma som den faktiska specifikation. Så, i verkligheten, du skulle faktiskt vara att skapa din egen native polyfill. Det är ganska snyggt!

Kom ihåg, detta är en del av den större CSS Houdini grupp av funktioner. Här är ett citat från CSS-Houdini Wiki:

Målet med CSS-TAGGEN Houdini Task Force (CSS Houdini) är att gemensamt utveckla funktioner för att förklara den “magiska” av design och Layout på webben.

Låter fint, eller hur? Det är i och med dessa nya funktioner som syftar till att låta utvecklare att utöka funktionerna i CSS sig själv, vilket ger bättre kontroll, cross-browser stödja och polyfilling.

De standarder processen kan ta ett tag: från att föreslå en ny CSS-funktionen för att skriva en specifikation, att ha webbläsaren leverantörer för att genomföra denna nya specifikationen. Och eftersom utvecklarna är ofta ivriga att börja använda en ny funktion så snart som möjligt, vi måste tänka på att äldre webbläsare inte stöder det, och eventuellt några ändringar i specifikationen om det inte har genomförts fullt ut — och det är inte att nämna den typiska nyanser av cross-browser genomförande. Houdini kunde gå en bra bit för att hjälpa till med det genom att låta oss genomföra webbläsaren för funktionaliteten oss själva medan vi väntar på leverantörer för att fånga upp.

Philip Walton gör ett bra jobb med att förklara fördelarna med Houdini och mer i denna fantastiska artikel på Smashing Magazine.

Du kan se hur Ana Tudor har redan lagt det att använda för att skapa komplexa animationer.

Så, kan jag använda den nu?

Kan du! CSS Måla API stöds endast i Chrome 65 i skrivande stund, men här är en support-diagrammet som kommer att hålla dig uppdaterad över tid:

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
65 52 Inga Inga Inga Inga

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Inga Inga Inga 67 67 Inga

Men, det är fortfarande en bit att gå.

Oavsett, låt oss ta en titt på hur vi ska gå tillväga för att skapa koden för att använda det. Jag kommer att bryta ner det i tre faser. Det finns några nya JavaScript-funktioner som vi kommer att använda längs vägen, men koden är där för dig och vi kommer att gå igenom alla.

Steg 1: CSS

Först måste vi nämna vårt worklet och kallar det i CSS. Jag kommer att kalla det awesomePattern, så min CSS skulle se ut ungefär så här:

avsnitt {
background-image: url(‘återgång.png”);
background-image: färg(awesomePattern);
};

Vi är alla set-up, men inget kommer att hända ännu.

Steg 2: JavaScript

Nu måste vi lägga till vår måla worklet till våra viktigaste JavaScript, som laddar en annan JavaScript-fil som så:

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

Fortfarande, inget kommer att hända på denna punkt eftersom det är inom vår patternWorklet.js arkiv, där allt arbete kommer att ske.

I patternWorklet.js vi måste registrera en färg worklet klass:

registerPaint(‘awesomePattern’, Form);

Så vi kallar den registerPaint () – funktionen och förmedla vad vi vill kalla färgen worklet, i detta fall awesomePattern, och sedan en hänvisning till den klass vi är på väg att skriva, i det här fallet Form. Kom ihåg att lägga till detta efter den klass vi är på väg att definiera nästa. Till skillnad från funktionen hissa i JavaScript, du behöver för att definiera klasserna innan du kan använda dem.

Nästa vi kommer att använda ECMAScript2015 klasser syntax för att skriva en klass som kommer att dra vår bakgrund för oss. Eftersom det är nu registrerad som en färg worklet klass, får vi några saker gratis.

class Shape {
färg(ctx, geom, egenskaper) {

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

}
}

I färgen återuppringning, vi har ctx, geom och egenskaper. ctx är samma som en 2D-sammanhang vi skulle få från en <canvas> – elementet. (Ja, nästan: <canvas> – elementet gör att förmågan att läsa tillbaka pixel data, medan du inte kan med CSS Måla API.) Det tillåter oss att använda samma metoder för att dra så vi skulle göra om vi var på duk. I exemplet ovan, jag är helt enkelt att rita en cirkel med arc-funktion.

De två första värdena för arc-funktionen är X-och Y-koordinater där cirkeln är placerad i pixlar från överst till vänster på elementet. Men, jag skulle vilja cirkeln för att vara central och det är där geom data kommer väl till pass. Det är faktiskt tillbaka PaintSize, vilket är storleken på det område som bilden normalt skulle fylla och vi kan få tillgång till bredd och höjd information, vilket är exakt vad jag behöver för att göra cirkeln central:

Se Pennan Enkel Cirkel: CSS Måla API Exempel genom att Rumyra (@Rumyra) på CodePen.

Bra, men detta är ett ganska enkelt exempel. Låt oss byta ut cirkeln för något lite mer awesome:

Se Pennan Enkel Cirkel: CSS Måla API Exempel genom att Rumyra (@Rumyra) på CodePen.

Här har jag lagt till en metod för att den klass som kallas drawStar och det finns en hel massa av canvas funktioner kommer på det, att dra CSS-Tricks-logotypen.”

Steg Tre: Anpassade Egenskaper

Vi kan göra mer! Vi kan utnyttja kraften i CSS anpassade egenskaper (aka variabler). Vi har alla varit riktigt upphetsad av dem och detta är en av anledningarna till varför.

Låt oss säga att jag vill att du ska kunna ändra storlek eller färg på vår CSS-Tricks logotyp? Ja, vi kan sätta de parametrar som har anpassade egenskaper i vår CSS och få tillgång till dem med den tredje delen av callback-data, egenskaper.

Låt oss lägga till ett-star-skala egendom till vår CSS, som så småningom kommer att göra vår logotyp större och mindre, och en-star-färg egendom för att enkelt ändra färg på logotypen direkt i CSS.

avsnitt {
– star-skala: 2;
– star-färg: hsla(200, 50%, 50%, 1);
background-image: färg(awesomePattern)
};

Tillbaka i vår måla worklet klass, vi behöver tillgång till de anpassade egenskaper. Vi gör detta med inputProperties metod, som ger oss tillgång till alla CSS-egenskaper och deras givna värden:

statisk få inputProperties() { return [‘–star-skala’,’–star-färg’]; }

Nu kan vi komma åt dem inom paint-metoden:

const size = parseInt(egenskaper.get(‘–form-storlek”).toString());

…och använda det värdet i vår kod. Så, om vi ändrar antingen-star-skala eller –start-färg egenskaper i CSS, det kommer uppdatera bakgrunden!

Det är också värt att notera att alla dina vanliga CSS bakgrund egenskaper för att fungera som förväntat, som bakgrund-storlek och background-repeat. Vilket är bra att veta och som fortfarande riktigt bra!

Slutsats

Detta är ganska kraftfull grejer, och inte bara för egna bakgrundsbilder. Tänk dig en halv eller en dubbel kant på dina element. Du kan normalt använda ::före eller ::after pseudo-element, eller kanske en skickligt uttänkt box-shadow. Tja, du skulle kunna genomföra detta (och mer) med CSS Måla API och border-image egendom.

Detta API verkligen drar ihop en hel del häftiga funktioner, som worklets, ECMAScript2015 klasser och canvas. Plus, det ger oss hela interaktion lager som kommer med JavaScript. Du kan enkelt lägga till evenemang för att uppdatera den egna fastigheter och därmed själva bilden, som detta exempel från Surma, som utnyttjar klicka på händelsen för att börja uppdatera fastigheter inom en requestAnimationFrame funktion för att skapa en animation varje gång användaren klickar på en knapp. Det tar även koordinaterna för den klickar du på konto.

Detta kan tyckas vara en lite invecklad i ansiktet av det, men låt oss ta en titt på några av de andra delarna av Houdini svit vi är på väg att stöta på:

  • CSS-Layout-API som tillåter oss att göra något som display: layout(‘myCustomLayout’), som typiskt exempel skulle kunna vara en egen murverk typ layout, men omfattningen är mycket mer.
  • CSS-Egenskaper och Värden API som tillåter oss att specificera typer av anpassade egenskaper.
  • CSS-Animation Worklet API, som tar animation bearbetning från den röda tråden, vilket bör resultera i silkeslena animationer.

Så, oavsett om du är verkligen intresserad av detta specifika ny funktion eller inte, det är en del av en hel massa av ny teknik som kommer att låsa upp en stor del av makten. Titta på detta utrymme eftersom CSS är på väg att bli ännu mer awesome!