Опанування 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; /* Red */
}

У цьому прикладі ми реєструємо власну властивість --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; /* Default Theme */
}

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 to toggle the theme */
/* 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) {
  /* Styles that use @property */
}

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

Замініть --property і value фактичною власною властивістю та її значенням.

Коли використовувати @property

Розгляньте можливість використання @property у наступних сценаріях:

• Коли вам потрібно анімувати власні властивості: Це основний варіант використання @property. Реєстрація властивості з правильним синтаксисом дозволяє плавну анімацію.
• Коли ви хочете забезпечити безпеку типів для власних властивостей: Якщо ви хочете переконатися, що власна властивість завжди містить значення певного типу, використовуйте @property, щоб зареєструвати її.
• Коли ви хочете надати значення за замовчуванням для власної властивості: Дескриптор initial-value дозволяє вказати резервне значення.
• У великих проектах: @property покращує зручність обслуговування коду та запобігає помилкам, що робить його особливо корисним для великих проектів із багатьма розробниками.
• Під час створення багаторазових компонентів або систем дизайну: @property може допомогти забезпечити узгодженість і передбачуваність ваших компонентів.

Поширені помилки, яких слід уникати

• Забуття дескриптора syntax: Без дескриптора syntax браузер не знатиме очікуваний тип значення, і анімація не працюватиме належним чином.
• Використання неправильного значення syntax: Вибір неправильного синтаксису може призвести до несподіваної поведінки. Обов'язково виберіть синтаксис, який точно відображає очікуваний тип значення.
• Не надання initial-value: Без початкового значення власна властивість може бути невизначеною, що призведе до помилок. Завжди надавайте розумне значення за замовчуванням.
• Надмірне використання * як синтаксису: Хоча це зручно, використання * нівелює переваги перевірки типу та анімації. Використовуйте його лише тоді, коли вам справді потрібно дозволити будь-який тип значення.
• Ігнорування сумісності з браузерами: Завжди перевіряйте сумісність із браузерами та надавайте резервні стилі для старіших браузерів.

@property і CSS Houdini

@property є частиною більшого набору API під назвою CSS Houdini. Houdini дозволяє розробникам використовувати механізм рендерингу браузера, надаючи їм безпрецедентний контроль над процесом стилізації та макету. Інші API Houdini включають:

• Paint API: Дозволяє визначати власні фонові зображення та рамки.
• Animation Worklet API: Надає спосіб створення високопродуктивних анімацій, які запускаються безпосередньо в потоці композитора браузера.
• Layout API: Дозволяє визначати власні алгоритми макету.
• Parser API: Надає доступ до CSS-парсера браузера.

@property є відносно простим Houdini API для вивчення, але він відкриває двері для вивчення більш розширених функцій Houdini.

Висновок

@property - це потужне CSS at-правило, яке відкриває розширені можливості для власних властивостей. Реєструючи власні властивості в браузері, ви можете забезпечити безпеку типів, увімкнути плавну анімацію та покращити загальну надійність вашого CSS-коду. Хоча підтримка браузерами не є універсальною, переваги використання @property, особливо у великих проектах і системах дизайну, роблять його цінним інструментом для сучасної веб-розробки. Прийміть @property і підніміть свої навички CSS на новий рівень!