CSS apguve: pielāgoto īpašību reģistrācija ar @property

Pielāgotās īpašības (zināmas arī kā CSS mainīgie) ir revolucionizējušas to, kā mēs rakstām un uzturam CSS. Tās ļauj mums definēt atkārtoti izmantojamas vērtības, padarot mūsu stila lapas elastīgākas un uzturamākas. Bet, ja jūs varētu iet tālāk par vienkāršu vērtību definēšanu? Ko darīt, ja jūs varētu definēt vērtības tipu, kuru glabā pielāgotā īpašība, kopā ar tās sākotnējo vērtību un mantojuma darbību? Tieši tur nāk talkā @property.

Kas ir @property?

@property ir CSS at-rule, kas ļauj skaidri reģistrēt pielāgotu īpašību pārlūkprogrammā. Šis reģistrācijas process nodrošina pārlūkprogrammu ar informāciju par īpašības paredzamo tipu, tās sākotnējo vērtību un to, vai tai vajadzētu mantot no tās vecākelementa. Tas atver vairākas uzlabotas iespējas, tostarp:

• Tipu pārbaude: Nodrošina, ka pielāgotajai īpašībai ir piešķirta pareiza tipa vērtība.
• Animācija: Iespējo vienmērīgus pārejas un animācijas noteiktiem pielāgoto īpašību tipiem, piemēram, skaitļiem vai krāsām.
• Noklusējuma vērtības: Nodrošina rezerves vērtību, ja pielāgotā īpašība nav skaidri definēta.
• Mantojuma kontrole: Nosaka, vai pielāgotā īpašība manto savu vērtību no vecākelementa.

Domājiet par to kā par tipu drošības pievienošanu saviem CSS mainīgajiem. Tas ļauj jums izveidot robustākas un paredzamākas stila lapas.

@property sintakse

@property rule seko šai pamata sintaksei:

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

Sadalīsim katru daļu:

• --property-name: Pielāgotās īpašības nosaukums, kuru vēlaties reģistrēt. Tam ir jāsākas ar diviem defisēm (--).
• syntax: Definē īpašības paredzamo vērtības tipu. Tas ir ļoti svarīgi tipu pārbaudei un animācijai. Mēs detalizēti izpētīsim pieejamās sintakses vērtības.
• inherits: Būla vērtība, kas norāda, vai īpašībai vajadzētu mantot no tās vecākelementa. Ja nav norādīts, noklusē uz false.
• initial-value: Noklusējuma vērtība īpašībai, ja tā nav skaidri iestatīta elementā. Tas nodrošina, ka vienmēr ir pieejama rezerves vērtība.

Sintakses aprakstītāja izpratne

syntax aprakstītājs ir vissvarīgākā @property rule daļa. Tas pārlūkprogrammai norāda, kāda veida vērtība jāgaida pielāgotai īpašībai. Šeit ir dažas izplatītas sintakses vērtības:

• *: Atļauj jebkuru vērtību. Šī ir visatļaujošākā sintakse un būtībā atkārto standarta CSS mainīgā darbību bez reģistrācijas. Lietojiet to taupīgi.
• <length>: Sagaida garuma vērtību (piemēram, 10px, 2em, 50%). Tas iespējo vienmērīgas animācijas starp dažādām garuma vērtībām.
• <number>: Sagaida skaitlisku vērtību (piemēram, 1, 3.14, -5). Noderīgi skaitlisku īpašību, piemēram, caurspīdīguma vai mēroga, animēšanai.
• <percentage>: Sagaida procentuālu vērtību (piemēram, 25%, 100%).
• <color>: Sagaida krāsas vērtību (piemēram, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Iespējo vienmērīgas krāsu pārejas un animācijas.
• <image>: Sagaida attēla vērtību (piemēram, url(image.jpg), linear-gradient(...)).
• <integer>: Sagaida vesela skaitļa vērtību (piemēram, 1, -10, 0).
• <angle>: Sagaida leņķa vērtību (piemēram, 45deg, 0.5rad, 200grad). Noderīgi rotācijas animēšanai.
• <time>: Sagaida laika vērtību (piemēram, 1s, 500ms). Noderīgi, lai kontrolētu animācijas ilgumu vai aizkavēšanos, izmantojot pielāgotās īpašības.
• <resolution>: Sagaida izšķirtspējas vērtību (piemēram, 300dpi, 96dpi).
• <transform-list>: Sagaida transformācijas funkciju sarakstu (piemēram, translateX(10px) rotate(45deg)). Ļauj animēt sarežģītas transformācijas.
• <custom-ident>: Sagaida pielāgotu identifikatoru (virkni). Līdzīgi kā enum.
• <string>: Sagaida virknes vērtību (piemēram, "Sveika pasaule"). Esiet uzmanīgi ar to, jo virkņu animēšana parasti netiek atbalstīta.
• Pielāgotās sintakses: Varat izveidot sarežģītākas sintakses, izmantojot iepriekš minēto kombinācijas un operatorus | (vai), `[]` (grupēšana), `+` (viens vai vairāki), `*` (nulle vai vairāki) un `?` (nulle vai viens). Piemēram: <length> | <percentage> atļauj vai nu garuma vai procentuālo vērtību.

Pareizas syntax izvēle ir būtiska, lai izmantotu visu @property spēku.

@property praktiskie piemēri

Apskatīsim dažus praktiskus piemērus tam, kā lietot @property savā CSS.

Piemērs 1: fona krāsas animēšana

Pieņemsim, ka vēlaties animēt pogas fona krāsu. Jūs varat izmantot @property, lai reģistrētu pielāgotu īpašību fona krāsai un pēc tam animētu to, izmantojot CSS pārejas.

@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; /* Sarkana */
}

Šajā piemērā mēs reģistrējam --bg-color pielāgoto īpašību ar <color> sintaksi, kas nozīmē, ka tā sagaida krāsas vērtību. initial-value ir iestatīts uz baltu (#fff). Kad pele ir virs pogas, --bg-color tiek mainīts uz sarkanu (#f00), un pāreja vienmērīgi animē fona krāsas izmaiņas.

Piemērs 2: robežu rādiusa kontrole ar skaitli

Jūs varat izmantot @property, lai kontrolētu elementa robežu rādiusu un animētu to.

@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;
}

Šeit mēs reģistrējam --border-radius kā <length>, nodrošinot, ka tas pieņem garuma vērtības, piemēram, px, em vai %. Sākotnējā vērtība ir 0px. Pēc peles novietošanas virs .rounded-box, robežu rādiuss animējas līdz 20px.

Piemērs 3: ēnas nobīdes animēšana

Pieņemsim, ka vēlaties animēt kastes ēnas horizontālo nobīdi.

@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;
}

Šajā gadījumā --shadow-offset-x ir reģistrēts kā <length>, un tā sākotnējā vērtība ir 0px. Īpašība box-shadow izmanto šo pielāgoto īpašību savai horizontālajai nobīdei. Virs peles, nobīde animējas līdz 10px.

Piemērs 4: <custom-ident> izmantošana tematizēšanai

<custom-ident> sintakse ļauj definēt iepriekš noteiktu virkņu vērtību kopu, efektīvi izveidojot enum saviem CSS mainīgajiem. Tas ir noderīgi tematizēšanai vai atšķirīgu stāvokļu kontrolei.

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

:root {
  --theme: light; /* Noklusējuma tēma */
}

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

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

Šeit --theme ir reģistrēts ar <custom-ident> sintaksi. Lai gan mēs skaidri neuzskaitām atļautos identifikatorus @property regulā, kods norāda, ka tie ir light un dark. CSS pēc tam izmanto nosacīto loģiku (var(--theme) == light ? ... : ...), lai pielietotu dažādus stilus, pamatojoties uz pašreizējo tēmu. Klases dark-theme pievienošana elementam pārslēgs tēmu uz tumšu. Ņemiet vērā, ka nosacītā loģika, izmantojot var(), nav standarta CSS un bieži vien prasa priekšprocesorus vai JavaScript. Standarta pieeja būtu CSS klašu un kaskādes izmantošana:

@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, lai pārslēgtu tēmu */
/* document.body.setAttribute('data-theme', 'dark'); */

Šajā pārskatītajā piemērā mēs izmantojam data-theme atribūtu elementā body, lai kontrolētu tēmu. JavaScript (komentāros) tiktu izmantots, lai pārslēgtu atribūtu starp light un dark. Šī ir robustāka un standarta pieeja tematizēšanai ar CSS mainīgajiem.

@property izmantošanas priekšrocības

@property izmantošana piedāvā vairākas priekšrocības:

• Uzlabota koda lasāmība un uzturamība: Skaidri definējot paredzamo vērtības tipu pielāgotai īpašībai, jūs padarāt savu kodu saprotamāku un mazāk pakļautu kļūdām.
• Uzlabotas animācijas iespējas: @property iespējo vienmērīgas pārejas un animācijas pielāgotām īpašībām, paverot jaunas iespējas dinamisku un saistošu lietotāja interfeisu izveidei.
• Labāka veiktspēja: Pārlūkprogrammas var optimizēt elementu renderēšanu, izmantojot reģistrētas pielāgotās īpašības, kas noved pie uzlabotas veiktspējas.
• Tipu drošība: Pārlūkprogramma pārbauda, vai piešķirtā vērtība atbilst deklarētajai sintaksei, novēršot negaidītu uzvedību un atvieglojot atkļūdošanu. Tas ir īpaši noderīgi lielos projektos, kur daudzi izstrādātāji veido kodu.
• Noklusējuma vērtības: Nodrošinot, ka pielāgotai īpašībai vienmēr ir derīga vērtība, pat ja tā nav skaidri iestatīta, novērš kļūdas un uzlabo jūsu CSS robustumu.

Pārlūkprogrammu saderība

2023. gada beigās @property ir laba, bet ne universāla, pārlūkprogrammu atbalsta. To atbalsta lielākā daļa modernu pārlūkprogrammu, tostarp Chrome, Firefox, Safari un Edge. Tomēr vecākas pārlūkprogrammas to var neatbalstīt. Vienmēr pārbaudiet jaunāko informāciju par pārlūkprogrammu saderību vietnēs, piemēram, Vai es varu izmantot..., pirms izmantojat @property ražošanā.

Lai apstrādātu vecākas pārlūkprogrammas, varat izmantot funkciju vaicājumus (@supports), lai nodrošinātu rezerves stilus:

@supports (--property: value) {
  /* Stili, kas izmanto @property */
}

@supports not (--property: value) {
  /* Rezerves stili pārlūkprogrammām, kas neatbalsta @property */
}

Aizstājiet --property un value ar faktisku pielāgotu īpašību un tās vērtību.

Kad izmantot @property

Apsveriet iespēju izmantot @property šādos gadījumos:

• Kad jums ir jāanimē pielāgotās īpašības: Šis ir galvenais @property lietošanas gadījums. Īpašības reģistrēšana ar pareizo sintaksi iespējo vienmērīgas animācijas.
• Kad vēlaties nodrošināt tipu drošību pielāgotajām īpašībām: Ja vēlaties nodrošināt, ka pielāgotā īpašība vienmēr glabā noteikta tipa vērtību, izmantojiet @property, lai to reģistrētu.
• Kad vēlaties nodrošināt noklusējuma vērtību pielāgotai īpašībai: Aprakstītājs initial-value ļauj norādīt rezerves vērtību.
• Lielos projektos: @property uzlabo koda uzturamību un novērš kļūdas, padarot to īpaši izdevīgu lieliem projektiem ar daudziem izstrādātājiem.
• Veidojot atkārtoti izmantojamus komponentus vai dizaina sistēmas: @property var palīdzēt nodrošināt konsekvenci un paredzamību visiem jūsu komponentiem.

Izplatītākās kļūdas, no kurām jāizvairās

• Aizmirst sintakses aprakstītāju: Bez sintakses aprakstītāja pārlūkprogramma nezinās paredzamo vērtības tipu, un animācijas nedarbosies pareizi.
• Nepareizas syntax vērtības izmantošana: Nepareizas sintakses izvēle var izraisīt negaidītu uzvedību. Pārliecinieties, ka atlasāt sintaksi, kas precīzi atspoguļo paredzamo vērtības tipu.
• Nenodrošinot initial-value: Bez sākotnējās vērtības pielāgotā īpašība var būt nedefinēta, kas noved pie kļūdām. Vienmēr nodrošiniet saprātīgu noklusējuma vērtību.
• Pārmērīgi izmantojot * kā sintaksi: Lai gan ērti, izmantojot *, tiek atcelti tipu pārbaudes un animācijas ieguvumi. Izmantojiet to tikai tad, ja patiesi ir jāatļauj jebkura veida vērtība.
• Ignorējot pārlūkprogrammu saderību: Vienmēr pārbaudiet pārlūkprogrammu saderību un nodrošiniet rezerves stilus vecākām pārlūkprogrammām.

@property un CSS Houdini

@property ir daļa no lielāka API kopuma, ko sauc par CSS Houdini. Houdini ļauj izstrādātājiem izmantot pārlūkprogrammas renderēšanas dzinēju, nodrošinot viņiem vēl nebijušu kontroli pār stilu un izkārtojuma procesu. Citi Houdini API ietver:

• Paint API: Ļauj definēt pielāgotus fona attēlus un apmales.
• Animation Worklet API: Nodrošina veidu, kā izveidot augstas veiktspējas animācijas, kas darbojas tieši pārlūkprogrammas kompozīciju pavedienā.
• Layout API: Iespējo definēt pielāgotus izkārtojuma algoritmus.
• Parser API: Nodrošina piekļuvi pārlūkprogrammas CSS parserim.

@property ir salīdzinoši vienkāršs Houdini API, ko iemācīties, bet tas paver durvis uz vairākām uzlabotām Houdini funkcijām.

Secinājums

@property ir spēcīgs CSS at-rule, kas atver uzlabotas iespējas pielāgotām īpašībām. Reģistrējot pielāgotās īpašības ar pārlūkprogrammu, jūs varat nodrošināt tipu drošību, iespējot vienmērīgas animācijas un uzlabot kopējo sava CSS koda robustumu. Lai gan pārlūkprogrammu atbalsts nav universāls, @property izmantošanas priekšrocības, īpaši lielos projektos un dizaina sistēmās, padara to par vērtīgu rīku modernai tīmekļa izstrādei. Apgūstiet @property un paceliet savas CSS prasmes nākamajā līmenī!