CSS Maling API

0
19

CSS Maling API er ekstremt spennende, ikke bare for hva det er, men hva den representerer, som er begynnelsen på en svært spennende tid for CSS. La oss gå gjennom hva det er, hvorfor vi har det og hvordan du kan begynne å bruke det.

Hva er CSS Maling API?

API-et er bare en del av en hel pakke med nye spesifikasjoner for alle under paraplyen av det som er kjent som CSS Houdini. Houdini, i hovedsak gir utviklere lavere nivå tilgang til CSS seg selv. Jeg tuller ikke.

CSS Maling API spesielt som lar deg ringe et male () – funksjonen, hvor du normalt ville skrive en verdi hvor et bilde som er forventet. Et vanlig eksempel er bakgrunnen-bilde eiendel, hvor du kan bruke url-adressen () – funksjonen til en link til en bildefil, som dette:

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

CSS Maling API gir deg mulighet til å ringe male () – funksjonen i stedet, og pass i en maling worklet at du har definert gjennom JavaScript. Tenk som en bit av kode som tillater deg å programmatisk draw (ganske mye) uansett hva du liker. Og fordi det er JavaScript, kan du gjøre det dynamiske, også. API-et i seg selv er veldig mye som HTML5 <lerret> API (og vi får til hvordan det fungerer i et minutt).

Dette høres kult, men komplisert. Jeg er allerede glad for bruk av vanlige bilder…

Det er flott! Det er absolutt ingenting galt med å bruke vanlige bilder som du har gjort. Bare fordi noe er nytt, og sannsynligvis kule betyr ikke at vi alle har til å begynne å bruke det for alt. Men bilder er statisk og ideen om å skape noe dynamisk er fristende!

La oss tenke på linear-gradient for et øyeblikk. Det er ekstremt kraftig. Jeg mener, sjekk disse ut. Men, kan du forestille deg hvor mye mindre arbeid det ville være å skape de lagdelte mønstre uten flere bakgrunnsbilder? Ikke bare dette, men å grave i til CSS Maling API bør også hjelpe deg å forstå hvordan disse slags bilder som er generert under kjøring, noe som kan være veldig nyttig (og er noe vi er i ferd med å gjøre).

Hva om ikpsoniske-gradient som har ingen nettleser støtter likevel…uten en polyfill, som er. Utnytte Maling API ville tillate deg å lage en ikpsoniske gradient og noen egenskaper til å endre det mye det samme som den faktiske spesifikasjon. Så, i virkeligheten, ville du faktisk lage din egen native polyfill. Det er ganske ryddig!

Husk, dette er alle en del av den større CSS Houdini gruppe av funksjoner. Her er et sitat fra CSS Houdini Wiki:

Målet med CSS-KODEN Houdini Task Force (CSS Houdini) er i fellesskap å utvikle funksjoner som forklarer den “magiske” av Styling og Layout på web.

Høres fint ut, ikke sant? Det er og disse nye funksjonene er rettet mot å tillate utviklere å utvide funksjonaliteten av CSS seg selv, gir bedre kontroll, cross-browser, støtte og polyfilling.

Standard-prosessen kan ta litt tid: fra å foreslå et nytt CSS-funksjonen til å skrive en spesifikasjon, å ha en nettleser leverandører implementere denne nye spesifikasjonen. Og siden utviklerne er ofte ivrige etter å begynne å bruke en ny funksjon så snart som mulig, må vi vurdere at eldre nettlesere ikke støtter det, og muligens noen endringer i spesifikasjonen hvis det ikke har blitt fullt implementert — og det er ikke å nevne den typiske nyanser av kryss-nettleser gjennomføring. Houdini kunne gå ganske en måte å hjelpe til med det, ved å tillate oss å gjennomføre nettleser funksjonalitet oss selv mens vi venter for leverandører til å fange opp.

Philip Walton gjør en god jobb med å forklare disse fordeler av Houdini og mer i denne flotte artikkelen på Smashing Magazine.

Du kan se hvordan Ana Tudor har allerede satt den til å bruke til å lage komplekse animasjoner.

Så, kan jeg bruke den nå?

Du kan! CSS Maling API er bare støttet i Chrome-65 på tidspunktet for skriving, men her er en støtte diagram som vil holde seg oppdatert over tid:

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
65 52 Ingen Ingen Ingen Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Ingen Ingen Ingen 67 67 Ingen

Men, det er fortsatt et stykke å gå.

Uansett, la oss ta en titt på hvordan vi går om å opprette koden for å bruke det. Jeg kommer til å bryte dette ned til tre nivåer. Det er noen nye JavaScript-funksjoner vi kommer til å bruke underveis, men koden er der for deg, og vi vil gå gjennom hvert.

Trinn 1: CSS

For det første må vi navnet vårt worklet og kaller det i CSS. Jeg kommer til å kalle det awesomePattern, så min CSS ville se noe som dette:

section {
background-image: url(’tilbakefall.png’);
background-image: maling(awesomePattern);
};

Vi er alle satt opp, men ingenting kommer til å skje ennå.

Trinn 2: JavaScript

Nå, vi må legge våre maling worklet til våre viktigste JavaScript, som er lasting annen JavaScript-fil som så:

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

Likevel, ingenting vil skje på dette punkt, fordi det er i vår patternWorklet.js fil, der alt arbeidet kommer til å bli gjort.

I patternWorklet.js vi trenger å registrere en maling worklet klasse:

registerPaint(‘awesomePattern’, Form);

Så vi kaller den registerPaint () – funksjonen, og pass på hva vi ønsker å kalle maling worklet, i dette tilfellet awesomePattern, og deretter en referanse til klassen vi er i ferd med å skrive, i dette tilfellet Form. Husk å legge dette etter den klassen vi er i ferd med å definere neste. I motsetning til funksjon løfting i JavaScript, du trenger for å definere klasser før du kan bruke dem.

Neste, vi kommer til å bruke ECMAScript2015 klasser syntaksen for å skrive en klasse som vil trekke våre bakgrunnen for oss. Fordi det er nå registrert som en maling worklet klasse, får vi noen ting for gratis.

klasse Formen {
maling(ctx, geom, egenskaper) {

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

}
}

I male-tilbakeringing, vi har ctx, geom og egenskaper. ctx er det samme som en 2D-sammenheng ville vi få fra en <lerret> – element. (Vel, nesten: a <lerret> – element gjør at evnen til å lese tilbake pixel data, mens du ikke kan med CSS Maling API.) Det tillater oss å bruke alle de samme metodene til å tegne som vi ville gjort hvis vi var på lerret. I eksempelet ovenfor, jeg er rett og slett tegne en sirkel med arc-funksjon.

De to første verdiene i arc-funksjonen er X-og Y-koordinater for hvor sirkelen er plassert i piksler fra toppen til venstre for elementet. Men, jeg ønsker sirkel for å være sentrale og dette er hvor geom data kommer i hendig. Det er faktisk passerer tilbake PaintSize, som er størrelsen på området som bildet normalt vil fylle, og vi kan få tilgang til bredde og høyde informasjon, som er nøyaktig hva jeg trenger å gjøre sirkelen sentrale:

Se Penn Enkel Sirkel: CSS Maling API Eksempel ved Rumyra (@Rumyra) på CodePen.

Flott, men dette er et ganske enkelt eksempel. La oss bytte ut sirkelen for noe litt mer awesome:

Se Penn Enkel Sirkel: CSS Maling API Eksempel ved Rumyra (@Rumyra) på CodePen.

Her har jeg lagt en metode for å klassen kalles drawStar og det er en hel haug av lerret funksjoner kommer på det, som trekker CSS-Triks logo.”

Trinn Tre: Egendefinerte Egenskaper

Kan vi gjøre enda mer! Vi kan utnytte kraften av CSS egendefinerte egenskaper (aka variabler). Vi har alle vært veldig begeistret for dem, og dette er en av grunnene.

La oss si at jeg ønsker å være i stand til å endre størrelse eller farge av vår CSS-Triks logo? Godt vi kan sette disse parametrene som egendefinerte egenskaper i våre CSS og få tilgang til dem med det tredje stykke innb. data egenskaper.

La oss legge til en en-stjerners-skala eiendom til våre CSS, som til slutt vil gjøre vår logo større og mindre, og en-stjerners-color eiendom enkelt å endre fargen på logoen direkte i CSS.

section {
–stjerners-skala: 2;
–stjerners-color: hsla(200, 50%, 50%, 1);
background-image: maling(awesomePattern)
};

Tilbake i vår maling worklet klasse, vi trenger å få tilgang til disse egendefinerte egenskaper. Vi gjør dette med inputProperties-metoden, som gir oss tilgang til alle CSS-egenskaper og deres gitte verdier:

statisk få inputProperties() { return [‘–stjerners-skala’,’–stjerners-farge’]; }

Nå, vi kan få tilgang til dem i paint-metoden:

const size = parseInt(egenskaper.få(‘–form-størrelse’).toString());

…og bruke som verdi i vår kode. Så, hvis vi endrer enten –stjerners-skala eller –start-farge egenskaper innen ut CSS, det vil oppdatere bakgrunnen!

Det er også verdt å merke seg at alle dine vanlige CSS bakgrunn egenskaper fungerer som forventet, slik som bakgrunn-størrelse og background-repeat. Som er bra å vite og som fortsatt veldig nyttig!

Konklusjon

Dette er ganske kraftige ting, og ikke bare for tilpassede bakgrunnsbilder. Tenk deg en halv eller en dobbel kant på elementet. Du kan normalt bruke ::før eller ::etter pseudo-elementer, eller kanskje en smart tenkt ut box-shadow. Vel, du kan implementere det (og mer) med CSS Maling API og grensen-bilde eiendom.

Dette API-et virkelig trekker det sammen en rekke kule funksjoner, som worklets, ECMAScript2015 klasser og lerret. Plus, det gir oss den hele samhandling lag som kommer med JavaScript. Du kan enkelt legge til hendelser for å oppdatere egendefinerte egenskaper og dermed selve bildet, som dette eksempelet fra Surma, som utnytter klikk på arrangementet for å starte oppdatering av eiendommer i et requestAnimationFrame-funksjonen for å lage en animasjon hver gang brukeren klikker på en knapp. Det selv tar koordinatene til den klikker deg inn på kontoen din.

Dette kan virke litt convoluted på forsiden av det, men la oss ta en titt på noen av de andre delene av Houdini suite-vi er i ferd med å oppstå:

  • CSS-Layout API, som skal gi oss mulighet til å gjøre noe som viser: layout(‘myCustomLayout’), som typisk eksempel vil være en tilpasset mur type layout, men omfanget er mye mer til det.
  • CSS-Egenskaper og Verdier API som gjør det mulig for oss å angi datatyper for egendefinerte egenskaper.
  • CSS-Animasjon Worklet API, som tar animasjon behandling fra main-tråden, som skulle resultere i silkemyk animasjoner.

Så, uansett om du virkelig er interessert i denne konkrete ny funksjon eller ikke, det er en del av en hel haug av ny teknologi som vil låse opp en god del strøm. Følg med her fordi CSS er i ferd med å bli enda mer awesome!