Овладяване на CSS: Регистрация на потребителски свойства с @property

Потребителските свойства (известни още като CSS променливи) революционизираха начина, по който пишем и поддържаме CSS. Те ни позволяват да дефинираме повторно използваеми стойности, което прави нашите стилове по-гъвкави и лесни за поддръжка. Но какво ще стане, ако можете да отидете отвъд простото дефиниране на стойности? Какво ще стане, ако можете да дефинирате типа на стойността, която потребителското свойство съдържа, заедно с първоначалната му стойност и поведението при наследяване? Тук идва @property.

Какво е @property?

@property е CSS at-правило, което ви позволява изрично да регистрирате потребителско свойство в браузъра. Този процес на регистрация предоставя на браузъра информация за очаквания тип на свойството, неговата първоначална стойност и дали то трябва да наследява от родителския елемент. Това отключва няколко разширени възможности, включително:

• Проверка на типове: Гарантира, че на потребителското свойство е присвоена стойност от правилния тип.
• Анимация: Позволява плавни преходи и анимации за потребителски свойства от специфични типове, като числа или цветове.
• Стойности по подразбиране: Предоставя резервна стойност, ако потребителското свойство не е изрично дефинирано.
• Контрол на наследяването: Определя дали потребителското свойство наследява стойността си от родителския елемент.

Мислете за това като за добавяне на типова безопасност към вашите CSS променливи. Тя ви позволява да създавате по-стабилни и предвидими стилове.

Синтаксисът на @property

Правилото @property следва този основен синтаксис:

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

Нека разгледаме всяка част:

• --property-name: Името на потребителското свойство, което искате да регистрирате. То трябва да започва с две тирета (--).
• syntax: Дефинира очаквания тип стойност за свойството. Това е от решаващо значение за проверката на типове и анимациите. Ще разгледаме наличните синтактични стойности подробно по-долу.
• inherits: Булева стойност, която показва дали свойството трябва да наследява от родителския елемент. По подразбиране е false, ако не е указано.
• initial-value: Стойността по подразбиране за свойството, ако не е изрично зададено на елемент. Това гарантира, че винаги е налична резервна стойност.

Разбиране на дескриптора syntax

Дескрипторът syntax е най-важната част от правилото @property. Той казва на браузъра какъв вид стойност да очаква за потребителското свойство. Ето някои често срещани синтактични стойности:

• *: Позволява всякаква стойност. Това е най-позволяващият синтаксис и на практика повтаря поведението на стандартна CSS променлива без регистрация. Използвайте го пестеливо.
• <length>: Очаква стойност за дължина (напр. 10px, 2em, 50%). Това позволява плавни анимации между различни стойности на дължината.
• <number>: Очаква числова стойност (напр. 1, 3.14, -5). Полезно за анимиране на числови свойства като прозрачност или мащаб.
• <percentage>: Очаква стойност за процент (напр. 25%, 100%).
• <color>: Очаква стойност за цвят (напр. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Позволява плавни преходи и анимации на цветовете.
• <image>: Очаква стойност за изображение (напр. url(image.jpg), linear-gradient(...)).
• <integer>: Очаква цяло число (напр. 1, -10, 0).
• <angle>: Очаква стойност за ъгъл (напр. 45deg, 0.5rad, 200grad). Полезно за анимиране на ротации.
• <time>: Очаква стойност за време (напр. 1s, 500ms). Полезно за контрол на продължителността или закъснението на анимацията чрез потребителски свойства.
• <resolution>: Очаква стойност за резолюция (напр. 300dpi, 96dpi).
• <transform-list>: Очаква списък от трансформационни функции (напр. translateX(10px) rotate(45deg)). Позволява анимиране на сложни трансформации.
• <custom-ident>: Очаква персонализиран идентификатор (низ). Подобно на enum.
• <string>: Очаква стойност от тип низ (напр. "Hello World"). Бъдете внимателни с това, тъй като анимирането на низове обикновено не се поддържа.
• Персонализирани синтаксиси: Можете да създавате по-сложни синтаксиси, като комбинирате горните и операторите | (или), `[]` (групиране), `+` (едно или повече), `*` (нула или повече) и `?` (нула или едно). Например: <length> | <percentage> позволява както стойност за дължина, така и процентна стойност.

Избирането на правилния syntax е от съществено значение за използването на пълната мощност на @property.

Практически примери за @property

Нека разгледаме няколко практически примера как да използвате @property във вашия CSS.

Пример 1: Анимиране на цвят на фона

Да предположим, че искате да анимирате цвета на фона на бутон. Можете да използвате @property, за да регистрирате потребителско свойство за цвета на фона и след това да го анимирате с помощта на CSS преходи.

@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; /* Червено */
}

В този пример регистрираме потребителското свойство --bg-color със синтаксис <color>, което означава, че очаква стойност за цвят. initial-value е зададен на бяло (#fff). Когато бутонът бъде насочен с мишката, --bg-color се променя на червено (#f00), а преходът плавно анимира промяната на цвета на фона.

Пример 2: Контрол на радиуса на рамката с число

Можете да използвате @property, за да контролирате радиуса на рамката на елемент и да го анимирате.

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

Тук регистрираме --border-radius като <length>, което гарантира, че той приема стойности за дължина като px, em или %. Първоначалната стойност е 0px. При насочване на мишката върху .rounded-box, радиусът на рамката се анимира до 20px.

Пример 3: Анимиране на отместване на сянка

Да кажем, че искате да анимирате хоризонталното отместване на сянка на кутия.

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

В този случай --shadow-offset-x се регистрира като <length>, а първоначалната му стойност е 0px. Свойството box-shadow използва това потребителско свойство за своето хоризонтално отместване. При насочване с мишката, отместването се анимира до 10px.

Пример 4: Използване на <custom-ident> за теми

Синтаксисът <custom-ident> ви позволява да дефинирате набор от предварително зададени стойности от тип низ, като ефективно създавате enum за вашите CSS променливи. Това е полезно за тематизиране или контрол на различни състояния.

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

:root {
  --theme: light; /* Тема по подразбиране */
}

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

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

Тук --theme се регистрира със синтаксис <custom-ident>. Въпреки че не изброяваме изрично допустимите идентификатори в самото правило @property, кодът предполага, че те са `light` и `dark`. След това CSS използва условна логика (var(--theme) == light ? ... : ...), за да приложи различни стилове въз основа на текущата тема. Добавянето на класа `dark-theme` към елемент ще превключи темата към тъмна. Имайте предвид, че условната логика, използваща `var()`, не е стандартен CSS и често изисква препроцесори или JavaScript. По-стандартен подход би бил използването на CSS класове и каскадност:

@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 за превключване на темата */
/* document.body.setAttribute('data-theme', 'dark'); */

В този преработен пример използваме атрибут data-theme на елемента body, за да контролираме темата. JavaScript (коментиран) ще се използва за превключване на атрибута между `light` и `dark`. Това е по-стабилен и стандартен подход към тематизирането с CSS променливи.

Предимства на използването на @property

Използването на @property предлага няколко предимства:

• Подобрена четимост и поддръжка на кода: Като изрично дефинирате очаквания тип стойност за потребителско свойство, правите кода си по-разбираем и по-малко податлив на грешки.
• Разширени анимационни възможности: @property позволява плавни преходи и анимации за потребителски свойства, отваряйки нови възможности за създаване на динамични и ангажиращи потребителски интерфейси.
• По-добра производителност: Браузърите могат да оптимизират рендирането на елементи, използващи регистрирани потребителски свойства, което води до подобрена производителност.
• Типова безопасност: Браузърът валидира, че присвоената стойност съответства на декларирания синтаксис, предотвратявайки неочаквано поведение и улеснявайки отстраняването на грешки. Това е особено полезно в големи проекти, където много разработчици допринасят към кодовата база.
• Стойности по подразбиране: Осигуряването, че едно потребителско свойство винаги има валидна стойност, дори ако не е изрично зададено, предотвратява грешки и подобрява стабилността на вашия CSS.

Съвместимост с браузъри

Към края на 2023 г. @property има добра, но не универсална поддръжка от браузърите. Тя се поддържа в повечето модерни браузъри, включително Chrome, Firefox, Safari и Edge. По-старите браузъри обаче може да не я поддържат. Винаги проверявайте най-актуалната информация за съвместимост с браузъри на уебсайтове като Can I use..., преди да използвате @property в продукция.

За да се справите с по-стари браузъри, можете да използвате заявки за функции (@supports), за да предоставите резервни стилове:

@supports (--property: value) {
  /* Стилoве, които използват @property */
}

@supports not (--property: value) {
  /* Резервни стилове за браузъри, които не поддържат @property */
}

Заменете --property и value с действително потребителско свойство и неговата стойност.

Кога да използвате @property

Обмислете използването на @property в следните сценарии:

• Когато трябва да анимирате потребителски свойства: Това е основният случай на употреба на @property. Регистрирането на свойството с правилния синтаксис позволява плавни анимации.
• Когато искате да наложите типова безопасност за потребителски свойства: Ако искате да гарантирате, че потребителското свойство винаги съдържа стойност от определен тип, използвайте @property, за да го регистрирате.
• Когато искате да предоставите стойност по подразбиране за потребителско свойство: Дескрипторът initial-value ви позволява да посочите резервна стойност.
• В големи проекти: @property подобрява поддръжката на кода и предотвратява грешки, което го прави особено полезно за големи проекти с много разработчици.
• При създаване на повторно използваеми компоненти или дизайн системи: @property може да помогне за осигуряване на последователност и предвидимост в рамките на вашите компоненти.

Често срещани грешки, които трябва да се избягват

• Забравяне на дескриптора syntax: Без дескриптора syntax браузърът няма да знае очаквания тип стойност и анимациите няма да работят правилно.
• Използване на грешна стойност за syntax: Избирането на грешен синтаксис може да доведе до неочаквано поведение. Уверете се, че сте избрали синтаксиса, който точно отразява очаквания тип стойност.
• Непредоставяне на initial-value: Без първоначална стойност, потребителското свойство може да бъде недефинирано, което води до грешки. Винаги предоставяйте смислена стойност по подразбиране.
• Свръхупотреба на * като синтаксис: Въпреки че е удобно, използването на * обезсилва предимствата на проверката на типове и анимациите. Използвайте го само когато наистина трябва да позволите всякакъв тип стойност.
• Игнориране на съвместимостта с браузъри: Винаги проверявайте съвместимостта с браузъри и предоставяйте резервни стилове за по-стари браузъри.

@property и CSS Houdini

@property е част от по-голям набор от API-та, наречени CSS Houdini. Houdini позволява на разработчиците да се възползват от механизма за рендиране на браузъра, давайки им безпрецедентен контрол върху процеса на стилизация и оформление. Други Houdini API включват:

• Paint API: Позволява ви да дефинирате персонализирани фонови изображения и рамки.
• Animation Worklet API: Осигурява начин за създаване на високопроизводителни анимации, които се изпълняват директно в нишката на композиране на браузъра.
• Layout API: Позволява ви да дефинирате персонализирани алгоритми за оформление.
• Parser API: Предоставя достъп до парсера на CSS на браузъра.

@property е сравнително лесен Houdini API за научаване, но отваря вратата за изследване на по-разширени Houdini функции.

Заключение

@property е мощно CSS at-правило, което отключва разширени възможности за потребителски свойства. Като регистрирате потребителски свойства в браузъра, можете да наложите типова безопасност, да активирате плавни анимации и да подобрите цялостната стабилност на вашия CSS код. Въпреки че поддръжката от браузърите не е универсална, ползите от използването на @property, особено в големи проекти и дизайн системи, го правят ценен инструмент за съвременна уеб разработка. Прегърнете @property и издигнете вашите CSS умения на следващото ниво!