Zvládnutie CSS: Registrácia vlastných vlastností pomocou @property

Vlastné vlastnosti (známe aj ako CSS premenné) spôsobili revolúciu v tom, ako píšeme a udržiavame CSS. Umožňujú nám definovať znovupoužiteľné hodnoty, čím sa naše štýly stávajú flexibilnejšími a ľahšie udržiavateľnými. Ale čo keby ste mohli ísť nad rámec jednoduchého definovania hodnôt? Čo keby ste mohli definovať typ hodnoty, ktorú vlastná vlastnosť obsahuje, spolu s jej počiatočnou hodnotou a správaním pri dedení? Práve tu prichádza na rad @property.

Čo je @property?

@property je CSS at-rule, ktoré vám umožňuje explicitne zaregistrovať vlastnú vlastnosť v prehliadači. Tento proces registrácie poskytuje prehliadaču informácie o očakávanom type vlastnosti, jej počiatočnej hodnote a o tom, či by mala dediť od svojho rodičovského prvku. To odomyká niekoľko pokročilých možností, vrátane:

• Kontrola typov: Zabezpečuje, že vlastnej vlastnosti je priradená hodnota správneho typu.
• Animácia: Umožňuje plynulé prechody a animácie pre vlastné vlastnosti špecifických typov, ako sú čísla alebo farby.
• Predvolené hodnoty: Poskytuje záložnú hodnotu, ak vlastná vlastnosť nie je explicitne definovaná.
• Kontrola dedičnosti: Určuje, či vlastná vlastnosť dedí svoju hodnotu od svojho rodičovského prvku.

Predstavte si to ako pridanie typovej bezpečnosti k vašim CSS premenným. Umožňuje vám vytvárať robustnejšie a predvídateľnejšie štýly.

Syntax @property

Pravidlo @property sa riadi touto základnou syntaxou:

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

Rozoberme si jednotlivé časti:

• --property-name: Názov vlastnej vlastnosti, ktorú chcete zaregistrovať. Musí začínať dvoma spojovníkmi (--).
• syntax: Definuje očakávaný typ hodnoty pre vlastnosť. Toto je kľúčové pre kontrolu typov a animáciu. Dostupné hodnoty syntaxe si podrobne preberieme nižšie.
• inherits: Booleovská hodnota určujúca, či má vlastnosť dediť od svojho rodičovského prvku. Ak nie je špecifikovaná, predvolená hodnota je false.
• initial-value: Predvolená hodnota pre vlastnosť, ak nie je na prvku explicitne nastavená. Tým sa zabezpečí, že záložná hodnota je vždy k dispozícii.

Pochopenie deskriptora syntax

Deskriptor syntax je najdôležitejšou časťou pravidla @property. Hovorí prehliadaču, aký druh hodnoty má očakávať pre vlastnú vlastnosť. Tu sú niektoré bežné hodnoty syntaxe:

• *: Povoľuje akúkoľvek hodnotu. Toto je najbenevolentnejšia syntax a v podstate replikuje správanie štandardnej CSS premennej bez registrácie. Používajte ju s mierou.
• <length>: Očakáva hodnotu dĺžky (napr. 10px, 2em, 50%). Umožňuje plynulé animácie medzi rôznymi hodnotami dĺžky.
• <number>: Očakáva číselnú hodnotu (napr. 1, 3.14, -5). Užitočné pre animáciu číselných vlastností ako priehľadnosť alebo mierka.
• <percentage>: Očakáva percentuálnu hodnotu (napr. 25%, 100%).
• <color>: Očakáva hodnotu farby (napr. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Umožňuje plynulé prechody farieb a animácie.
• <image>: Očakáva hodnotu obrázka (napr. url(image.jpg), linear-gradient(...)).
• <integer>: Očakáva celočíselnú hodnotu (napr. 1, -10, 0).
• <angle>: Očakáva hodnotu uhla (napr. 45deg, 0.5rad, 200grad). Užitočné pre animáciu rotácií.
• <time>: Očakáva časovú hodnotu (napr. 1s, 500ms). Užitočné pre ovládanie trvania alebo oneskorenia animácie prostredníctvom vlastných vlastností.
• <resolution>: Očakáva hodnotu rozlíšenia (napr. 300dpi, 96dpi).
• <transform-list>: Očakáva zoznam transformačných funkcií (napr. translateX(10px) rotate(45deg)). Umožňuje animovať zložité transformácie.
• <custom-ident>: Očakáva vlastný identifikátor (reťazec). Podobné ako enum.
• <string>: Očakáva reťazcovú hodnotu (napr. "Hello World"). Buďte opatrní, pretože animácia reťazcov všeobecne nie je podporovaná.
• Vlastné syntaxe: Môžete vytvárať zložitejšie syntaxe pomocou kombinácií vyššie uvedených a operátorov | (alebo), `[]` (zoskupovanie), `+` (jeden alebo viac), `*` (nula alebo viac) a `?` (nula alebo jeden). Napríklad: <length> | <percentage> povoľuje buď hodnotu dĺžky, alebo percentuálnu hodnotu.

Výber správnej syntax je nevyhnutný pre využitie plnej sily @property.

Praktické príklady @property

Pozrime sa na niekoľko praktických príkladov, ako používať @property vo vašom CSS.

Príklad 1: Animácia farby pozadia

Predpokladajme, že chcete animovať farbu pozadia tlačidla. Môžete použiť @property na registráciu vlastnej vlastnosti pre farbu pozadia a potom ju animovať pomocou CSS prechodov.

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

V tomto príklade registrujeme vlastnú vlastnosť --bg-color so syntaxou <color>, čo znamená, že očakáva hodnotu farby. initial-value je nastavená na bielu (#fff). Keď sa kurzorom prejde ponad tlačidlo, --bg-color sa zmení na červenú (#f00) a prechod plynule animuje zmenu farby pozadia.

Príklad 2: Ovládanie zaoblenia okrajov číslom

Môžete použiť @property na ovládanie zaoblenia okrajov prvku a animovať ho.

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

Tu registrujeme --border-radius ako <length>, čím zabezpečujeme, že akceptuje hodnoty dĺžky ako px, em alebo %. Počiatočná hodnota je 0px. Pri prejdení kurzorom ponad .rounded-box sa zaoblenie okrajov animuje na 20px.

Príklad 3: Animácia posunutia tieňa

Povedzme, že chcete animovať horizontálne posunutie tieňa.

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

V tomto prípade je --shadow-offset-x zaregistrovaná ako <length> a jej počiatočná hodnota je 0px. Vlastnosť box-shadow používa túto vlastnú vlastnosť pre svoje horizontálne posunutie. Pri prejdení kurzorom sa posunutie animuje na 10px.

Príklad 4: Použitie <custom-ident> pre témy

Syntax <custom-ident> vám umožňuje definovať sadu preddefinovaných reťazcových hodnôt, čím efektívne vytvárate enum pre vaše CSS premenné. Toto je užitočné pre témy alebo ovládanie odlišných stavov.

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

:root {
  --theme: light; /* Default Theme */
}

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

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

Tu je --theme zaregistrovaná so syntaxou <custom-ident>. Hoci explicitne neuvádzame povolené identifikátory v samotnom pravidle @property, kód naznačuje, že sú to `light` a `dark`. CSS potom používa podmienenú logiku (var(--theme) == light ? ... : ...) na aplikovanie rôznych štýlov na základe aktuálnej témy. Pridanie triedy `dark-theme` k prvku prepne tému na tmavú. Všimnite si, že podmienená logika s použitím `var()` nie je štandardné CSS a často vyžaduje preprocesory alebo JavaScript. Štandardnejší prístup by bol použitie CSS tried a kaskádovania:

@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 to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

V tomto revidovanom príklade používame atribút data-theme na prvku body na ovládanie témy. JavaScript (zakomentovaný) by sa použil na prepínanie atribútu medzi `light` a `dark`. Toto je robustnejší a štandardnejší prístup k témam s CSS premennými.

Výhody používania @property

Používanie @property ponúka niekoľko výhod:

• Zlepšená čitateľnosť a udržiavateľnosť kódu: Explicitným definovaním očakávaného typu hodnoty pre vlastnú vlastnosť robíte váš kód zrozumiteľnejším a menej náchylným na chyby.
• Rozšírené možnosti animácie: @property umožňuje plynulé prechody a animácie pre vlastné vlastnosti, čím otvára nové možnosti pre vytváranie dynamických a pútavých používateľských rozhraní.
• Lepší výkon: Prehliadače môžu optimalizovať vykresľovanie prvkov pomocou registrovaných vlastných vlastností, čo vedie k zlepšeniu výkonu.
• Typová bezpečnosť: Prehliadač overuje, či priradená hodnota zodpovedá deklarovanej syntaxi, čím predchádza neočakávanému správaniu a uľahčuje ladenie. Toto je obzvlášť užitočné vo veľkých projektoch, kde do kódovej základne prispieva mnoho vývojárov.
• Predvolené hodnoty: Zabezpečenie, že vlastná vlastnosť má vždy platnú hodnotu, aj keď nie je explicitne nastavená, predchádza chybám a zlepšuje robustnosť vášho CSS.

Kompatibilita s prehliadačmi

Koncom roka 2023 má @property dobrú, ale nie univerzálnu podporu v prehliadačoch. Je podporovaná vo väčšine moderných prehliadačov vrátane Chrome, Firefox, Safari a Edge. Staršie prehliadače ju však nemusia podporovať. Pred použitím @property v produkcii si vždy overte najnovšie informácie o kompatibilite prehliadačov na stránkach ako Can I use....

Na ošetrenie starších prehliadačov môžete použiť dopyty na funkcie (@supports) na poskytnutie záložných štýlov:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

Nahraďte --property a value skutočnou vlastnou vlastnosťou a jej hodnotou.

Kedy použiť @property

Zvážte použitie @property v nasledujúcich scenároch:

• Keď potrebujete animovať vlastné vlastnosti: Toto je hlavný prípad použitia pre @property. Registrácia vlastnosti so správnou syntaxou umožňuje plynulé animácie.
• Keď chcete vynútiť typovú bezpečnosť pre vlastné vlastnosti: Ak chcete zabezpečiť, že vlastná vlastnosť bude vždy obsahovať hodnotu špecifického typu, použite @property na jej registráciu.
• Keď chcete poskytnúť predvolenú hodnotu pre vlastnú vlastnosť: Deskriptor initial-value vám umožňuje špecifikovať záložnú hodnotu.
• Vo veľkých projektoch: @property zlepšuje udržiavateľnosť kódu a predchádza chybám, čo je obzvlášť výhodné pre veľké projekty s mnohými vývojármi.
• Pri vytváraní znovupoužiteľných komponentov alebo dizajnových systémov: @property môže pomôcť zabezpečiť konzistentnosť a predvídateľnosť naprieč vašimi komponentmi.

Bežné chyby, ktorým sa treba vyhnúť

• Zabudnutie na deskriptor syntax: Bez deskriptora syntax prehliadač nebude vedieť očakávaný typ hodnoty a animácie nebudú fungovať správne.
• Použitie nesprávnej hodnoty syntax: Výber nesprávnej syntaxe môže viesť k neočakávanému správaniu. Uistite sa, že ste vybrali syntax, ktorá presne odráža očakávaný typ hodnoty.
• Neposkytnutie initial-value: Bez počiatočnej hodnoty môže byť vlastná vlastnosť nedefinovaná, čo vedie k chybám. Vždy poskytnite rozumnú predvolenú hodnotu.
• Nadmerné používanie * ako syntaxe: Hoci je to pohodlné, použitie * neguje výhody kontroly typov a animácie. Používajte ho len vtedy, keď skutočne potrebujete povoliť akýkoľvek typ hodnoty.
• Ignorovanie kompatibility s prehliadačmi: Vždy si overte kompatibilitu s prehliadačmi a poskytnite záložné štýly pre staršie prehliadače.

@property a CSS Houdini

@property je súčasťou väčšej sady API nazývaných CSS Houdini. Houdini umožňuje vývojárom zasahovať do vykresľovacieho jadra prehliadača, čo im dáva bezprecedentnú kontrolu nad procesom štýlovania a rozloženia. Medzi ďalšie Houdini API patria:

• Paint API: Umožňuje vám definovať vlastné obrázky pozadia a okraje.
• Animation Worklet API: Poskytuje spôsob, ako vytvárať vysoko výkonné animácie, ktoré bežia priamo vo vlákne kompozítora prehliadača.
• Layout API: Umožňuje vám definovať vlastné algoritmy rozloženia.
• Parser API: Poskytuje prístup k CSS parseru prehliadača.

@property je relatívne jednoduché Houdini API na naučenie, ale otvára dvere k preskúmaniu pokročilejších funkcií Houdini.

Záver

@property je výkonné CSS at-rule, ktoré odomyká pokročilé možnosti pre vlastné vlastnosti. Registráciou vlastných vlastností v prehliadači môžete vynútiť typovú bezpečnosť, povoliť plynulé animácie a zlepšiť celkovú robustnosť vášho CSS kódu. Hoci podpora v prehliadačoch nie je univerzálna, výhody používania @property, najmä vo veľkých projektoch a dizajnových systémoch, z neho robia cenný nástroj pre moderný webový vývoj. Osvojte si @property a posuňte svoje CSS zručnosti na ďalšiu úroveň!