CSS Houdini: kõik, mida peate teadma kõige kuumemate API-de kohta

CSS Houdini
(Pildikrediit: tulevik)

CSS Houdini on oma nime saanud maailmakuulsa Harry Houdini järgi. Miks? Rühm arendajaid - tuntud organisatsioonidest nagu Apple ja Google ning CSSi töörühm - soovis demonstreerida CSS-i võlu ja saada paremat kontrolli veebisaitide renderdamise üle. Nii moodustasid nad CSS Houdini töörühma.

CSS Houdini: Kiirlingid

- Miks vajate CSS Houdinit
- CSS Houdini tugi
- Mis on Paint API?
- Mida Typed OM teeb?
- Atribuutide ja väärtuste API
- Parandage jõudlust Layout API abil

Aga mis CSS Houdini täpsemalt on? See on madala taseme API-de kogum, mis annab arendajatele võimu CSS-i laiendada, võttes üle kontrolli brauseri sisustus- ja kujundusprotsesside üle. See annab otsese juurdepääsu CSS-i objektimudelile (API-de kogum, mis võimaldab JavaScripti CSS-iga manipuleerida) ning võimaldab kasutajatel CSS-i stiili dünaamiliselt lugeda ja muuta. JavaScripti abil.

Houdinit toetatakse praegu ainult osaliselt, nii et see on lapsendamise väga varajases staadiumis. Kui ootate suuremat tuge (rääkides toest, veenduge, et: veebimajutus teenus annab teile seda, mida vajate), miks mitte proovida seda kogu CSS-i animatsioon tehnikad, mis kindlasti töötavad.

Kas soovite luua saidi, kus oleks vähe kodeerimisteadmisi? Teil on vaja a veebisaidi ehitaja . Ja kui teil on palju disaini- või meediumifaile, mida saaksite ära hoida, valige kõige usaldusväärsem pilvemälu ümber.

Miks vajate CSS Houdinit

Brauserid oskavad keerukaid stiilitoiminguid arendajatelt eemale tõmmata. See jagab tekstilõigud eraldi ridadeks, ilma et oleks vaja seda öelda. Elemente saab mõõta ja paigutada üksteise kõrvale automaatselt, kasutades selleks paari omadust ja lastes renderdamismootoril ülejäänuga hakkama saada. Iga kord, kui leht uueneb, võtab brauser HTML-i, CSS-i ja JavaScripti ning teisendab need ekraanil piksliteks protsessis, mida tuntakse nn renderdustorustikuna.

Esiteks loeb brauser sisu läbi ja loob struktuuri, mida tuntakse kui renderduspuu , mille abil arvutatakse siis, kus asjad peaksid lehel l-s ilmuma ayout samm. Sealt alates muudab see need piksliteks sammuga, mida nimetatakse maalimine . Kui kõik elemendid on maalitud, kleepib see need protsessis kokku üheks leheks komponeerimine . Veebisaidi toimivuse parandamiseks peaksime alati keskenduma kriitilise renderdamise tee optimeerimisele.

Kui soovime visuaalset efekti saidil, mida brauser loomulikult ei toeta, peame selle asemel lisama JavaScripti ja HTML-i polüfillidega. See teeb torujuhtme alguse lähedal korduvaid muudatusi, mille tulemuseks on halb jõudlus.

Houdini eesmärk on CSS avada ja võimaldada arendajatel neid polüfille täita torujuhtme abil veelgi ja asja kiirendada. Need avavad ka uusi võimalusi selliste efektide loomiseks, mida varem ei olnud võimalik. Kuigi mitte kõik veebisaidid ei kasuta neid uusi API-sid otse, võimaldavad need raamistikel ja raamatukogudel brauseri vasturääkivusi tasandada.

CSS Houdini tugi

API-de kallal on viimastel aastatel töötatud, kusjuures igaüks neist on välja töötanud kõik Houdini rakkerühma liikmed. Kõik API-d järgivad ranget W3C standardimisprotsessi.

Piisava konsensuse saavutamisel luuakse esialgne spetsifikatsiooni mustand, mida nimetatakse „töövormiks“. Sealt edasi täpsustatakse seda enne kandidaatide soovituse taseme saavutamist.

Kandidaadisoovitusena märgitud spetsifikatsioon võib hakata rakendajatelt - antud juhul brauseri müüjatelt - tagasisidet koguma. Siit hakkame nägema laiemat brauserituge. Siit läheb see 'soovitatud soovitusele' ja seejärel 'W3C soovitusele', kus see hakkab saavutama täielikku brauserituge.

Praegu on eelkäija Paint API, mis on kandidaatide soovituste tasemel. Kroomi põhised brauserid Chrome, Opera ja Samsung Internet kõik toetavad seda, nende juurutamisega tegelevad Firefox ja Safari. Sisestatud OM on tihedalt seotud ja seetõttu toetavad need samad brauserid ka seda.

Chrome on teiste API-de eesotsas. Layout API-ga, animatsioonitöölehtede või atribuutide ja väärtuste API-ga mängimiseks peate kasutama Chrome Canaryt, kui lubatud on eksperimentaalsete veebiplatvormi funktsioonide lipp. Neid arendatakse endiselt aktiivselt ja need võivad igal hetkel muutuda.

CSS Houdini

Vaadake 'Kas Houdini on juba valmis?' veebisaidil, et näha Houdini praegust olukorda.(Pildikrediit: ishoudinireadyyet)

Mis on Paint API?

Renderdustorustiku eelviimane samm on värvimisfaas. Siinkohal teab brauser täpselt näidatavat sisu, kuid mitte seda, kuidas see ilmub. Renderdamismootor vaatleb igale elemendile rakendatud stiile ja kohandab selle juhiseid vastavalt.

Kui mõned stiilid on üsna otsekohesed, lubavad teised käivitada funktsioone, mis otsustavad nende välimuse. Näiteks taust võib võtta palju funktsioone, sealhulgas URL () piltide jaoks, rgb () värvide ja lineaarne gradient () gradiendi efekti jaoks.

#target {background: paint(my-effect);}

Paint API võimaldab meil määratleda meie enda maalimisfunktsiooni, mis töötab peaaegu samamoodi. Kõik funktsioonid loovad pildi, mida mootor saab kasutada sõltuvalt omadusest, mille vastu seda kasutatakse.

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


Ainus nõue värvivoldiku sees on üks värvi meetod. Siin pakume juhiste komplekti, mida brauser saab järgida alati, kui on vaja element üle värvida. Seda kutsutakse mõne argumendiga, mis annavad meetodile kasulikku teavet.

Esimene argument on kontekst, mis annab ruumi, millele saame tugineda. See töötab sarnaselt kontekstile, mida kasutatakse joonistamisel elemendid, kasutades selliseid juhiseid nagu kolima ja fillRect hakata looma pilti, mida CSS saab kasutada.

Selles kontekstis ja kasutatud kontekstis on mõningaid erinevusi elemendid. Näiteks pole turvalisuse ja jõudluse tagamiseks saadaval pildiandmeid ega tekstimeetodeid, kuid on võimalik, et need ilmuvad spetsifikatsiooni hilisemates versioonides.

Teine argument sisaldab selle loomiseks vajaliku värvitava ala mõõtmeid. Tavaliselt on see sihtelemendi laius ja kõrgus koos polsterdusega. Saame seda teavet kasutada selleks, et veenduda kontekstis õiges kohas.

Samuti võime küsida komplekti muid stiiliomadusi. Näiteks võiksime soovida teksti värvi täiendamiseks muuta tausta värvi. Seda tehakse voldikus oleva getteri kaudu.

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


The inputVarad väärtus on kõigi atribuutide massiiv, millest voldik huvitab. See võib hõlmata kohandatud atribuute, mis pakuvad täiendavat kohandamist. Need väärtused edastatakse kolmanda argumendina värvimismeetodile stiiliobjektidena API-st Atribuudid ja väärtused.

On neljas argument, mida saab kasutada CSS-i värvi funktsioonile tarnitud argumentide juurde pääsemiseks. See võimaldab seadistamist määratluse kohas, näiteks gradientides kasutatavaid värve. See töötab spetsifikatsiooniprotsessi kaudu ja pole veel kasutamiseks valmis.

registerPaint('my-effect', MyWorklet);


Tööleht tuleb brauseris registreerida, et see CSS-is kätte saaks. The registerPaint meetod võtab nime, mida me sellele viitame, ja voldiku enda.

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

Lõpuks peab JavaScripti CSS-i linkimiseks brauser alla laadima voldiku. Teekonna tarnimisega tegeleb brauser meie jaoks ülejäänud protsessiga.

Mida Typed OM teeb?

CSS-i objektimudel (CSSOM) on pikka aega olnud JavaScripti osa. See võimaldab meil välja lugeda selle lugeva elemendi arvutatud stiili stiil vara või kasutades getComputedStyle . Esimene tagastab sellele elemendile otse rakendatud stiilid, teine ​​aga hõlmab kõiki stiile, kaasa arvatud päritud.

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

Nende tagastatav väärtus on alati string, olenemata sellest, mis algselt tarniti. See muudab nende väärtuste kohandamise nii meie kui ka brauseri jaoks lolliks ja ebaefektiivseks, kuna see peab pidevalt numbri ja stringi vahel edasi-tagasi teisendama.

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

Sisestatud OM töötab sarnaselt CSSOM-iga, kuid pakub ka väärtuste tüüpe. Neile juurdepääsemiseks on kaks uut viisi - atribuutStyleMap töötab nagu stiil vara, koos computedStyleMap meeldib getComputedStyle .

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

Mõlemad tagastavad CSSUnitValue-objekti, mis sisaldab väärtust ja ühikut eraldi omadustena, mis on valmis lugemiseks ja värskendamiseks.

Neid objekte saab ka luua ja kasutada otse väärtuste arvutamiseks, sarnaselt CSS-ile arvutama () funktsioon teeb.

Typed OM suudab palju muud, näiteks tüübi teisendamist ja väärtuse kinnitamist. Vaadake Google'i Töö uue CSS-i sisestatud objekti mudeliga ' ja ametlik W3C spec lisateabe saamiseks.

Atribuutide ja väärtuste API: lisage kohandatud atribuutidele tüüpe

CSS-i kohandatud atribuudid - tuntud ka kui CSS-i muutujad - lubage meil määratleda väärtus ühes kohas ja kasutada seda mujal. Näiteks võiksime luua kohandatud atribuudid teemavärvide hoidmiseks, mida lehe allpool olevad elemendid saaksid kasutada.

Kohandatud omaduste probleem ilmneb siis, kui proovime nende vahel animeerida. Kuna vara võib viidata millele iganes, jätkab brauser selle käsitlemist stringina. Kuna see ei oska kuidagi keelte vahel animeerida, hüppab see lõpuks ühelt teisele.

The Atribuutide ja väärtuste API aitab kohandatud omadustele tüüpe pakkudes. Saame JavaScripti abil brauseris vara registreerida, mis seejärel hoolitseb ülejäänud osa eest.

CSS.registerProperty({ name: '--main-color', initialValue: #ecf0f1, inherits: true, syntax: '' } );

The registerProperty meetod on CSS globaalse objekti uus atribuut. Siin määratleme mõned omadused atribuudi kohta, näiteks selle nimi, algväärtus, kui see pole täpsustatud, ja kas see pärineb kõrgematelt elementidelt või mitte.

Oluline atribuut on süntaks , mis kirjeldab vara tüüpi. CSS juba teab, kuidas käsitleda erinevat tüüpi andmeid, sealhulgas numbreid, nurki ja URL-e. Tüüpi täpsustades saame brauseri töö salvestada ja anda teada, millised on meie väärtused.

Parandage jõudlust Layout API abil

Kõigil brauseritel on paigutuse algoritmid paigas, mis aitavad sisu positsioneerida. Vaikimisi on kõik elemendid voo paigutuses. Ladinakeelsetes skriptides, näiteks inglise keeles, on kõik elemendid määratud järjekorras voolab vasakult paremale sissesuunaliselt ja kõik elemendid on määratud blokeerida voolab ploki suunas ülevalt alla.

Kuigi need töötavad hästi, teevad nad enamiku veebisaitide väljanägemise samaks. Saidi eristamiseks peaksime kasutama selliseid omadusi nagu positsioon: absoluutne ja arvutage nihked käsitsi. Sait nagu Pinterest kasutab seda lähenemist oma müüritise stiilis paigutuse tegemisel, kuid see võib põhjustada jõudlusprobleeme suurematel lehtedel.

Layout API eesmärk on seda probleemi vältida, andes selle loogika töölehele. Ta teab vanema ja tema laste soovitud mõõtmeid ning oskab renderdajat juhendada täpselt sinna, kuhu ta soovib.

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

Iga voldik nõuab a paigutus meetod, mis töötab iga kord, kui on vaja paigutus ümber arvutada. Samuti peab see olema asünkroonne, kuna sisemise sisu paigutamise saab igal ajal peatada või eraldi lõime teisaldada. Esimene argument on hulgaliselt lapsi, kellel on neile rakendatavad stiilid.

Teine sisaldab äärist, polstrit ja kerimisriba suurust, mida nimetatakse elemendiks servad . Kolmas määratleb ülejäänud kasutatava ruumi, mida nimetatakse piirangud . Viimane argument kirjeldab üksikasju atribuutide kohta, mida taotletakse inputVarad sarnane Paint API-ga.

child.layoutNextFragment({ fixedInlineSize: 200 })

Kogu seda teavet kasutatakse nn positsioneerimisjuhiste loomiseks killud . The layoutNextFragment meetod võtab teavet lapse kohta, näiteks soovitud joone- ja plokisuurus ning renderdaja hoolitseb muu eest. Tulemuseks on fragmentide komplekt, mis on brauseri jaoks valmis värvimiseks.

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

CSS-i poolel on paigutus määratletud nagu iga teine. Paigutusfunktsioon võtab töölehe registreerimisel antud nime. Ehkki see valik on kõigile avatud, pole enamikul tõenäoline, et oleks vaja iga saidi jaoks paigutusvoldikuid luua. Voldikuid saab jagada ja saidile lisada, tundmata aluseks olevat algoritmi. Seda API-d kasutatakse tõenäolisemalt tulevaste paigutussüsteemide polüfillide täitmise viisina.

See sisu ilmus algselt netiajakirjas.