CSS-i valdamine: Kohandatud atribuutide registreerimine @property abil

Kohandatud atribuudid (tuntud ka kui CSS-i muutujad) on muutnud revolutsiooniliselt CSS-i kirjutamise ja hooldamise viisi. Need võimaldavad meil määratleda korduvalt kasutatavaid väärtusi, muutes meie stiililehed paindlikumaks ja hooldatavamaks. Aga mis oleks, kui saaksite minna kaugemale lihtsalt väärtuste määratlemisest? Mis oleks, kui saaksite määratleda kohandatud atribuudi väärtuse tüübi koos selle algväärtuse ja pärimisega? Just siin tuleb mängu @property.

Mis on @property?

@property on CSS-i @-reegel, mis võimaldab teil kohandatud atribuudi selgesõnaliselt brauseris registreerida. See registreerimisprotsess annab brauserile teavet atribuudi eeldatava tüübi, selle algväärtuse ja selle kohta, kas see peaks pärima oma vanemelementilt. See avab mitmeid täiustatud võimalusi, sealhulgas:

• Tüübi kontroll: Tagab, et kohandatud atribuudile on määratud õige tüübi väärtus.
• Animatsioon: Võimaldab sujuvaid üleminekuid ja animatsioone teatud tüüpi kohandatud atribuutide jaoks, nagu numbrid või värvid.
• Vaikeväärtused: Pakub varuväärtuse, kui kohandatud atribuuti pole selgesõnaliselt määratletud.
• Pärimise juhtimine: Määrab, kas kohandatud atribuut pärib oma väärtuse oma vanemelementilt.

Mõelge sellele kui tüübikindluse lisamisele oma CSS-i muutujatele. See võimaldab teil luua jõulisemaid ja prognoositavamaid stiililehti.

@property süntaks

@property reegel järgib seda põhilis süntaksit:

@property --atribuudi-nimi {
  syntax: '';
  inherits: true | false;
  initial-value: <väärtus>;
}

Vaatame iga osa lähemalt:

• --atribuudi-nimi: Registreeritava kohandatud atribuudi nimi. See peab algama kahe sidekriipsuga (--).
• syntax: Määrab atribuudi eeldatava väärtusetüübi. See on tüübi kontrollimise ja animatsiooni jaoks ülioluline. Uurime saadaolevaid süntaksiväärtusi allpool üksikasjalikult.
• inherits: Boole'i väärtus, mis näitab, kas atribuut peaks pärima oma vanemelementilt. Kui pole määratud, on vaikeväärtuseks false.
• initial-value: Atribuudi vaikeväärtus, kui seda pole elemendil selgesõnaliselt määratud. See tagab, et alati on saadaval varuväärtus.

syntax deskriptori mõistmine

syntax deskriptor on @property reegli kõige olulisem osa. See ütleb brauserile, millist väärtust kohandatud atribuudi jaoks oodata. Siin on mõned levinud süntaksiväärtused:

• *: Võimaldab mis tahes väärtust. See on kõige lubavam süntaks ja kordab sisuliselt standardse CSS-i muutuja käitumist ilma registreerimiseta. Kasutage seda säästlikult.
• <length>: Ootab pikkuse väärtust (nt 10px, 2em, 50%). See võimaldab sujuvaid animatsioone erinevate pikkusväärtuste vahel.
• <number>: Ootab arvväärtust (nt 1, 3.14, -5). Kasulik numbriliste atribuutide, nagu läbipaistmatus või skaala, animeerimiseks.
• <percentage>: Ootab protsendiväärtust (nt 25%, 100%).
• <color>: Ootab värviväärtust (nt #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Võimaldab sujuvaid värviüleminekuid ja animatsioone.
• <image>: Ootab pildiväärtust (nt url(image.jpg), linear-gradient(...)).
• <integer>: Ootab täisarvuväärtust (nt 1, -10, 0).
• <angle>: Ootab nurga väärtust (nt 45deg, 0.5rad, 200grad). Kasulik rotatsioonide animeerimiseks.
• <time>: Ootab ajaväärtust (nt 1s, 500ms). Kasulik animatsioonikestuste või viivituste juhtimiseks kohandatud atribuutide kaudu.
• <resolution>: Ootab eraldusvõime väärtust (nt 300dpi, 96dpi).
• <transform-list>: Ootab teisendusfunktsioonide loendit (nt translateX(10px) rotate(45deg)). Võimaldab animeerida keerulisi teisendusi.
• <custom-ident>: Ootab kohandatud identifikaatorit (stringi). Sarnane enum-iga.
• <string>: Ootab stringiväärtust (nt "Hello World"). Olge sellega ettevaatlik, kuna stringide animeerimine üldiselt ei ole toetatud.
• Kohandatud süntaksid: Saate luua keerukamaid süntakseid, kasutades ülaltoodud kombinatsioone ja operaatoreid | (või), `[]` (rühmittamine), `+` (üks või rohkem), `*` (null või rohkem) ja `?` (null või üks). Näiteks: <length> | <percentage> võimaldab kas pikkust või protsendiväärtust.

Õige syntax valimine on @property täieliku võimsuse kasutamiseks hädavajalik.

Praktilised näited @property kohta

Vaatame mõningaid praktilisi näiteid selle kohta, kuidas @property oma CSS-is kasutada.

Näide 1: Taustavärvi animeerimine

Oletame, et soovite nupu taustavärvi animeerida. Saate kasutada @property, et registreerida taustavärvi jaoks kohandatud atribuut ja seejärel animeerida seda CSS-i üleminekute abil.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Punane */
}

Selles näites registreerime --bg-color kohandatud atribuudi süntaksiga <color>, mis tähendab, et see ootab värviväärtust. initial-value on seatud valgele (#fff). Kui nupu kohal hõljutatakse, muudetakse --bg-color punaseks (#f00) ja üleminek animeerib sujuvalt taustavärvi muutust.

Näide 2: Piirde raadiuse juhtimine numbriga

Saate kasutada @property elemendi piirde raadiuse juhtimiseks ja selle animeerimiseks.

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

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

Siin registreerime --border-radius kui <length>, tagades, et see aktsepteerib pikkuse väärtusi nagu px, em või %. Algväärtus on 0px. Kui hõljutate .rounded-box kohal, animeerib piirde raadius väärtuseni 20px.

Näide 3: Varju nihke animeerimine

Oletame, et soovite animeerida kasti varju horisontaalset nihet.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

Sel juhul registreeritakse --shadow-offset-x kui <length> ja selle algväärtus on 0px. Atribuut box-shadow kasutab seda kohandatud atribuuti oma horisontaalse nihke jaoks. Hõljutamisel animeerib nihe väärtuseni 10px.

Näide 4: <custom-ident> kasutamine teemade jaoks

Süntaks <custom-ident> võimaldab teil määratleda eelmääratletud stringiväärtuste komplekti, luues tõhusalt teie CSS-i muutujatele enumi. See on kasulik teemade loomiseks või eristatavate olekute juhtimiseks.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Vaike teema */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

Siin on --theme registreeritud süntaksiga <custom-ident>. Kuigi me ei loetle @property reeglis endas selgesõnaliselt lubatud identifikaatoreid, viitab kood sellele, et need on `light` ja `dark`. Seejärel kasutab CSS tingimuslikku loogikat (var(--theme) == light ? ... : ...), et rakendada erinevaid stiile vastavalt praegusele teemale. Elemendile klassi `dark-theme` lisamine lülitab teema tumedaks. Pange tähele, et tingimuslik loogika, mis kasutab funktsiooni `var()`, ei ole standardne CSS ja nõuab sageli eelprotsessoreid või JavaScripti. Standardsim lähenemisviis kasutaks CSS-i klasse ja kaskaadi:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript teema sisselülitamiseks */
/* document.body.setAttribute('data-theme', 'dark'); */

Selles muudetud näites kasutame teema juhtimiseks elemendil body atribuuti data-theme. JavaScripti (kommenteeritud) kasutataks atribuudi lülitamiseks olekute vahel `light` ja `dark`. See on CSS-i muutujatega teemade loomiseks jõulisem ja standardsim lähenemisviis.

@property kasutamise eelised

@property kasutamine pakub mitmeid eeliseid:

• Parem koodi loetavus ja hooldatavus: Määrates selgesõnaliselt kohandatud atribuudi eeldatava väärtusetüübi, muudate oma koodi arusaadavamaks ja vähem veaohtlikuks.
• Täiustatud animatsioonivõimalused: @property võimaldab sujuvaid üleminekuid ja animatsioone kohandatud atribuutide jaoks, avades uusi võimalusi dünaamiliste ja kaasahaaravate kasutajaliideste loomiseks.
• Parem jõudlus: Brauserid saavad registreeritud kohandatud atribuutide abil elementide renderdamist optimeerida, mis viib jõudluse paranemiseni.
• Tüübi turvalisus: Brauser kontrollib, kas määratud väärtus vastab deklareeritud süntaksile, vältides ootamatut käitumist ja muutes silumise lihtsamaks. See on eriti kasulik suurtes projektides, kus koodibaasi panustavad paljud arendajad.
• Vaikeväärtused: Kohandatud atribuudil on alati kehtiv väärtus, isegi kui seda pole selgesõnaliselt määratud, vältides vigu ja parandades teie CSS-i töökindlust.

Brauseri ühilduvus

2023. aasta lõpu seisuga on @property-l hea, kuid mitte universaalne brauseri tugi. Seda toetavad enamik kaasaegseid brausereid, sealhulgas Chrome, Firefox, Safari ja Edge. Vanemad brauserid ei pruugi seda aga toetada. Enne @property tootmises kasutamist kontrollige alati uusimat brauseri ühilduvuse teavet veebisaitidel, nagu Can I use....

Vanemate brauseritega toimetulemiseks saate kasutada funktsioonipäringuid (@supports), et pakkuda varustiile:

@supports (--property: value) {
  /* Stiilid, mis kasutavad @property */
}

@supports not (--property: value) {
  /* Varustiilid brauseritele, mis ei toeta @property */
}

Asendage --property ja value tegeliku kohandatud atribuudi ja selle väärtusega.

Millal kasutada @property

Kaaluge @property kasutamist järgmistel juhtudel:

• Kui peate kohandatud atribuute animeerima: See on @property peamine kasutusjuhtum. Atribuudi registreerimine õige süntaksiga võimaldab sujuvaid animatsioone.
• Kui soovite kohandatud atribuutide jaoks tüübi turvalisust jõustada: Kui soovite tagada, et kohandatud atribuut sisaldab alati konkreetse tüübi väärtust, kasutage selle registreerimiseks @property.
• Kui soovite kohandatud atribuudi jaoks vaikeväärtust pakkuda: Deskriptor initial-value võimaldab teil määrata varuväärtuse.
• Suurtes projektides: @property suurendab koodi hooldatavust ja hoiab ära vead, muutes selle eriti kasulikuks suurtele projektidele, kus on palju arendajaid.
• Korduskasutatavate komponentide või kujundussüsteemide loomisel: @property aitab tagada teie komponentide ühtluse ja prognoositavuse.

Levinud vead, mida vältida

• syntax deskriptori unustamine: Ilma syntax deskriptorita ei tea brauser eeldatavat väärtusetüüpi ja animatsioonid ei tööta õigesti.
• Vale syntax väärtuse kasutamine: Vale süntaksi valimine võib põhjustada ootamatut käitumist. Valige kindlasti süntaks, mis kajastab täpselt eeldatavat väärtusetüüpi.
• initial-value mitte esitamine: Ilma algväärtuseta võib kohandatud atribuut olla määratlemata, mis võib põhjustada vigu. Esitage alati mõistlik vaikeväärtus.
• * ülekasutamine süntaksina: Kuigi see on mugav, eitab * kasutamine tüübi kontrollimise ja animatsiooni eeliseid. Kasutage seda ainult siis, kui teil on tõesti vaja lubada mis tahes tüüpi väärtust.
• Brauseri ühilduvuse ignoreerimine: Kontrollige alati brauseri ühilduvust ja pakkuge vanemate brauserite jaoks varustiile.

@property ja CSS Houdini

@property on osa suuremast API-de komplektist, mida nimetatakse CSS Houdiniks. Houdini võimaldab arendajatel kasutada brauseri renderdusmootorit, andes neile enneolematu kontrolli stiilide ja paigutuse protsessi üle. Muud Houdini API-d hõlmavad:

• Paint API: Võimaldab teil määratleda kohandatud taustapilte ja ääri.
• Animation Worklet API: Pakub võimaluse luua suure jõudlusega animatsioone, mis töötavad otse brauseri komposiitorkeerus.
• Layout API: Võimaldab teil määratleda kohandatud paigutusalgoritme.
• Parser API: Pakub juurdepääsu brauseri CSS-i parserile.

@property on suhteliselt lihtne Houdini API, mida õppida, kuid see avab ukse täiustatud Houdini funktsioonide uurimiseks.

Järeldus

@property on võimas CSS-i @-reegel, mis avab kohandatud atribuutide jaoks täiustatud võimalused. Registreerides kohandatud atribuudid brauseris, saate jõustada tüübi turvalisuse, võimaldada sujuvaid animatsioone ja parandada oma CSS-i koodi üldist töökindlust. Kuigi brauseri tugi pole universaalne, muudavad @property kasutamise eelised, eriti suurtes projektides ja kujundussüsteemides, selle väärtuslikuks tööriistaks kaasaegses veebiarenduses. Võtke @property omaks ja viige oma CSS-i oskused järgmisele tasemele!