CSS:n taikuuden avaaminen: Syväsukellus @property-sääntöön ja mukautettujen ominaisuuksien tyyppimäärityksiin

CSS:n mukautetut ominaisuudet (tunnetaan myös CSS-muuttujina) ovat mullistaneet tavan, jolla kirjoitamme ja ylläpidämme CSS:ää. Ne tarjoavat uudelleenkäytettävyyttä, joustavuutta ja ylläpidettävyyttä, tehden tyylisäännöistämme dynaamisempia ja helpommin hallittavia. Viime aikoihin asti mukautetuilta ominaisuuksilta on kuitenkin puuttunut kyky määritellä niiden odotettuja datatyyppejä, mikä on rajoittanut niiden potentiaalia edistyneessä tyylittelyssä ja animaatioissa. Tässä astuu kuvaan @property-sääntö – mullistava ominaisuus, jonka avulla voimme eksplisiittisesti määritellä mukautettujen ominaisuuksiemme tyypin, syntaksin ja alkuarvon.

Mikä on @property-sääntö?

@property-sääntö on osa CSS Houdini -rajapintojen perhettä, jonka tavoitteena on tuoda CSS-moottorin sisäinen toiminta kehittäjien ulottuville. Tarkemmin sanottuna @property on osa Custom Properties and Values API:a. Sen avulla voit rekisteröidä mukautetun ominaisuuden selaimelle ja määrittää sille seuraavat asiat:

• nimi: Mukautetun ominaisuuden nimi (esim. --my-color).
• syntaksi: Ominaisuuden odotettu datatyyppi (esim. <color>, <number>, <length>).
• periytyvyys (inherits): Periytyykö ominaisuuden arvo sen vanhempielementiltä (true tai false).
• alkuarvo (initial-value): Ominaisuuden oletusarvo, jos muuta arvoa ei ole määritetty.

Määrittämällä nämä ominaisuudet saat paremman hallinnan siitä, miten mukautettuja ominaisuuksia käytetään ja miten ne käyttäytyvät, erityisesti animaatioissa ja siirtymissä.

Miksi käyttää @property-sääntöä? Hyödyt

@property-säännön käyttö tarjoaa useita merkittäviä etuja:

1. Tyyppiturvallisuus ja validointi

Ilman @property-sääntöä CSS käsittelee kaikkia mukautettuja ominaisuuksia merkkijonoina. Tämä voi johtaa odottamattomaan käytökseen, kun yrität käyttää niitä laskelmissa tai animaatioissa, jotka vaativat tiettyjä datatyyppejä. Jos esimerkiksi tarkoitat mukautetun ominaisuuden olevan luku, mutta annat sille vahingossa merkkijonoarvon, animaatiosi saattavat rikkoutua tai tuottaa vääriä tuloksia.

@property ratkaisee tämän ongelman antamalla sinun määrittää mukautetun ominaisuuden odotetun syntaksin (datatyyppi). Selain validoi annetun arvon tätä syntaksia vasten ja varmistaa, että se vastaa odotettua tyyppiä. Jos arvo ei vastaa syntaksia, selain käyttää alkuarvoa (jos sellainen on annettu) tai käsittelee ominaisuutta virheellisenä.

2. Saumattomat animaatiot ja siirtymät

@property-säännön todellinen voima tulee esiin animaatioissa ja siirtymissä. Ilman sitä mukautettujen ominaisuuksien animointi voi olla hankalaa, koska selain ei tiedä, miten interpoloida geneerisen merkkijonon eri arvojen välillä. Saatat joutua turvautumaan JavaScript-kikkailuun tai käyttämään rajoitettuja CSS-ominaisuuksia halutun vaikutelman saavuttamiseksi.

Määrittämällä mukautetun ominaisuuden syntaksin kerrot selaimelle, miten sen arvojen välillä tulee interpoloida animaatioiden ja siirtymien aikana. Jos esimerkiksi määrität mukautetun ominaisuuden <color>-syntaksilla, selain tietää, että sen tulee interpoloida värien välillä käyttäen pehmeää väriliukua. Vastaavasti, jos määrität ominaisuuden <number>-syntaksilla, selain tietää, että sen tulee interpoloida lukujen välillä lineaarisesti.

3. Parempi koodin luettavuus ja ylläpidettävyys

@property parantaa CSS-koodisi luettavuutta ja ylläpidettävyyttä tekemällä selväksi, mitä datatyyppiä mukautetun ominaisuuden on tarkoitus edustaa. Tämä auttaa muita kehittäjiä (ja tulevaa itseäsi) ymmärtämään ominaisuuden tarkoituksen ja sen, miten sitä tulisi käyttää.

Lisäksi määrittämällä eksplisiittisesti mukautetun ominaisuuden alkuarvon tarjoat selkeän varoarvon, jota käytetään, jos muuta arvoa ei ole määritetty. Tämä voi estää odottamattomia visuaalisia virheitä ja tehdä koodistasi vankempaa.

4. Parannettu suorituskyky

Joissakin tapauksissa @property-säännön käyttäminen voi parantaa CSS-koodisi suorituskykyä. Antamalla selaimelle enemmän tietoa mukautettujen ominaisuuksiesi odotetuista datatyypeistä annat sen optimoida renderöintiprosessia. Tämä voi johtaa nopeampiin animaatioihin ja siirtymiin, erityisesti monimutkaisissa asetteluissa.

@property-säännön syntaksi

@property-sääntö määritellään seuraavalla syntaksilla:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Käydään läpi jokainen näistä komponenteista:

• --property-name: Tämä on määrittelemäsi mukautetun ominaisuuden nimi. Sen on alettava kahdella yhdysviivalla (--) ja se voi sisältää mitä tahansa kelvollisia CSS-tunnistemerkkejä. Esimerkiksi: --primary-color, --font-size, --spacing-unit.
• syntax: Tämä määrittää mukautetun ominaisuuden odotetun datatyypin. Se määritellään CSS-arvotyypin kuvaajalla. Joitakin yleisiä syntaksiarvoja ovat:
• <color>: Edustaa väriarvoa (esim. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Edustaa numeerista arvoa (esim. 1, 3.14, -42).
• <length>: Edustaa pituusarvoa (esim. 10px, 2em, 50vh, 1rem).
• <percentage>: Edustaa prosenttiarvoa (esim. 50%, 100%, 25.5%).
• <string>: Edustaa merkkijonoarvoa (esim. "Hello", "World").
• <image>: Edustaa kuva-arvoa (esim. url("image.jpg"), linear-gradient(...)).
• <angle>: Edustaa kulma-arvoa (esim. 45deg, 0.5rad, 1turn).
• *: Edustaa mitä tahansa kelvollista CSS-arvoa. Käytä varoen, koska se kumoaa tyyppitarkistuksen tarkoituksen.
• Mukautettu syntaksi: Mahdollistaa monimutkaisten syntaksien määrittelyn säännöllisten lausekkeiden kaltaisilla malleilla.
• inherits: Tämä totuusarvo (boolean) määrittää, periytyykö mukautetun ominaisuuden arvo sen vanhempielementiltä. Jos arvo on true, ominaisuus periytyy. Jos arvo on false, ominaisuus ei periydy ja käyttää alkuarvoaan, ellei sitä ole erikseen määritelty elementille. Oletusarvo on false.
• initial-value: Tämä määrittää mukautetun ominaisuuden oletusarvon. Jos ominaisuutta ei ole erikseen asetettu elementille, se käyttää tätä arvoa. Alkuarvon on oltava kelvollinen arvo määritetyn syntaksin mukaisesti. Jos alkuarvoa ei ole annettu eikä muuta arvoa ole asetettu, ominaisuutta käsitellään ikään kuin sillä olisi asettamaton arvonsa.

Käytännön esimerkkejä @property-säännön toiminnasta

Katsotaan muutamia käytännön esimerkkejä siitä, miten @property-sääntöä käytetään CSS-koodissasi.

Esimerkki 1: Värin animointi

Tässä esimerkissä luomme mukautetun ominaisuuden nimeltä --background-color ja animoimme sen CSS-siirtymien avulla. Määritämme syntaksiksi <color> varmistaaksemme, että selain interpoloi värien välillä oikein.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

Tässä koodissa:

• Määritämme mukautetun ominaisuuden --background-color, jonka syntaksi on <color>, asetamme inherits-arvoksi false ja initial-value-arvoksi valkoisen (#ffffff).
• Sovellamme tätä ominaisuutta .box-elementin background-color-ominaisuuteen käyttämällä var(--background-color).
• Lisäämme siirtymän --background-color-ominaisuudelle, jotta se animoituu sulavasti arvon muuttuessa.
• Muutamme --background-color-arvon siniseksi (#007bff) hover-tilassa, mikä luo pehmeän värinvaihtotehosteen.

Esimerkki 2: Luvun animointi

Tässä esimerkissä luomme mukautetun ominaisuuden nimeltä --blur-radius ja animoimme sen CSS-siirtymien avulla. Määritämme syntaksiksi <length> varmistaaksemme, että selain interpoloi pituusarvojen välillä oikein. Tämä esimerkki esittelee myös suositun käyttötapauksen pituuksien käytöstä: pikseliarvot. Tämä voitaisiin helposti soveltaa myös muihin yksikkötyyppeihin. On myös tärkeää huomata, että alkuarvon asettaminen arvoon `0px` on ratkaisevaa, koska selain tarvitsee perusyksikön siirtymien suorittamiseksi oikein.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

Tässä koodissa:

• Määritämme mukautetun ominaisuuden --blur-radius, jonka syntaksi on <length>, asetamme inherits-arvoksi false ja initial-value-arvoksi 0px.
• Sovellamme tätä ominaisuutta .image-elementin filter: blur() -funktioon käyttämällä var(--blur-radius).
• Lisäämme siirtymän --blur-radius-ominaisuudelle, jotta se animoituu sulavasti arvon muuttuessa.
• Muutamme --blur-radius-arvoksi 5px hover-tilassa, mikä luo pehmeän sumennustehosteen.

Esimerkki 3: Teemoitetun käyttöliittymän luominen periytyvillä ominaisuuksilla

Tässä esimerkissä luomme yksinkertaisen teemoitetun käyttöliittymän käyttämällä periytyviä mukautettuja ominaisuuksia. Määritämme mukautetun ominaisuuden nimeltä --theme-color ja asetamme sen :root-elementille. Tämä mahdollistaa sen, että kaikki lapsielementit perivät teemavärin.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

Tässä koodissa:

• Määritämme mukautetun ominaisuuden --theme-color, jonka syntaksi on <color>, asetamme inherits-arvoksi true ja initial-value-arvoksi vihreän (#4caf50).
• Asetamme --theme-color-arvon :root-elementille, jolloin se on kaikkien dokumentin elementtien käytettävissä.
• Käytämme tätä ominaisuutta asettaaksemme .button-elementin background-color-ominaisuuden.
• Muutamme --theme-color-arvon tummemman vihreäksi (#388e3c) hover-tilassa, mikä osoittaa, kuinka periytyviä ominaisuuksia voidaan helposti päivittää käyttöliittymän teeman muuttamiseksi.

Esimerkki 4: Mukautetun syntaksin määrittely

syntax-ominaisuus voi hyväksyä myös merkkijonon tarkemman mallin määrittämiseksi, mikä on erityisen hyödyllistä monimutkaisempien arvojen validoinnissa. Syntaksi hyödyntää säännöllisten lausekkeiden kaltaista järjestelmää, joka on dokumentoitu MDN:ssä (Mozilla Developer Network). Tämä esimerkki havainnollistaa, kuinka määritellään ja käytetään mukautettua syntaksia taustakuvan sijainnille, joka hyväksyy kelvollisiksi arvoiksi avainsanat `top`, `bottom`, `left` ja `right`.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Tässä `syntax` on määritelty merkkijonoesityksenä kelvollisista avainsanoista. `[ ]`-merkintä määrittelee joukon vaihtoehtoja, `|`-symboli erottaa ne, ja `{1,2}` rajoittaa sallittujen arvojen määrän yhteen tai kahteen avainsanaan. Jos käytetään kelpaamatonta arvoa, kuten `center`, selain palaa `initial-value`-arvoon `top left`.

Selaintuki

@property-säännön selaintuki on yleisesti ottaen hyvä nykyaikaisissa selaimissa, mukaan lukien:

• Chrome (versio 64 ja uudemmat)
• Edge (versio 79 ja uudemmat - perustuu Chromiumiin)
• Firefox (versio 72 ja uudemmat)
• Safari (versio 14.1 ja uudemmat)

On kuitenkin aina hyvä tarkistaa uusimmat selainyhteensopivuustaulukot sivustoilta, kuten Can I use..., varmistaaksesi, että käyttämäsi ominaisuudet ovat tuettuja selaimissa, joita käyttäjäsi todennäköisesti käyttävät.

Vanhemmissa selaimissa, jotka eivät tue @property-sääntöä, selain jättää @property-säännön huomiotta ja käsittelee mukautettua ominaisuutta tavallisena CSS-muuttujana. Tämä tarkoittaa, että animaatiot ja siirtymät eivät ehkä toimi odotetusti, mutta koodi on silti toimivaa.

Parhaat käytännöt @property-säännön käyttöön

Tässä on joitakin parhaita käytäntöjä, jotka kannattaa pitää mielessä @property-sääntöä käytettäessä:

• Määritä aina syntaksi: Varmista, että määrität aina mukautettujen ominaisuuksiesi syntax-arvon tyyppiturvallisuuden varmistamiseksi ja saumattomien animaatioiden ja siirtymien mahdollistamiseksi.
• Aseta alkuarvo: Anna initial-value-arvo tarjotaksesi oletusarvon ja estääksesi odottamattomia visuaalisia virheitä.
• Käytä kuvaavia nimiä: Valitse mukautetuille ominaisuuksillesi kuvaavia nimiä, jotka ilmaisevat selkeästi niiden tarkoituksen ja datatyypin. Käytä esimerkiksi nimeä --button-background-color nimen --color sijaan.
• Harkitse periytyvyyttä: Päätä, tulisiko mukautettujen ominaisuuksiesi periytyä vanhempielementeiltään vai ei. Käytä inherits: true ominaisuuksille, joiden tulisi olla jaettuja koko käyttöliittymässä, kuten teemaväreille tai fonttikooille.
• Testaa huolellisesti: Testaa koodisi eri selaimissa varmistaaksesi, että se toimii odotetusti. Käytä varamekanismeja vanhemmille selaimille, jotka eivät tue @property-sääntöä.
• Dokumentoi mukautetut ominaisuutesi: Lisää kommentteja CSS-koodiisi selittääksesi mukautettujen ominaisuuksiesi tarkoituksen ja käytön. Tämä helpottaa muiden kehittäjien (ja tulevan itsesi) ymmärtämään koodiasi. Työkalut, kuten Stylelint, voidaan myös määrittää noudattamaan näitä parhaita käytäntöjä.

@property ja CSS Houdini

Kuten aiemmin mainittiin, @property on osa CSS Houdini -rajapintojen perhettä. CSS Houdini on kokoelma matalan tason rajapintoja, jotka tuovat CSS-moottorin sisäisen toiminnan kehittäjien ulottuville, mahdollistaen CSS:n laajentamisen mukautetuilla ominaisuuksilla ja toiminnallisuuksilla.

Muita Houdini-rajapintoja ovat:

• Paint API: Mahdollistaa mukautettujen taustakuvien, reunusten ja maskien määrittelyn JavaScriptin avulla.
• Animation Worklet API: Mahdollistaa suorituskykyisten animaatioiden luomisen JavaScriptin avulla.
• Layout API: Mahdollistaa mukautettujen asettelualgoritmien määrittelyn elementeille, kuten ruudukkojärjestelmille tai masonry-asetteluille.
• Parser API: Mahdollistaa CSS-koodin jäsentämisen ja muokkaamisen JavaScriptin avulla.

Yhdistämällä @property-säännön muihin Houdini-rajapintoihin voit luoda todella tehokkaita ja mukautettavia CSS-ratkaisuja.

Yhteenveto

@property-sääntö on tehokas lisä CSS:ään, joka mahdollistaa mukautettujen ominaisuustyyppien määrittelyn, mikä puolestaan mahdollistaa edistyneen tyylittelyn, animaatiot ja siirtymät. Käyttämällä @property-sääntöä voit parantaa CSS-koodisi tyyppiturvallisuutta, luettavuutta, ylläpidettävyyttä ja suorituskykyä.

Vaikka selaintuki on yleisesti ottaen hyvä, on tärkeää testata koodisi eri selaimissa ja tarjota varamekanismeja vanhemmille selaimille, jotka eivät tue @property-sääntöä.

Noudattamalla tässä artikkelissa esitettyjä parhaita käytäntöjä voit valjastaa @property-säännön voiman luodaksesi todella upeita verkkokokemuksia.

Lisätutkimusta

• MDN Web Docs: @property
• Houdini.how: Opas CSS Houdiniin
• Voinko käyttää @property-sääntöä