CSS Houdini: Alt hvad du behøver at vide om de hotteste API'er

CSS Houdini
(Billedkredit: Fremtid)

CSS Houdini får sit navn fra den verdensberømte Harry Houdini. Hvorfor? En gruppe udviklere - fra kendte organisationer som Apple og Google og CSS-arbejdsgruppen - ønskede at afmystificere magien ved CSS og få bedre kontrol med gengivelse af websteder. Så de dannede CSS Houdini Task Force.

CSS Houdini: Hurtige links

- Hvorfor du har brug for CSS Houdini
- Støtte til CSS Houdini
- Hvad er Paint API?
- Hvad gør Typed OM?
- Egenskaber & værdier API
- Forbedre ydeevnen med Layout API



Men hvad er egentlig CSS Houdini? Det er et sæt API'er på lavt niveau, der giver udviklere beføjelse til at udvide CSS ved at tage kontrol over styling og layoutprocesser inde i en browser. Det giver direkte adgang til CSS Object Model (et sæt API'er, der muliggør manipulation af CSS fra JavaScript) og giver brugerne mulighed for at læse og ændre CSS-stil dynamisk, dvs. med JavaScript.



Houdini understøttes kun delvist i øjeblikket, så det er i den meget tidlige fase af vedtagelsen. Mens du venter på mere support (taler om support, skal du sørge for, at din webhosting tjenesten giver dig det, du har brug for), hvorfor ikke prøve denne samling af CSS animation teknikker, der helt sikkert vil fungere.

hvordan man laver kunst til videospil

Vil du opbygge et websted med lidt kodende viden? Du har brug for en webstedsbygger . Og hvis du har en masse design- eller mediefiler at stash væk, skal du vælge den mest pålidelige Sky lagring rundt om.



Hvorfor du har brug for CSS Houdini

Browsere er meget gode til at abstrahere komplekse stylingopgaver væk fra udviklere. Det opdeler tekststykker på separate linjer uden at skulle fortælles. Elementer kan dimensioneres og placeres ved siden af ​​hinanden automatisk ved hjælp af et par egenskaber og lade renderingsmotoren håndtere resten. Hver gang siden opdateres, tager browseren HTML, CSS og JavaScript og konverterer dem til pixels på skærmen i en proces kendt som 'rendering pipeline'.

For det første læser browseren gennem indholdet og bygger en struktur kendt som en gengive træ , som derefter bruges til at beregne, hvor ting skal vises på siden i en l ayout trin. Derfra omdanner det dem til pixels i et trin kaldet maleri . Med alle malede elementer klæber det dem sammen til en side i en proces kaldet sammensætning . For at forbedre et websides ydeevne skal vi altid fokusere på at optimere den kritiske gengivelsessti.

Hvis vi ønsker en visuel effekt på et websted, som browseren ikke understøtter indbygget, skal vi i stedet tilføje JavaScript og HTML med polyfills. Dette foretager gentagne ændringer nær starten af ​​rørledningen, hvilket resulterer i dårlig ydeevne.



Målet med Houdini er at åbne op for CSS og give udviklere mulighed for at anvende disse polyfills yderligere langs rørledningen og fremskynde tingene. De åbner også nye muligheder for at skabe effekter, som ikke tidligere var mulige. Selvom ikke alle websteder vil bruge disse nye API'er direkte, giver de rammer og biblioteker mulighed for at udjævne browserens inkonsekvenser.

Støtte til CSS Houdini

API'erne er blevet arbejdet med i de sidste par år, hvor hver er udviklet i fællesskab af alle medlemmer af Houdini taskforce. Alle API'er følger den strenge W3C-standardiseringsproces.

Hvis der opnås tilstrækkelig konsensus, oprettes en indledende udkastspecifikation kendt som et 'arbejdsudkast'. Derfra bliver det raffineret yderligere, inden det når 'kandidatanbefalingsniveau'.

En specifikation markeret som en kandidatanbefaling kan begynde at indsamle feedback fra implementører - i dette tilfælde browserudbydere. Det er her, vi begynder at se bredere browsersupport. Herfra går det til 'foreslået anbefaling' og derefter 'W3C-anbefaling', hvor det begynder at opnå fuld browsersupport.

I øjeblikket er forløberen Paint API, som er på kandidatanbefalingsniveau. De Chrom-baserede browsere Chrome, Opera og Samsung Internet understøtter det alle, mens Firefox og Safari arbejder på deres implementering. Typet OM er nært beslægtet, og som et resultat understøtter de samme browsere dette også.

Chrome fører an med de andre API'er. For at lege med Layout API, animationsworklets eller Properties and Values ​​API, skal du bruge Chrome Canary med 'Experimental Web Platform features' -flag aktiveret. Disse er stadig under aktiv udvikling og kan ændres når som helst.

CSS Houdini

Tjek den 'Er Houdini klar endnu?' websted for at se den aktuelle tilstand af Houdini.(Billedkredit: ishoudinireadyyet)

Hvad er Paint API?

Det næstsidste trin i gengivelsesrørledningen er malingsfasen. På dette tidspunkt ved browseren nøjagtigt det indhold, der skal vises, men ikke hvordan det ser ud. Gengivelsesmotoren ser på de anvendte stilarter på hvert element og justerer instruktionerne i overensstemmelse hermed.

Mens nogle stilarter er ret ligetil, tillader andre at køre funktioner, der bestemmer deres udseende. For eksempel baggrund kan tage mange funktioner, som inkluderer url () til billeder, rgb () til farver og lineær gradient () for en gradienteffekt.

hvordan man strukturerer i 3ds maks
#target {background: paint(my-effect);}

Paint API giver os mulighed for at definere vores egen malerfunktion, som fungerer på samme måde. Alle funktioner skaber et billede, som motoren kan bruge, afhængigt af den ejendom, den bruges til.

class MyWorklet { paint(ctx, size, style) {} }


Det eneste krav inde i et malingsarbejde er en enkelt maling metode. Her giver vi et sæt instruktioner, som en browser kan følge, når det er nødvendigt at male elementet igen. Det kaldes med et par argumenter, der giver metoden noget nyttig info.

Det første argument er en sammenhæng, der giver et rum, vi kan trække på. Det fungerer svarende til den sammenhæng, der bruges, når man trækker på elementer ved hjælp af instruktioner som f.eks flytte til og fillRect for at begynde at opbygge det billede, som CSS kan bruge.

Der er nogle forskelle mellem denne sammenhæng og den, der bruges til elementer. For eksempel er der ingen billeddata eller tekstmetoder tilgængelige af sikkerheds- og ydeevneårsager, men det er muligt, at de vises i senere revisioner af specifikationen.

Det andet argument indeholder dimensionerne af det malbare område, det skal oprettes. Typisk er dette bredden og højden af ​​målelementet inklusive polstring. Vi kan bruge disse oplysninger til at sikre, at vi trækker på konteksten på det rigtige sted.

Vi kan også bede om et sæt andre stilegenskaber. For eksempel vil vi måske ændre baggrundsfarven for at supplere tekstfarven. Dette gøres gennem en getter inden for brochuren.

static get inputProperties() { return ['color', '--custom-property']; }


Det input Egenskaber værdi er en matrix med alle egenskaber, som worklet er interesseret i. Dette kan omfatte brugerdefinerede egenskaber, der leverer yderligere tilpasning. Disse værdier overføres som det tredje argument til malingsmetoden som stilobjekter fra egenskaberne og værdierne API.

Der er et fjerde argument, der kan bruges til at få adgang til argumenter, der leveres til malingsfunktionen i CSS. Dette giver mulighed for konfiguration på definitionspunktet, f.eks. De farver, der skal bruges i en gradient. Dette arbejder sig gennem specifikationsprocessen og er endnu ikke klar til brug.

registerPaint('my-effect', MyWorklet);


Worklet'en skal registreres i browseren, før den afhentes i CSS. Det registerPaint metoden tager det navn, vi bruger til at henvise til det, og selve workleten.

CSS.paintWorklet.addModule('my-worklet.js');

Endelig skal browseren downloade worklet for at linke JavaScript til CSS. Ved at levere stien håndterer browseren resten af ​​processen for os.

Hvad gør Typed OM?

CSS Object Model (CSSOM) har været en del af JavaScript i lang tid. Det giver os mulighed for at udtrække den beregnede stil for et element, der læser dets stil ejendom eller ved hjælp af getComputedStyle . Førstnævnte returnerer stilarter anvendt direkte på dette element, mens sidstnævnte inkluderer alle stilarter inklusive arvede.

document.body.style.fontSize // “2rem” window.getComputedStyle(document.body).fontSize // “32px”

Den værdi, de returnerer, er altid en streng uanset hvad der blev leveret oprindeligt. Dette gør justering af disse værdier buggy og ineffektiv for os såvel som browseren, da den har brug for konstant at konvertere frem og tilbage mellem et tal og en streng.

document.body.fontSize += “1rem”; // “2rem1rem”, not “3rem”

Typed OM fungerer svarende til CSSOM, men giver også typer til værdierne. Der er to nye måder at få adgang til dem på attributStyleMap fungerer som stil ejendom med computedStyleMap synes godt om getComputedStyle .

document.body.attributeStyleMap.get('font-size') document.body.computedStyleMap().get('font-size')

Disse returnerer begge et CSSUnitValue-objekt, som indeholder værdien og enheden som separate egenskaber, der er klar til at blive læst og opdateret.

hvordan man kopierer en figur i illustratoren

Disse objekter kan også oprettes og bruges direkte til at beregne værdier, ligesom CSS calc () funktion gør.

Typed OM er i stand til meget mere, såsom typekonvertering og værdiklemme. Tjek Googles ' Arbejde med den nye CSS Typed Object Model ' og officiel W3C spec for mere information.

Egenskaber og værdier API: Føj typer til tilpassede egenskaber

CSS tilpassede egenskaber - også kendt som CSS-variabler - tillad os at definere en værdi ét sted og bruge den et andet sted. For eksempel kunne vi oprette brugerdefinerede egenskaber til at holde temafarver, som elementer længere nede på siden kunne bruge.

Problemet med brugerdefinerede egenskaber bliver tydeligt, når vi prøver at animere dem imellem. Da ejendommen kunne henvise til noget, falder browseren tilbage til at behandle den som en streng. Da der ikke er nogen måde, det ved, hvordan man animerer mellem strengene, ender det med at hoppe fra den ene til den anden.

Det Egenskaber og værdier API hjælper ved at levere typer til tilpassede egenskaber. Vi kan bruge JavaScript til at registrere en ejendom i browseren, som derefter tager sig af resten.

har jeg brug for en sag til min macbook pro
CSS.registerProperty({ name: '--main-color', initialValue: #ecf0f1, inherits: true, syntax: '' } );

Det registerProperty metoden er en ny egenskab på det globale CSS-objekt. Her definerer vi et par egenskaber ved ejendommen, såsom dens navn, en indledende værdi, hvis den ikke er specificeret, og om den arver fra elementer højere op eller ej.

Den vigtige egenskab er syntaks , der beskriver ejendomstypen. CSS ved allerede, hvordan man skal håndtere forskellige typer data, herunder tal, vinkler og URL'er. Ved at specificere typen kan vi gemme browserens arbejde og fortælle den, hvad vores værdier er.

Forbedre ydeevnen med Layout API

Alle browsere har layoutalgoritmer på plads for at hjælpe med at placere indhold. Som standard er alle elementer i flowlayout. I latinske scripts som engelsk angives alle elementer som inline flyder fra venstre mod højre i inline-retningen og alle elementer indstillet som blok flyder top til bund i blokretningen.

Mens de fungerer godt, får de de fleste websteder det samme ud. For at få et websted til at skille sig ud, skal vi bruge egenskaber som f.eks position: absolut og beregne forskydninger manuelt. Et websted som Pinterest bruger denne tilgang til at lave sit murstenslayout, men det kan forårsage ydeevneproblemer på større sider.

Layout API sigter mod at undgå dette problem ved at aflevere denne logik til en worklet. Den kender de ønskede dimensioner for forældrene og dens børn og kan instruere rendereren nøjagtigt, hvor den vil have dem.

class MyLayout { static get inputProperties() { return [] } async layout(children, edges, constraints, styleMap) {}} registerLayout('my-layout', MyLayout);

Hver arbejdsgang kræver en layout metode, der kører hver gang den har brug for at genberegne layoutet. Det skal også være asynkront, da indlægning af indholdet inde kan sættes på pause eller flyttes til en separat tråd til enhver tid. Det første argument er en række børn med de typografier, der anvendes på dem.

Den anden indeholder ramme, polstring og rullepanelstørrelse kendt som elementets kanter . Den tredje definerer resten af ​​det anvendelige rum kaldet begrænsninger . Det sidste argument beskriver de egenskaber, der anmodes om fra input Egenskaber svarende til Paint API.

child.layoutNextFragment({ fixedInlineSize: 200 })

Al denne information bruges til at generere kaldte placeringsinstruktioner fragmenter . Det layoutNextFragment metoden tager information om barnet, såsom dets ønskede inline og blokstørrelse, og rendereren tager sig af resten. Resultatet er et sæt fragmenter klar til browseren til at male.

body {display: layout(my-layout);}

På CSS-siden er layoutet defineret som ethvert andet. Layoutfunktionen tager det navn, der blev leveret, når worklet registreres. Mens indstillingen er åben for alle, er det usandsynligt, at de fleste har brug for at oprette layout-worklets til hvert websted. Worklets kan deles og inkluderes på et websted uden at vide om den underliggende algoritme. Det er mere sandsynligt, at denne API bruges som en måde at polyfylde fremtidige layoutsystemer på.

Dette indhold blev oprindeligt vist i netmagasinet.