Mistrovství v CSS: Registrace vlastních vlastností pomocí @property

Vlastní vlastnosti (také známé jako CSS proměnné) způsobily revoluci v tom, jak píšeme a udržujeme CSS. Umožňují nám definovat opakovaně použitelné hodnoty, díky čemuž jsou naše styly flexibilnější a lépe udržovatelné. Ale co kdybyste mohli jít dál než jen definovat hodnoty? Co kdybyste mohli definovat typ hodnoty, kterou vlastní vlastnost obsahuje, spolu s její počáteční hodnotou a chováním dědičnosti? To je místo, kde přichází na řadu @property.

Co je @property?

@property je CSS at-rule, která vám umožňuje explicitně zaregistrovat vlastní vlastnost v prohlížeči. Tento registrační proces poskytuje prohlížeči informace o očekávaném typu vlastnosti, její počáteční hodnotě a o tom, zda by měla dědit z nadřazeného prvku. To odemyká několik pokročilých možností, včetně:

• Kontrola typů: Zajišťuje, že vlastní vlastnosti je přiřazena hodnota správného typu.
• Animace: Umožňuje plynulé přechody a animace pro vlastní vlastnosti specifických typů, jako jsou čísla nebo barvy.
• Výchozí hodnoty: Poskytuje náhradní hodnotu, pokud vlastní vlastnost není explicitně definována.
• Řízení dědičnosti: Určuje, zda vlastní vlastnost dědí svou hodnotu z nadřazeného prvku.

Představte si to jako přidání typové bezpečnosti do vašich CSS proměnných. Umožňuje vám vytvářet robustnější a předvídatelnější styly.

Syntaxe @property

Pravidlo @property se řídí touto základní syntaxí:

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

Pojďme si rozebrat jednotlivé části:

• --property-name: Název vlastní vlastnosti, kterou chcete zaregistrovat. Musí začínat dvěma pomlčkami (--).
• syntax: Definuje očekávaný typ hodnoty pro vlastnost. To je klíčové pro kontrolu typů a animaci. Dostupné hodnoty syntaxe prozkoumáme podrobně níže.
• inherits: Booleovská hodnota označující, zda by vlastnost měla dědit z nadřazeného prvku. Pokud není uvedeno, výchozí hodnota je false.
• initial-value: Výchozí hodnota vlastnosti, pokud není explicitně nastavena na prvku. To zajišťuje, že je vždy k dispozici náhradní hodnota.

Porozumění deskriptoru syntax

Deskriptor syntax je nejdůležitější částí pravidla @property. Říká prohlížeči, jaký druh hodnoty má pro vlastní vlastnost očekávat. Zde jsou některé běžné hodnoty syntaxe:

• *: Umožňuje jakoukoli hodnotu. Toto je nejpovolnější syntaxe a v podstatě replikuje chování standardní CSS proměnné bez registrace. Používejte ji střídmě.
• <length>: Očekává hodnotu délky (např. 10px, 2em, 50%). To umožňuje plynulé animace mezi různými hodnotami délky.
• <number>: Očekává numerickou hodnotu (např. 1, 3.14, -5). Užitečné pro animaci numerických vlastností, jako je průhlednost nebo měřítko.
• <percentage>: Očekává hodnotu procenta (např. 25%, 100%).
• <color>: Očekává hodnotu barvy (např. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Umožňuje plynulé barevné přechody a animace.
• <image>: Očekává hodnotu obrázku (např. url(image.jpg), linear-gradient(...)).
• <integer>: Očekává celočíselnou hodnotu (např. 1, -10, 0).
• <angle>: Očekává hodnotu úhlu (např. 45deg, 0.5rad, 200grad). Užitečné pro animaci rotací.
• <time>: Očekává hodnotu času (např. 1s, 500ms). Užitečné pro řízení trvání animací nebo zpoždění pomocí vlastních vlastností.
• <resolution>: Očekává hodnotu rozlišení (např. 300dpi, 96dpi).
• <transform-list>: Očekává seznam transformačních funkcí (např. translateX(10px) rotate(45deg)). Umožňuje animaci komplexních transformací.
• <custom-ident>: Očekává vlastní identifikátor (řetězec). Podobné jako enum.
• <string>: Očekává hodnotu řetězce (např. "Hello World"). Buďte s tím opatrní, protože animace řetězců obecně není podporována.
• Vlastní syntaxe: Můžete vytvářet složitější syntaxe pomocí kombinací výše uvedeného a operátorů | (nebo), `[]` (seskupování), `+` (jeden nebo více), `*` (nula nebo více) a `?` (nula nebo jedna). Například: <length> | <percentage> umožňuje buď délku, nebo hodnotu procenta.

Výběr správné syntax je zásadní pro využití plné síly @property.

Praktické příklady @property

Podívejme se na některé praktické příklady použití @property ve vašem CSS.

Příklad 1: Animace barvy pozadí

Předpokládejme, že chcete animovat barvu pozadí tlačítka. Můžete použít @property k registraci vlastní vlastnosti pro barvu pozadí a poté ji animovat pomocí CSS přechodů.

@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; /* Červená */
}

V tomto příkladu registrujeme vlastní vlastnost --bg-color se syntaxí <color>, což znamená, že očekává hodnotu barvy. initial-value je nastavena na bílou (#fff). Když se na tlačítko najede myší, změní se --bg-color na červenou (#f00) a přechod plynule animuje změnu barvy pozadí.

Příklad 2: Řízení poloměru ohraničení pomocí čísla

Můžete použít @property k ovládání poloměru ohraničení prvku a jeho animaci.

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

Zde registrujeme --border-radius jako <length>, čímž zajistíme, že akceptuje hodnoty délky jako px, em nebo %. Počáteční hodnota je 0px. Při najetí myší na .rounded-box se poloměr ohraničení animuje na 20px.

Příklad 3: Animace posunu stínu

Řekněme, že chcete animovat horizontální posun stínu prvku.

@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 případě je --shadow-offset-x registrována jako <length> a její počáteční hodnota je 0px. Vlastnost box-shadow používá tuto vlastní vlastnost pro svůj horizontální posun. Při najetí myší se posun animuje na 10px.

Příklad 4: Použití <custom-ident> pro vytváření motivů

Syntaxe <custom-ident> umožňuje definovat sadu předdefinovaných řetězcových hodnot, čímž efektivně vytváří enum pro vaše CSS proměnné. To je užitečné pro vytváření motivů nebo ovládání odlišných stavů.

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

:root {
  --theme: light; /* Výchozí motiv */
}

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

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

Zde je --theme registrován se syntaxí <custom-ident>. I když explicitně nevypisujeme povolené identifikátory v samotném pravidle @property, kód naznačuje, že jsou to `light` a `dark`. CSS pak používá podmíněnou logiku (var(--theme) == light ? ... : ...) k použití různých stylů na základě aktuálního motivu. Přidáním třídy `dark-theme` k prvku přepnete motiv na tmavý. Všimněte si, že podmíněná logika používající `var()` není standardní CSS a často vyžaduje preprocesory nebo JavaScript. Standardnější přístup by používal CSS třídy a kaskádování:

@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 pro přepínání motivu */
/* document.body.setAttribute('data-theme', 'dark'); */

V tomto revidovaném příkladu používáme atribut data-theme na prvku body k ovládání motivu. JavaScript (zakomentovaný) by se použil k přepínání atributu mezi `light` a `dark`. Toto je robustnější a standardnější přístup k vytváření motivů pomocí CSS proměnných.

Výhody používání @property

Používání @property nabízí několik výhod:

• Vylepšená čitelnost a udržovatelnost kódu: Explicitním definováním očekávaného typu hodnoty pro vlastní vlastnost učiníte svůj kód srozumitelnějším a méně náchylným k chybám.
• Rozšířené možnosti animace: @property umožňuje plynulé přechody a animace pro vlastní vlastnosti, otevírá nové možnosti pro vytváření dynamických a poutavých uživatelských rozhraní.
• Lepší výkon: Prohlížeče mohou optimalizovat vykreslování prvků pomocí registrovaných vlastních vlastností, což vede ke zlepšení výkonu.
• Typová bezpečnost: Prohlížeč ověřuje, zda se přiřazená hodnota shoduje s deklarovanou syntaxí, čímž se předchází neočekávanému chování a usnadňuje se ladění. To je zvláště užitečné ve velkých projektech, kde ke kódové základně přispívá mnoho vývojářů.
• Výchozí hodnoty: Zajištění, že vlastní vlastnost má vždy platnou hodnotu, i když není explicitně nastavena, předchází chybám a zlepšuje robustnost vašeho CSS.

Kompatibilita prohlížečů

Koncem roku 2023 má @property dobrou, ale ne univerzální, podporu prohlížečů. Je podporována ve většině moderních prohlížečů, včetně Chrome, Firefox, Safari a Edge. Starší prohlížeče ji však nemusí podporovat. Před použitím @property v produkci si vždy ověřte nejnovější informace o kompatibilitě prohlížečů na webových stránkách, jako je Can I use....

Pro starší prohlížeče můžete použít dotazy na funkce (@supports) k poskytnutí náhradních stylů:

@supports (--property: value) {
  /* Styly, které používají @property */
}

@supports not (--property: value) {
  /* Náhradní styly pro prohlížeče, které nepodporují @property */
}

Nahraďte --property a value skutečnou vlastní vlastností a její hodnotou.

Kdy použít @property

Zvažte použití @property v následujících scénářích:

• Když potřebujete animovat vlastní vlastnosti: Toto je primární případ použití pro @property. Registrace vlastnosti se správnou syntaxí umožňuje plynulé animace.
• Když chcete vynutit typovou bezpečnost pro vlastní vlastnosti: Pokud chcete zajistit, aby vlastní vlastnost vždy obsahovala hodnotu určitého typu, použijte @property k její registraci.
• Když chcete poskytnout výchozí hodnotu pro vlastní vlastnost: Deskriptor initial-value vám umožňuje zadat náhradní hodnotu.
• Ve velkých projektech: @property zlepšuje udržovatelnost kódu a předchází chybám, takže je zvláště výhodná pro velké projekty s mnoha vývojáři.
• Při vytváření opakovaně použitelných komponent nebo návrhových systémů: @property může pomoci zajistit konzistenci a předvídatelnost napříč vašimi komponentami.

Běžné chyby, kterým je třeba se vyhnout

• Zapomenutí deskriptoru syntax: Bez deskriptoru syntax prohlížeč nebude znát očekávaný typ hodnoty a animace nebudou fungovat správně.
• Použití nesprávné hodnoty syntax: Výběr nesprávné syntaxe může vést k neočekávanému chování. Ujistěte se, že jste vybrali syntaxi, která přesně odráží očekávaný typ hodnoty.
• Neposkytnutí initial-value: Bez počáteční hodnoty může být vlastní vlastnost nedefinovaná, což vede k chybám. Vždy poskytněte rozumnou výchozí hodnotu.
• Nadměrné používání * jako syntaxe: I když je to pohodlné, používání * popírá výhody kontroly typů a animace. Používejte ji pouze tehdy, když skutečně potřebujete povolit jakýkoli typ hodnoty.
• Ignorování kompatibility prohlížečů: Vždy zkontrolujte kompatibilitu prohlížečů a poskytněte náhradní styly pro starší prohlížeče.

@property a CSS Houdini

@property je součástí větší sady API nazvaných CSS Houdini. Houdini umožňuje vývojářům využít vykreslovací engine prohlížeče a poskytuje jim bezprecedentní kontrolu nad procesem stylingu a rozvržení. Mezi další Houdini API patří:

• Paint API: Umožňuje definovat vlastní obrázky na pozadí a ohraničení.
• Animation Worklet API: Poskytuje způsob, jak vytvářet vysoce výkonné animace, které běží přímo ve vlákně kompozitoru prohlížeče.
• Layout API: Umožňuje definovat vlastní algoritmy rozvržení.
• Parser API: Poskytuje přístup k CSS parseru prohlížeče.

@property je relativně jednoduché Houdini API, které se lze naučit, ale otevírá dveře k prozkoumání pokročilejších funkcí Houdini.

Závěr

@property je výkonná CSS at-rule, která odemyká pokročilé možnosti pro vlastní vlastnosti. Registrací vlastních vlastností v prohlížeči můžete vynutit typovou bezpečnost, povolit plynulé animace a zlepšit celkovou robustnost svého CSS kódu. I když podpora prohlížečů není univerzální, výhody používání @property, zejména ve velkých projektech a návrhových systémech, z ní činí cenný nástroj pro moderní webový vývoj. Osvojte si @property a posuňte své CSS dovednosti na vyšší úroveň!