CSS @property: Mukautettujen ominaisuuksien tyyppimäärittelyn ja validoinnin hallinta

Jatkuvasti kehittyvässä web-kehityksen maailmassa kärjessä pysyminen edellyttää uusien teknologioiden ja tekniikoiden omaksumista, jotka parantavat tehokkuutta, ylläpidettävyyttä ja yleistä käyttäjäkokemusta. CSS:n mukautetut ominaisuudet, jotka tunnetaan myös CSS-muuttujina, ovat mullistaneet tavan, jolla hallitsemme ja ohjaamme tyylejä. @property-säännön myötä CSS saa vieläkin tehokkaamman työkalun: kyvyn määritellä ja validoida näitä mukautettuja ominaisuuksia, mikä johtaa vankempaan ja ennustettavampaan tyylittelyyn.

Mitä on CSS @property?

@property-sääntö antaa kehittäjille mahdollisuuden määritellä mukautettujen ominaisuuksien tyypin, syntaksin ja muita ominaisuuksia. Ajattele sitä tapana antaa rakennetta ja validointia CSS-muuttujillesi. Ennen @property-sääntöä CSS-muuttujat olivat pohjimmiltaan vain tekstimerkkijonoja, jotka saattoivat sisältää mitä tahansa. Tämä rakenteen puute saattoi johtaa virheisiin, mikä teki virheenkorjauksesta haastavampaa ja heikensi yleistä suunnittelun johdonmukaisuutta. @property vastaa näihin ongelmiin tarjoamalla mekanismin, jolla voidaan hallita mukautetuille ominaisuuksille annettavien arvojen tyyppejä.

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

@property-säännön käytön edut ovat lukuisat ja ne edistävät suoraan parempia web-kehityksen käytäntöjä:

• Parannettu koodin ylläpidettävyys: Määrittelemällä nimenomaisesti mukautettujen ominaisuuksien tyypit ja käyttäytymisen teet koodistasi itsetokumentoivampaa ja helpommin ymmärrettävää. Muut kehittäjät (tai tulevaisuuden sinä) ymmärtävät nopeasti, miten mukautettua ominaisuutta on tarkoitus käyttää.
• Parempi suunnittelun johdonmukaisuus: Validointi varmistaa, että mukautetuille ominaisuuksille annetaan vain kelvollisia arvoja. Tämä auttaa ylläpitämään johdonmukaista visuaalista ilmettä verkkosivustollasi tai sovelluksessasi.
• Vankkuus ja virheiden ehkäisy: Virheelliset arvot hylätään, mikä estää odottamattomia tyyliongelmia ja vähentää virheenkorjaukseen kuluvaa aikaa.
• Dynaaminen tyylittely: @property mahdollistaa paremman integraation JavaScriptin kanssa, jolloin voit ohjelmallisesti hallita ja päivittää CSS-muuttujiasi luottavaisin mielin, tietäen että arvot ovat kelvollisia.
• Parempi automaattinen täydennys ja kehittäjäkokemus: Koodieditorit voivat tarjota älykkäämpää automaattista täydennystä ja koodivihjeitä, mikä auttaa kehittäjiä kirjoittamaan CSS:ää nopeammin ja tarkemmin.
• Optimoitu suorituskyky: Vaikka suorituskykyvaikutus on yleensä pieni, validointi voi joskus johtaa pieniin selaimen tekemiin optimointeihin.

@property-säännön ydinkomponentit

@property-sääntö koostuu useista avainkomponenteista, jotka määrittelevät, miten mukautettu ominaisuus käyttäytyy.

--property-name

Tämä on määriteltävän mukautetun ominaisuuden nimi. Sen on alettava kahdella väliviivalla (--), kuten CSS:n mukautetuille ominaisuuksille on standardi.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax-kuvaaja määrittelee sallitun tyypin tai mallin mukautetun ominaisuuden arvoille. Se käyttää osajoukkoa CSS-syntaksista ja voi saada erilaisia arvoja, kuten:

• <color>: Edustaa väriarvoa (esim. red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Edustaa pituusarvoa (esim. 10px, 5em, 20%).
• <number>: Edustaa numeerista arvoa (esim. 10, 3.14).
• <percentage>: Edustaa prosenttiarvoa (esim. 50%).
• <url>: Edustaa URL-osoitetta (esim. url('image.jpg')).
• <integer>: Edustaa kokonaislukuarvoa (esim. 10, -5).
• <angle>: Edustaa kulma-arvoa (esim. 45deg, 0.5turn).
• <time>: Edustaa aika-arvoa (esim. 2s, 200ms).
• <string>: Edustaa merkkijonoarvoa.
• <image>: Edustaa kuva-arvoa (sama kuin url).
• *: Hyväksyy minkä tahansa kelvollisen CSS-arvon. Tämä on hyvin salliva lähestymistapa, ja sitä tulisi käyttää varoen.
• Yhdistetyt tyypit: Voit yhdistää useita tyyppejä välilyönneillä erotettuina luetteloina (esim. <length> <length> <length> kolmen pituusarvon määrittämiseksi) tai käyttää '|'-symbolia salliaksesi minkä tahansa luetelluista tyypeistä (esim. <length> | <percentage> tukeaksesi joko pituutta tai prosenttiosuutta).
• Mukautetut syntaksit: Mukautetut syntaksit monimutkaisempiin skenaarioihin ovat usein tuettuja mukautetuilla toteutuksilla, vaikka ne tyypillisesti kuvataankin regex-tyylisellä syntaksilla, kuten [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits-kuvaaja määrittää, periytyykö mukautetun ominaisuuden arvo sen vanhempielementiltä. Oletusarvoisesti mukautetut ominaisuudet eivät periydy. Tätä käyttäytymistä voidaan ohjata boolean-arvolla: true tai false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value-kuvaaja asettaa mukautetun ominaisuuden oletusarvon, jos sitä ei ole nimenomaisesti määritelty CSS:ssä. Tämä tarjoaa vara-arvon, kun ominaisuutta ei ole määritetty, samalla tavalla kuin standardien CSS-ominaisuuksien käyttäytyminen.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Käytännön esimerkkejä

Sukelletaan muutamiin käytännön esimerkkeihin havainnollistamaan, miten @property-sääntöä käytetään tehokkaasti.

Esimerkki 1: Väriominaisuuden määrittely

Tässä esimerkissä määrittelemme mukautetun ominaisuuden --primary-color edustamaan pääväriä design-järjestelmässämme. Määritämme, että se hyväksyy vain väriarvoja.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Kelvollinen */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Kelvollinen */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Esimerkki 2: Pituusominaisuuden määrittely

Tässä määrittelemme mukautetun ominaisuuden --spacing elementtien välisen etäisyyden hallintaan, hyväksyen pituusarvoja. Tämä esimerkki osoittaa selvästi initial-value-arvon asettamisen arvon koko sivuston oletuksena. Tämä on erityisen hyödyllistä käytettäessä design-järjestelmää, jossa etäisyyksien oletusarvot on määritelty.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Esimerkki 3: Kokonaislukuominaisuuden määrittely

Tämä esimerkki määrittelee mukautetun ominaisuuden ruudukkoasettelun sarakkeiden lukumäärälle ja validoi, että arvo on kokonaisluku.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Esimerkki 4: Ominaisuuksien periytyminen

Tässä määrittelemme mukautetun ominaisuuden, joka *periytyy*. Body-elementtiin asetettu font-size-ominaisuus 1rem vaikuttaa kaikkiin sen lapsielementteihin, ellei sitä korvata.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Korvaa perityn arvon */
}

            

              
                Copy
              
            
          

Esimerkki 5: Tyyppien yhdistäminen

Käyttämällä '|'-operaattoria voimme yhdistää tyyppejä. Tässä hyväksymme joko length- tai percentage-arvon varjon siirtymälle.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

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

Jotta saat parhaan hyödyn @property-säännöstä, noudata näitä parhaita käytäntöjä:

• Määrittele ominaisuudet keskitetysti: Ryhmittele @property-määrittelysi omaan CSS-tiedostoon tai osioon, usein päätyylitiedostosi alkuun tai design-järjestelmätiedoston sisään. Tämä edistää organisointia ja helpottaa mukautettujen ominaisuuksien hallintaa.
• Käytä kuvaavia ominaisuuksien nimiä: Valitse nimiä, jotka ilmaisevat selvästi kunkin mukautetun ominaisuuden tarkoituksen (esim. --primary-button-color, --header-font-size). Tämä parantaa luettavuutta ja ymmärrettävyyttä.
• Tarjoa kattava dokumentaatio: Dokumentoi mukautetut ominaisuutesi, mukaan lukien niiden syntaksi, käyttö ja mahdolliset rajoitukset. Tämä dokumentaatio voidaan sisällyttää kommentteina CSS:n yhteyteen tai erilliseen tyylioppaaseen.
• Valitse oikea syntaksi: Valitse huolellisesti sopiva syntax kullekin ominaisuudelle. Oikean syntaksin käyttö estää virheitä ja varmistaa, että annetut arvot ovat kelvollisia.
• Harkitse periytymistä huolellisesti: Päätä, tuleeko ominaisuuden periä arvonsa vanhempielementiltään. Tämä riippuu ominaisuuden luonteesta ja siitä, miten sitä tulisi soveltaa suunnittelussasi.
• Käytä initial-value-arvoa strategisesti: Aseta initial-value kaikille mukautetuille ominaisuuksille, jotka vaativat oletusarvon. Tämä tarjoaa vara-arvon ja varmistaa, että tyyliä sovelletaan, vaikka ominaisuutta ei olisi nimenomaisesti asetettu.
• Hyödynnä design-järjestelmiä: Integroi @property design-järjestelmääsi ylläpitääksesi johdonmukaisuutta ja parantaaksesi tiimisi kehityksen työnkulkua. Käyttämällä sitä yhdessä muiden komponenttien kanssa rakennat vankempia ja modulaarisempia malleja, mikä on usein tavoitteena luotaessa komponentteja globaaliin käyttöön.
• Testaa perusteellisesti: Testaa mukautettuja ominaisuuksiasi ja niiden käyttäytymistä eri selaimissa ja laitteissa varmistaaksesi yhteensopivuuden ja johdonmukaisen käyttäjäkokemuksen. Selaimien välinen testaus on kriittinen vaihe, koska property-tuki ei ole vielä yleisesti toteutettu.

Selainyhteensopivuus

Lokakuun 26. päivänä 2023 @property-säännön tuki vaihtelee selaimittain. Chrome, Edge ja Safari tarjoavat hyvän tuen, kun taas Firefoxin tuki on rajoitettu. Tarkista aina ajantasainen selainyhteensopivuus resursseista, kuten Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)).

Tärkeitä huomioita selainyhteensopivuudesta:

• Ominaisuuksien tunnistus: Käytä ominaisuuksien tunnistustekniikoita käsitelläksesi siististi selaimia, jotka eivät tue @property-sääntöä. Voit käyttää CSS-ominaisuuden tarkistusta tai JavaScript-ominaisuuksien tunnistusta soveltaaksesi vaihtoehtoisia tyylejä tai polyfillejä.
• Progressiivinen parantaminen: Suunnittele verkkosivustosi perustyylillä, joka toimii ilman @property-sääntöä. Paranna sitten suunnittelua asteittain lisäämällä @property-tuki yhteensopiviin selaimiin.
• Polyfillit ja vara-arvot: Harkitse polyfillien käyttöä tai vara-arvojen tarjoamista selaimille, jotka eivät täysin tue @property-sääntöä. Tämä voi tarkoittaa tavallisten CSS-muuttujien käyttöä tai esikäsittelyä SASS:n, LESS:n tai muiden menetelmien avulla.

CSS @property -säännön käyttö JavaScriptin kanssa

Yksi CSS:n mukautettujen ominaisuuksien suurimmista eduista on niiden kyky tulla käsitellyksi JavaScriptillä, mikä mahdollistaa dynaamisen tyylittelyn ja parannetut käyttäjäkokemukset. @property tehostaa tätä kykyä tehden CSS:n ja JavaScriptin välisestä integraatiosta entistä tehokkaamman ja ennustettavamman.

Näin voit olla vuorovaikutuksessa @property-säännöllä määriteltyjen mukautettujen ominaisuuksien kanssa JavaScriptissä:

1. Mukautetun ominaisuuden arvon hakeminen: Käytä getPropertyValue()-metodia hakeaksesi mukautetun ominaisuuden arvon.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // esim., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Mukautetun ominaisuuden arvon asettaminen: Käytä setProperty()-metodia asettaaksesi mukautetun ominaisuuden arvon. `@property`-määrittelyn syntax-parametrin ansiosta JavaScript-pohjainen asettaminen voi laukaista arvon validoinnin selaimessa.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Esimerkki: Dynaaminen värinmuutos JavaScriptillä

Havainnollistetaan, kuinka luodaan dynaaminen värinmuutos käyttämällä JavaScriptiä ja @property-sääntöä.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

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

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Voi perustua johonkin logiikkaan/syötteeseen
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

Tässä esimerkissä napin napsauttaminen muuttaa napin taustaväriä muokkaamalla --button-color-mukautettua ominaisuutta JavaScriptin avulla.

Kansainvälistäminen (i18n) ja CSS @property

CSS @property voi olla arvokas työkalu luotaessa verkkosovelluksia, jotka tukevat eri kieliä ja aluekohtaisia asetuksia. Näin sitä voidaan soveltaa kansainvälistämiseen:

• Typografia: Määrittele mukautettuja ominaisuuksia fonttikoolle, rivivälille ja fonttiperheille, jolloin voit mukauttaa tekstin ulkoasua valitun kielen mukaan.
• Asettelu: Hyödynnä ominaisuuksia välistykselle, marginaaleille ja täytteille ottaaksesi huomioon vaihtelut tekstin suunnassa (esim. vasemmalta oikealle vs. oikealta vasemmalle) ja erilaiset merkkileveydet.
• Värit: Käytä ominaisuuksia käyttöliittymäelementtien väreille, kuten nappien väreille, tekstin väreille ja taustaväreille. Näitä voidaan säätää vastaamaan kulttuurisia mieltymyksiä tai tiettyjen alueiden suunnitteluohjeita.
• Tekstin suunta: Käytä mukautettua ominaisuutta ohjaamaan tekstin suuntaa (esim. ltr, rtl) ja muokkaamaan asettelua sen mukaisesti.

Esimerkki: Fonttikokojen mukauttaminen kielen perusteella

Tässä esimerkissä näytämme, kuinka otsikoiden fonttikokoa mukautetaan valitun kielen mukaan. Lähestymistapa käyttäisi JavaScript-kirjastoa sopivan kielen määrittämiseen ja mukautettujen ominaisuuksien asettamiseen.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Aseta sitten arvo dynaamisesti JavaScriptissä tunnistetun kielen perusteella:

            
// Olettaen, että on olemassa globaali muuttuja tai funktio käyttäjän kielen saamiseksi
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Säädä japanin kielelle
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Oletus
}

            

              
                Copy
              
            
          

Saavutettavuusnäkökohdat

Kun työskentelet @property-säännön kanssa, on tärkeää pitää saavutettavuus mielessä:

• Värikontrasti: Varmista riittävä värikontrasti tekstin ja taustan välillä. Käytä mukautettuja ominaisuuksia väreille, jotta suunnittelua on helppo päivittää vastaamaan kontrastivaatimuksia.
• Tekstin koko: Salli käyttäjien hallita tekstin kokoa. Käytä suhteellisia yksiköitä (rem, em) ja mukautettuja ominaisuuksia helpottaaksesi fontin skaalaamista.
• Kohdistusindikaattorit: Mukauta kohdistusindikaattoreita, jotta ne ovat selvästi näkyvissä. Käytä mukautettuja ominaisuuksia kohdistuksen ääriviivojen värin ja tyylin hallintaan.
• ARIA-attribuutit: Varmista, että elementeillä on asianmukaiset ARIA-attribuutit, kun käytät mukautettuja ominaisuuksia tilojen tai käyttäytymisen hallintaan.
• Näppäimistönavigointi: Varmista, että verkkosivustosi on helposti navigoitavissa näppäimistöllä, erityisesti jos mukautettuja ominaisuuksia käytetään interaktiivisten elementtien hallintaan.

Selainyhteensopivuusnäkökohdat ja kiertotavat

Vaikka @property on tehokas työkalu, muista, että selaintuki ei ole vielä yleisesti toteutettu. Sinun tulisi käyttää selainyhteensopivia tekniikoita lieventääksesi tuen puutteen vaikutusta.

• Progressiivinen parantaminen: Suunnittele tyylisi perus-CSS-muuttujilla ja käytä sitten `@property`-sääntöä lisäominaisuuksiin tuetuissa selaimissa.
• Ominaisuuksien tunnistus: Käytä ominaisuuksien tunnistusmenetelmiä määrittääksesi, tukeeko selain @property-sääntöä, ennen kuin sovellat sitä käyttäviä tyylejä. Yksinkertainen tarkistus voidaan tehdä JavaScriptillä.
• CSS-vara-arvot: Tarjoa vara-arvoja ominaisuuksille, joita ei tueta. Tämä voidaan tehdä asettamalla ominaisuudet suoraan tai käyttämällä eri muuttujia tuetuille ja ei-tuetuille selaimille.
• Esikäsittelijät: Hyödynnä CSS-esikäsittelijöitä, kuten Sass tai Less, kääntääksesi korkeamman tason rakenteet standardi-CSS:ksi, jota voidaan käyttää selaimissa, joilla ei ole täyttä `@property`-tukea. Vaikka tämä lisää ylimääräisen vaiheen, hyödyt usein ylittävät haitat.

Esimerkki CSS-vara-arvosta:

            
.element {
  --base-color: #333; /* Oletusarvo selaimille ilman @property-tukea */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Ominaisuuden tunnistus @property-säännölle */
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Lisää monimutkaisempaa tyylittelyä tähän hyödyntäen @property-sääntöä */
}

            

              
                Copy
              
            
          

Työkalut ja kirjastot

Useat työkalut ja kirjastot voivat auttaa @property-säännön kanssa työskentelyssä:

• PostCSS-laajennukset: Laajennukset, kuten `postcss-custom-properties` ja `postcss-custom-properties-experimental`, voivat auttaa muuntamaan mukautettuja ominaisuuksia ja tarjoamaan tukea vanhemmille selaimille muuntamalla `@property`-määrittelyt vastaaviksi CSS-säännöiksi.
• Stylelint: Integroi stylelint ja mukautetut säännöt tai laajennukset validoimaan mukautettujen ominaisuuksiesi käyttöä ja rakennetta.
• Design-järjestelmäkehykset: Integroi @property suosittuihin design-järjestelmäkehyksiin, kuten Ant Design, Material UI ja Bootstrap, varmistaaksesi suunnittelun johdonmukaisuuden ja tarjotaksesi kehittäjille sujuvamman kokemuksen.

Yhteenveto

CSS @property on tehokas lisä web-kehityksen työkalupakkiin, tuoden rakenteen, validoinnin ja dynaamiset kyvyt mukautetuille ominaisuuksille. Määrittelemällä CSS-muuttujiesi tyypin ja käyttäytymisen voit parantaa koodin ylläpidettävyyttä, parantaa suunnittelun johdonmukaisuutta ja luoda vankempia ja ennustettavampia tyylittelyratkaisuja.

Selaintuen parantuessa @property-säännön sisällyttäminen projekteihisi on yhä tärkeämpää. Omaksumalla tässä oppaassa esitetyt parhaat käytännöt voit hyödyntää tämän uuden ominaisuuden edut ja kirjoittaa tehokkaampaa, ylläpidettävämpää ja skaalautuvampaa CSS:ää. Ota @property haltuun ja muuta web-kehityksen työnkulkuasi!

Lisätietoa

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property