Innhold
- Hvorfor trenger du CSS Houdini
- Støtte for CSS Houdini
- Hva er Paint API?
- Hva gjør Typed OM?
- API for egenskaper og verdier: Legg til typer til egendefinerte egenskaper
- Forbedre ytelsen med Layout API
CSS Houdini får navnet sitt fra den verdensberømte Harry Houdini. Hvorfor? En gruppe utviklere - fra kjente organisasjoner som Apple og Google og CSS Working Group - ønsket å avmystifisere magien til CSS og få bedre kontroll over gjengivelse av nettsteder. Så de dannet CSS Houdini Task Force.
CSS Houdini: Hurtigkoblinger- Hvorfor du trenger CSS Houdini
- Støtte for CSS Houdini
- Hva er Paint API?
- Hva gjør Typed OM?
- Egenskaper og verdier API
- Forbedre ytelsen med Layout API
Men hva er egentlig CSS Houdini? Det er et sett med API-er på lavt nivå som gir utviklere muligheten til å utvide CSS ved å ta kontroll over stylings- og layoutprosessene i en nettleser. Det gir direkte tilgang til CSS Object Model (et sett med APIer som tillater manipulering av CSS fra JavaScript) og lar brukerne lese og endre CSS-stil dynamisk, dvs. med JavaScript.
Houdini støttes for øyeblikket bare delvis, så er det på et veldig tidlig stadium av adopsjonen. Mens du venter på mer støtte (snakk om støtte, sørg for at webhotelltjenesten gir deg det du trenger), hvorfor ikke prøve denne samlingen av CSS-animasjonsteknikker som definitivt vil fungere.
Vil du bygge et nettsted med lite kodingskunnskap? Du trenger en nettstedbygger. Og hvis du har mye design eller mediefiler å stash bort, velg den mest pålitelige skylagringen rundt.
Hvorfor trenger du CSS Houdini
Nettlesere er veldig flinke til å abstrakte komplekse stylingoppgaver borte fra utviklere. Den vil dele avsnitt av tekst på til separate linjer uten å bli fortalt. Elementene kan dimensjoneres og plasseres ved siden av hverandre automatisk ved å bruke et par egenskaper og la gjengemotoren håndtere resten. Hver gang siden oppdateres, vil nettleseren ta HTML, CSS og JavaScript og konvertere dem til piksler på skjermen i en prosess som kalles 'rendering pipeline'.
For det første leser nettleseren gjennom innholdet og bygger en struktur kjent som en gjengi treet, som deretter brukes til å beregne hvor ting skal vises på siden i en layout steg. Derfra gjør det de til piksler i et trinn som kalles maleri. Med alle elementene malt, stikker den dem sammen til en side i en prosess som heter komponering. For å forbedre ytelsen til et nettsted, bør vi alltid fokusere på å optimalisere den kritiske gjengivelsesbanen.
Hvis vi ønsker en visuell effekt på et nettsted som nettleseren ikke støtter naturlig, må vi i stedet legge til JavaScript og HTML med polyfills. Dette gjør gjentatte endringer nær starten av rørledningen, noe som resulterer i dårlig ytelse.
Målet med Houdini er å åpne opp CSS og la utviklere bruke disse polyfyllene lenger langs rørledningen og øke hastigheten. De åpner også for nye muligheter for å skape effekter som ikke tidligere var mulige. Selv om ikke alle nettsteder vil bruke disse nye API-ene direkte, gir de rammer og biblioteker muligheten til å utjevne inkonsekvenser i nettleseren.
Støtte for CSS Houdini
API-ene har blitt jobbet med de siste årene, og hver av dem er utviklet i fellesskap av alle medlemmer av Houdini-taskforce. Alle API-ene følger den strenge W3C-standardiseringsprosessen.
Hvis det oppnås nok konsensus, opprettes en første utkastsspesifikasjon kjent som et 'arbeidsutkast'. Derfra blir det raffinert ytterligere før det når 'kandidatanbefalingsnivå'.
En spesifikasjon som er merket som en kandidatanbefaling, kan begynne å samle tilbakemeldinger fra implementører - i dette tilfellet nettleserleverandører. Det er her vi begynner å se bredere nettleserstøtte. Herfra går den til 'anbefalt anbefaling' og deretter 'W3C anbefaling', der den begynner å oppnå full nettleserstøtte.
For tiden er forløperen Paint API som er på kandidatanbefalingsnivå. De Chromium-baserte nettleserne Chrome, Opera og Samsung Internet støtter det hele, mens Firefox og Safari jobber med implementeringen. Typet OM er nært beslektet, og som et resultat støtter de samme nettleserne dette også.
Chrome går foran med de andre API-ene. For å leke med Layout API, animasjonsarbeidsplattformer eller Properties and Values API, må du bruke Chrome Canary med 'Experimental Web Platform features' -flagget aktivert. Disse er fortsatt under aktiv utvikling og kan endres når som helst.
Hva er Paint API?
Det nest siste trinnet i gjengivelsesrørledningen er malingsfasen. På dette tidspunktet vet nettleseren nøyaktig innholdet som skal vises, men ikke hvordan det ser ut. Gjengivelsesmotoren vil se på stilene som brukes på hvert element og justere instruksjonene i samsvar med dette.
Mens noen stiler er ganske greie, lar andre kjøre funksjoner som bestemmer utseendet. For eksempel bakgrunn kan ta mange funksjoner, som inkluderer url () for bilder, rgb () for farger og lineær gradient () for en gradienteffekt.
#target {bakgrunn: maling (min-effekt);}
Paint API lar oss definere vår egen malingsfunksjon, som fungerer på samme måte. Alle funksjoner skaper et bilde som motoren kan bruke, avhengig av eiendommen den brukes mot.
klasse MyWorklet {maling (ctx, størrelse, stil) {}}
Det eneste kravet i et malingsarbeidsarbeid er en enkelt maling metode. Her gir vi et sett med instruksjoner som en nettleser kan følge når den trenger å male elementet på nytt. Det kalles med noen få argumenter som gir metoden litt nyttig info.
Det første argumentet er en sammenheng, som gir et rom vi kan trekke på. Det fungerer i likhet med konteksten som brukes når du trekker videre lerret> elementer, ved å bruke instruksjoner som flytte til og fillRect for å begynne å bygge opp bildet som CSS kan bruke.
Det er noen forskjeller mellom denne konteksten og den som brukes til lerret> elementer. For eksempel er det ingen bildedata eller tekstmetoder tilgjengelig av sikkerhets- og ytelsesmessige årsaker, men det er mulig at de vil vises i senere revisjoner til spesifikasjonen.
Det andre argumentet inneholder dimensjonene til det malbare området det trenger å lage. Vanligvis er dette bredden og høyden på målelementet inkludert polstring. Vi kan bruke denne informasjonen for å sikre at vi trekker inn i konteksten på rett sted.
Vi kan også be om et sett med andre stilegenskaper. For eksempel kan det være lurt å endre fargen på bakgrunnen for å utfylle tekstfargen. Dette gjøres gjennom en getter i arbeidsboken.
statisk get inputProperties () {return ["color", "--custom-property"]; }
De inputProperties verdi er en matrise med alle egenskapene arbeidsgleden er interessert i.Dette kan omfatte egendefinerte egenskaper som gir ytterligere tilpasning. Disse verdiene sendes inn som det tredje argumentet til malingsmetoden som stilobjekter fra Properties and Values API.
Det er et fjerde argument som kan brukes til å få tilgang til argumenter levert til malingsfunksjonen i CSS. Dette muliggjør konfigurasjon på definisjonspunktet, for eksempel fargene som skal brukes i en gradient. Dette jobber seg gjennom spesifikasjonsprosessen og er ikke klar til bruk ennå.
registerPaint ("my-effect", MyWorklet);
Arbeidsområdet må registreres i nettleseren for at det skal hentes i CSS. De registrer Maling metoden tar navnet vi bruker for å referere til det og selve arbeidsdelen.
CSS.paintWorklet.addModule ("min-worklet.js");
Til slutt, for å koble JavaScript til CSS, må nettleseren laste ned arbeidsletten. Ved å levere stien, håndterer nettleseren resten av prosessen for oss.
Hva gjør Typed OM?
CSS Object Model (CSSOM) har vært en del av JavaScript i lang tid. Det lar oss trekke ut den beregnede stilen til et element som leser det stil eiendom eller ved å bruke getComputedStyle. Førstnevnte returnerer stiler som brukes direkte på det elementet, mens sistnevnte inkluderer alle stiler inkludert arvelige.
document.body.style.fontSize // “2rem” window.getComputedStyle (document.body) .fontSize // “32px”
Verdien de returnerer er alltid en streng uavhengig av hva som ble levert opprinnelig. Dette gjør at justering av disse verdiene er buggy og ineffektiv for oss så vel som nettleseren, da den trenger å konvertere frem og tilbake mellom et tall og en streng hele tiden.
document.body.fontSize + = “1rem”; // “2rem1rem”, ikke “3rem”
Typed OM fungerer som CSSOM, men gir også typer for verdiene. Det er to nye måter å få tilgang til dem - attributtStyleMap fungerer som stil eiendom, med computedStyleMap som getComputedStyle.
document.body.attributeStyleMap.get ("font-size") document.body.computedStyleMap (). get ("font-size")
Disse returnerer begge et CSSUnitValue-objekt, som inneholder verdien og enheten som separate egenskaper klare til å bli lest og oppdatert.
Disse objektene kan også opprettes og brukes direkte til å beregne verdier, omtrent som CSS calc () funksjon gjør.
Typed OM er i stand til mye mer, for eksempel typekonvertering og fastspenning av verdier. Ta en titt på Googles 'Working with the new CSS Typed Object Model' og den offisielle W3C-spesifikasjonen for mer informasjon.
API for egenskaper og verdier: Legg til typer til egendefinerte egenskaper
CSS egendefinerte egenskaper - også kjent som CSS-variabler - la oss definere en verdi ett sted og bruke den andre steder. For eksempel kan vi lage egendefinerte egenskaper for å holde temafarger som elementer lenger nede på siden kan bruke.
Problemet med egendefinerte egenskaper blir tydelig når vi prøver å animere mellom dem. Siden eiendommen kan referere til noe, faller nettleseren tilbake i å behandle den som en streng. Ettersom det ikke er noen måte det vet å animere mellom strengene, hopper det fra den ene til den andre.
Egenskaper og verdier API hjelper ved å tilby typer til egendefinerte egenskaper. Vi kan bruke JavaScript til å registrere en eiendom i nettleseren, som deretter tar seg av resten.
CSS.registerProperty ({name: "--main-color", initialValue: # ecf0f1, inherits: true, syntax: "color>"});
De registerProperty metoden er en ny egenskap på CSS globale objekt. Her definerer vi noen kjennetegn ved egenskapen, for eksempel navnet, en startverdi hvis den ikke er spesifisert og hvorvidt den arver fra elementer høyere oppe.
Den viktige egenskapen er syntaks, som beskriver eiendomstypen. CSS vet allerede hvordan de skal håndtere forskjellige typer data, inkludert tall, vinkler og URL-er. Ved å spesifisere typen kan vi lagre nettleserarbeidet og fortelle hva verdiene våre er.
Forbedre ytelsen med Layout API
Alle nettlesere har layoutalgoritmer på plass for å hjelpe til med å plassere innhold. Som standard vil alle elementene være i flytoppsett. I latinske skrifter som engelsk, settes elementene som på linje vil flyte fra venstre til høyre i den innebygde retningen og eventuelle elementer satt som blokkere vil strømme topp til bunn i blokkretningen.
Mens de fungerer bra, får de de fleste nettsteder til å se like ut. For å få et nettsted til å skille seg ut, må vi bruke egenskaper som posisjon: absolutt og beregne forskyvninger manuelt. Et nettsted som Pinterest bruker denne tilnærmingen til å lage sin utforming i murstil, men det kan forårsake ytelsesproblemer på større sider.
Layout API tar sikte på å unngå dette problemet ved å overføre denne logikken til et arbeidsblad. Den kjenner de ønskede dimensjonene til foreldrene og barna og kan instruere gjengiveren nøyaktig hvor den vil ha dem.
class MyLayout {static get inputProperties () {return []} async layout (barn, kanter, begrensninger, styleMap) {}} registerLayout ("my-layout", MyLayout);
Hver arbeidsplass krever en oppsett metoden, som kjører hver gang den trenger å beregne oppsettet på nytt. Det må også være asynkront, ettersom innholdet inne kan pauses eller flyttes til en separat tråd når som helst. Det første argumentet er en rekke barn med stilene som brukes på dem.
Den andre inneholder ramme, polstring og rullefeltstørrelse kjent som elementets kanter. Den tredje definerer resten av det brukbare rommet som kalles begrensninger. Det endelige argumentet beskriver eiendommene som blir bedt om fra inputProperties ligner på Paint API.
child.layoutNextFragment ({fixedInlineSize: 200})
All denne informasjonen brukes til å generere kalt posisjonsinstruksjoner fragmenter. De layoutNextFragment metoden tar informasjon om barnet, for eksempel ønsket inline og blokkstørrelse, og rendereren tar seg av resten. Resultatet er et sett med fragmenter som nettleseren kan male.
body {display: layout (my-layout);}
På CSS-siden er oppsettet definert som alle andre. Oppsettfunksjonen tar navnet som ble oppgitt når du registrerer arbeidslyset. Selv om alternativet er åpent for alle, er det lite sannsynlig at de fleste trenger å lage layout-arbeidsplasser for hvert nettsted. Arbeidsplasser kan deles og inkluderes på et nettsted uten å vite om den underliggende algoritmen. Dette API er mer sannsynlig å bli brukt som en måte å polyfylle fremtidige layout-systemer.
Dette innholdet dukket opprinnelig opp i nettmagasinet.
- 8 HTML-koder du må bruke (og 5 for å unngå)
- 6 trinn for å skrive bedre CSS
- 13 av de beste JavaScript-rammene å prøve
