CSS Houdini: Kaikki mitä sinun tarvitsee tietää kuumimmista sovellusliittymistä

CSS Houdini
(Kuvan luotto: Tulevaisuus)

CSS Houdini on saanut nimensä maailmankuululta Harry Houdinilta. Miksi? Ryhmä kehittäjiä - tunnetuista organisaatioista, kuten Apple ja Google, sekä CSS-työryhmä - halusi selvittää CSS: n taika ja saada paremman hallinnan verkkosivustojen renderoinnista. Joten he perustivat CSS Houdinin työryhmän.

CSS Houdini: Pikalinkit

- Miksi tarvitset CSS Houdinia
- Tuki CSS Houdinille
- Mikä on Paint-sovellusliittymä?
- Mitä Typed OM tekee?
- Ominaisuudet ja arvot -sovellusliittymä
- Paranna suorituskykyä Layout-sovellusliittymän avulla



Mutta mitä CSS Houdini tarkalleen tarkoittaa? Se on joukko matalan tason sovellusliittymiä, jotka antavat kehittäjille voiman laajentaa CSS: ää ottamalla hallinnan selaimen muotoilu- ja asetteluprosesseista. Se antaa suoran pääsyn CSS-objektimalliin (joukko sovellusliittymiä, jotka mahdollistavat CSS: n manipuloinnin JavaScriptista) ja antaa käyttäjien lukea ja muokata CSS-tyyliä dynaamisesti, ts. JavaScriptillä.



Houdinia tuetaan tällä hetkellä vain osittain, joten se on hyvin varhaisessa vaiheessa adoptiota. Odottaessasi lisää tukea (puhuessasi tuesta, varmista, että sivujen ylläpito palvelu antaa sinulle mitä tarvitset), miksi et kokeilisi tätä kokoelmaa CSS-animaatio tekniikat, jotka varmasti toimivat.

kuinka tuoda kuvittaja jälkivaikutuksiin

Haluatko rakentaa sivuston, jolla on vähän koodausta? Sinä tarvitset verkkosivujen rakentaja . Ja jos sinulla on paljon suunnittelu- tai mediatiedostoja, jotka voit kätkeä pois, valitse luotettavin pilvitallennus noin.



Miksi tarvitset CSS Houdinia

Selaimet pystyvät erottamaan monimutkaiset muotoilutehtävät kehittäjiltä. Se jakaa tekstikohdat erillisiin riveihin ilman, että niitä tarvitsee kertoa. Elementit voidaan mitoittaa ja sijoittaa vierekkäin automaattisesti käyttämällä pari ominaisuutta ja antamalla renderointimoottorin hoitaa loput. Joka kerta, kun sivu päivittyy, selain ottaa HTML: n, CSS: n ja JavaScriptin ja muuntaa ne pikseleiksi näytöllä prosessissa, joka tunnetaan nimellä renderöinti.

Ensinnäkin selain lukee sisällön läpi ja rakentaa rakenteen, joka tunnetaan nimellä tehdä puu , jota käytetään sitten laskemaan, missä asioiden pitäisi näkyä sivulla l: ssä ei askel. Sieltä se muuttaa ne pikseleiksi kutsutussa vaiheessa maalaus . Kun kaikki elementit on maalattu, se yhdistää ne yhdeksi sivuksi prosessissa, jota kutsutaan säveltäminen . Verkkosivuston suorituskyvyn parantamiseksi meidän tulisi aina keskittyä kriittisen renderöintipolun optimointiin.

Jos haluamme visuaalisen tehosteen sivustolle, jota selain ei tue natiivisti, meidän on sen sijaan lisättävä JavaScript ja HTML polyfill-täytteillä. Tämä tekee toistuvia muutoksia lähellä putkilinjan alkua, mikä johtaa heikkoon suorituskykyyn.



Houdinin tavoitteena on avata CSS ja antaa kehittäjien soveltaa näitä polyfillitä edelleen pitkin putkea ja nopeuttaa asioita. Ne avaavat myös uusia mahdollisuuksia luoda vaikutuksia, jotka eivät ole aiemmin olleet mahdollisia. Vaikka kaikki verkkosivustot eivät käytä näitä uusia sovellusliittymiä suoraan, ne antavat kehyksille ja kirjastoille mahdollisuuden tasoittaa selaimen epäjohdonmukaisuudet.

Tuki CSS Houdinille

Sovellusliittymiä on kehitetty viime vuosina, ja kaikki Houdinin työryhmän jäsenet ovat kehittäneet ne yhdessä. Kaikki sovellusliittymät noudattavat tiukkaa W3C-standardointiprosessia.

Jos saavutetaan riittävä yksimielisyys, luodaan alustava luonnoseritelmä, joka tunnetaan nimellä 'työluonnos'. Sieltä sitä tarkennetaan edelleen, ennen kuin se saavuttaa ehdokassuositustason.

Ehdokkaana suositukseksi merkitty eritelmä voi alkaa kerätä palautetta toteuttajilta - tässä tapauksessa selaintoimittajilta. Täällä alamme nähdä laajempaa selaintukea. Sieltä se siirtyy ehdotettuun suositukseen ja sitten W3C-suositukseen, jossa se alkaa saavuttaa täyden selaintuen.

Tällä hetkellä edelläkävijä on Paint-sovellusliittymä, joka on ehdokkaiden suositustasolla. Chromium-pohjaiset selaimet Chrome, Opera ja Samsung Internet tukevat sitä, ja Firefox ja Safari työskentelevät niiden toteuttamisen parissa. Kirjoitettu OM liittyy läheisesti toisiinsa, minkä seurauksena nämä samat selaimet tukevat myös tätä.

Chrome on edelläkävijä muiden sovellusliittymien kanssa. Jos haluat pelata Layout-sovellusliittymän, animaatiotyökalujen tai Ominaisuudet ja arvot -sovellusliittymän kanssa, sinun on käytettävä Chrome Canary -ohjelmaa kokeellisten Web-alustan ominaisuuksien kanssa. Näitä kehitetään edelleen aktiivisesti ja ne voivat muuttua milloin tahansa.

CSS Houdini

Katso 'Onko Houdini valmis vielä?' verkkosivustolla nähdäksesi Houdinin nykytilan.(Kuvan luotto: ishoudinireadyyet)

Mikä on Paint-sovellusliittymä?

Viimeinen vaihe renderöintiputkessa on maalausvaihe. Tässä vaiheessa selain tietää tarkalleen näytettävän sisällön, mutta ei sen ulkonäköä. Renderointimoottori tarkastelee kullekin elementille käytettyjä tyylejä ja säätää sen ohjeita vastaavasti.

Vaikka jotkut tyylit ovat melko suoraviivaisia, toiset sallivat toimintojen suorittamisen, jotka päättävät niiden ulkonäöstä. Esimerkiksi tausta voi viedä monia toimintoja, mukaan lukien URL () kuville, rgb () väreille ja lineaarinen kaltevuus () kaltevuusvaikutukselle.

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

Paint-sovellusliittymä antaa meille mahdollisuuden määritellä oma maalausfunktiomme, joka toimii samalla tavalla. Kaikki toiminnot luovat kuvan, jota moottori voi käyttää sen ominaisuuden mukaan, jota vastaan ​​sitä käytetään.

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


Ainoa vaatimus maalityöpisteen sisällä on yksi maali- menetelmä. Tässä tarjoamme joukon ohjeita, joita selain voi noudattaa aina, kun se tarvitsee maalata elementin uudelleen. Sitä kutsutaan muutamalla argumentilla, jotka antavat menetelmälle hyödyllisiä tietoja.

kuinka löydän taiteilijani tyylin

Ensimmäinen argumentti on konteksti, joka tarjoaa tilan, johon voimme käyttää. Se toimii samalla tavalla kuin kontekstissa, jota käytetään piirrettäessä elementtejä käyttämällä ohjeita, kuten muuttaa ja fillRect alkaa rakentaa kuvaa, jota CSS voi käyttää.

Tämän kontekstin ja käytetyn tilanteen välillä on joitain eroja elementtejä. Esimerkiksi turvallisuussyistä tai suorituskyvystä ei ole käytettävissä kuvatietoja tai tekstimenetelmiä, mutta on mahdollista, että ne näkyvät spesifikaation myöhemmissä versioissa.

Toinen argumentti sisältää sen maalattavan alueen mitat, joka sen on luotava. Tyypillisesti tämä on kohde-elementin leveys ja korkeus, mukaan lukien pehmuste. Voimme käyttää näitä tietoja varmistaaksemme, että hyödynnämme kontekstia oikeassa paikassa.

Voimme myös pyytää joukko muita tyylin ominaisuuksia. Voisimme esimerkiksi haluta muuttaa taustan väriä täydentämään tekstin väriä. Tämä tapahtuu työkirjan sisällä olevan getterin avulla.

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


inputKiinteistöt arvo on joukko kaikista ominaisuuksista, joista työkirja on kiinnostunut. Tähän voi sisältyä mukautettuja ominaisuuksia, jotka lisäävät mukautuksia. Nämä arvot välitetään kolmanneksi argumentiksi maalimenetelmälle tyylikohteina Ominaisuudet ja arvot -sovellusliittymästä.

paras graafisen suunnittelun näyttö 2016

On neljäs argumentti, jota voidaan käyttää CSS: n maalitoimintoon toimitettujen argumenttien käyttämiseen. Tämä mahdollistaa kokoonpanon määrittelykohdassa, kuten kaltevuudessa käytettävät värit. Tämä toimii läpi määrittelyprosessin eikä ole vielä käyttövalmis.

registerPaint('my-effect', MyWorklet);


Työkirja on rekisteröitävä selaimessa, jotta se voidaan noutaa CSS: ään. registerPaint menetelmä ottaa nimen, jota käytämme viittaamaan siihen, ja itse laskentataulukon.

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

Lopuksi, jotta JavaScript voidaan linkittää CSS: ään, selaimen on ladattava työkirja. Toimittamalla polun selain hoitaa loppuprosessin puolestamme.

Mitä Typed OM tekee?

CSS-objektimalli (CSSOM) on ollut osa JavaScriptiä pitkään. Sen avulla voimme poimia lasketun tyylin elementistä, joka lukee sen tyyli omaisuutta tai käyttämällä getComputedStyle . Ensimmäinen palauttaa tyylit, joita käytetään suoraan kyseiseen elementtiin, kun taas jälkimmäinen sisältää kaikki tyylit, myös perityt tyylit.

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

Palautettava arvo on aina merkkijono riippumatta siitä, mitä alun perin toimitettiin. Tämä tekee näiden arvojen säätämisestä vaikeaa ja tehotonta sekä meille että selaimelle, koska sen on jatkuvasti muunnettava edestakaisin luvun ja merkkijonon välillä.

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

Typed OM toimii samalla tavalla kuin CSSOM, mutta tarjoaa myös tyypit arvoille. Niihin on kaksi uutta tapaa - attributeStyleMap toimii kuten tyyli omaisuus, jossa computedStyleMap Kuten getComputedStyle .

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

Nämä molemmat palauttavat CSSUnitValue-objektin, joka sisältää arvon ja yksikön erillisinä ominaisuuksina, jotka ovat valmiita lukemiseen ja päivittämiseen.

Nämä objektit voidaan myös luoda ja käyttää suoraan arvojen laskemiseen, aivan kuten CSS laskea () toiminto.

Kirjoitettu OM pystyy tekemään paljon enemmän, kuten tyyppimuunnoksen ja arvon kiinnityksen. Katso Googlen Työskentely uuden CSS-tyypin objektimallin kanssa ' ja virallinen W3C spec lisätietoja.

Ominaisuudet ja arvot -sovellusliittymä: Lisää tyypit mukautettuihin ominaisuuksiin

Mukautetut CSS-ominaisuudet - tunnetaan myös nimellä CSS-muuttujat - anna meidän määritellä arvo yhdessä paikassa ja käyttää sitä muualla. Voisimme esimerkiksi luoda mukautettuja ominaisuuksia pitämään teeman värejä, joita sivun alapuolella olevat elementit voisivat hyödyntää.

Mukautettujen ominaisuuksien ongelma ilmenee, kun yritämme animoida niiden välillä. Koska ominaisuus voi viitata mihin tahansa, selain palaa takaisin käsittelemään sitä merkkijonona. Koska se ei osaa mitenkään animoida merkkijonojen välillä, se lopulta hyppää yhdestä toiseen.

Ominaisuudet ja arvot -sovellusliittymä auttaa tarjoamalla tyyppejä mukautetuille ominaisuuksille. Voimme käyttää JavaScriptiä rekisteröimään omaisuuden selaimeen, joka sitten hoitaa loput.

Apple Mac Pro 15 tuuman kotelo
CSS.registerProperty({ name: '--main-color', initialValue: #ecf0f1, inherits: true, syntax: '' } );

registerProperty method on uusi ominaisuus CSS-globaalissa objektissa. Tässä määritellään muutama ominaisuuden ominaisuus, kuten sen nimi, alkuarvo, jos sitä ei ole määritetty ja periykö se ylemmiltä elementeiltä.

Tärkeä ominaisuus on syntaksi , joka kuvaa ominaisuuden tyypin. CSS osaa jo käsitellä erityyppisiä tietoja, kuten numeroita, kulmia ja URL-osoitteita. Määrittämällä tyypin voimme tallentaa selaimen työn ja kertoa sille arvomme.

Paranna suorituskykyä Layout-sovellusliittymän avulla

Kaikissa selaimissa on asettelualgoritmit paikallaan sisällön sijoittamiseksi. Oletusarvoisesti kaikki elementit ovat vuon asetteluissa. Latinalaisissa skripteissä, kuten englanniksi, kaikki elementit asetetaan muotoon linjassa virtaa vasemmalta oikealle inline-suuntaan ja kaikki elementit asetetaan lohko virtaa ylhäältä alas lohkon suunnassa.

Vaikka ne toimivat hyvin, ne saavat useimmat verkkosivustot näyttämään samoilta. Sivuston erottamiseksi meidän on käytettävä ominaisuuksia, kuten sijainti: absoluuttinen ja laskea siirtymät manuaalisesti. Sivusto, kuten Pinterest, käyttää tätä lähestymistapaa muuraustyylin asetteluun, mutta se voi aiheuttaa suorituskykyongelmia suuremmilla sivuilla.

Layout-sovellusliittymä pyrkii välttämään tämän ongelman luovuttamalla tämän logiikan työarkille. Se tietää vanhemman ja hänen lastensa halutut mitat ja voi opettaa renderöijän tarkalleen mihin haluaa heidät.

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

Jokainen laskentataulukko vaatii a layout menetelmä, joka suoritetaan joka kerta, kun se tarvitsee laskea asettelun uudelleen. Sen on myös oltava asynkronista, koska sisällön asettaminen sisälle voidaan keskeyttää tai siirtää erilliseen säikeeseen milloin tahansa. Ensimmäinen argumentti on joukko lapsia, joilla on niihin sovellettavat tyylit.

Toinen sisältää reunan, täytteen ja vierityspalkin koon, joka tunnetaan elementin reunat . Kolmas määrittelee loput käytettävissä olevasta tilasta, jota kutsutaan rajoituksia . Viimeinen argumentti kuvaa yksityiskohdat, joita pyydetään inputKiinteistöt samanlainen kuin Paint API.

child.layoutNextFragment({ fixedInlineSize: 200 })

Kaikkia näitä tietoja käytetään kutsuttujen paikannusohjeiden luomiseen sirpaleet . layoutNextFragment menetelmä ottaa tietoa lapsesta, kuten halutun linjan ja lohkon koon, ja renderöijä huolehtii lopusta. Tuloksena on joukko fragmentteja, jotka ovat valmiita selaimen maalattavaksi.

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

CSS-puolella asettelu määritetään kuten mikä tahansa muu. Asettelutoiminto ottaa nimen, joka annettiin rekisteröimällä työkirja. Vaikka vaihtoehto on avoin kaikille, on epätodennäköistä, että useimpien tarvitsee luoda asettelulehtisiä jokaiselle sivustolle. Työkokoja voidaan jakaa ja sisällyttää sivustoon tietämättä taustalla olevasta algoritmista. Tätä sovellusliittymää käytetään todennäköisemmin tapana täyttää tulevat asettelujärjestelmät.

Tämä sisältö ilmestyi alun perin verkkolehdessä.