Розкриття магії CSS: Глибоке занурення у @property та визначення типів користувацьких властивостей

Користувацькі властивості CSS (також відомі як змінні CSS) революціонізували спосіб, у який ми пишемо та підтримуємо CSS. Вони пропонують можливість повторного використання, гнучкість та легкість у підтримці, роблячи наші таблиці стилів більш динамічними та керованими. Однак донедавна користувацьким властивостям бракувало можливості визначати очікувані типи даних, що обмежувало їхній потенціал для складних стилів та анімацій. Зустрічайте правило @property — кардинальне нововведення, що дозволяє нам явно визначати тип, синтаксис та початкове значення наших користувацьких властивостей.

Що таке правило @property?

Правило @property є частиною родини API CSS Houdini, яка має на меті розкрити внутрішні механізми роботи CSS-рушія для розробників. Зокрема, @property є частиною API користувацьких властивостей та значень (Custom Properties and Values API). Воно дозволяє зареєструвати користувацьку властивість у браузері, вказавши її:

• name: Назва користувацької властивості (наприклад, --my-color).
• syntax: Очікуваний тип даних властивості (наприклад, <color>, <number>, <length>).
• inherits: Чи повинна властивість успадковувати своє значення від батьківського елемента (true або false).
• initial-value: Значення за замовчуванням для властивості, якщо не вказано інше значення.

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

Навіщо використовувати @property? Переваги

Використання @property пропонує кілька значних переваг:

1. Типова безпека та валідація

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

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

2. Плавні анімації та переходи

Справжня сила @property проявляється, коли мова заходить про анімації та переходи. Без нього анімація користувацьких властивостей може бути складною, оскільки браузер не знає, як інтерполювати між різними значеннями загального рядка. Вам може знадобитися вдаватися до хаків на JavaScript або використовувати обмежені можливості CSS для досягнення бажаного ефекту.

Визначаючи синтаксис користувацької властивості, ви повідомляєте браузеру, як інтерполювати між її значеннями під час анімацій та переходів. Наприклад, якщо ви визначите користувацьку властивість із синтаксисом <color>, браузер знатиме, що він повинен інтерполювати між кольорами, використовуючи плавний градієнт. Аналогічно, якщо ви визначите властивість із синтаксисом <number>, браузер знатиме, що він повинен інтерполювати між числами, використовуючи лінійну прогресію.

3. Покращена читабельність та підтримка коду

@property покращує читабельність та підтримку вашого CSS-коду, роблячи зрозумілим, який тип даних має представляти користувацька властивість. Це допомагає іншим розробникам (і вам у майбутньому) зрозуміти призначення властивості та як її слід використовувати.

Крім того, явно визначаючи початкове значення користувацької властивості, ви надаєте чітке резервне значення, яке буде використовуватися, якщо не вказано інше значення. Це може запобігти несподіваним візуальним збоям і зробити ваш код більш надійним.

4. Покращена продуктивність

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

Синтаксис @property

Правило @property визначається за допомогою наступного синтаксису:

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

              
                Copy
              
            
          

Розглянемо кожен з цих компонентів:

• --property-name: Це назва користувацької властивості, яку ви визначаєте. Вона повинна починатися з двох дефісів (--) і може містити будь-які дійсні символи ідентифікаторів CSS. Наприклад: --primary-color, --font-size, --spacing-unit.
• syntax: Це вказує очікуваний тип даних користувацької властивості. Він визначається за допомогою дескриптора типу значення CSS. Деякі поширені значення синтаксису включають:
• <color>: Представляє значення кольору (наприклад, #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Представляє числове значення (наприклад, 1, 3.14, -42).
• <length>: Представляє значення довжини (наприклад, 10px, 2em, 50vh, 1rem).
• <percentage>: Представляє відсоткове значення (наприклад, 50%, 100%, 25.5%).
• <string>: Представляє рядкове значення (наприклад, "Hello", "World").
• <image>: Представляє значення зображення (наприклад, url("image.jpg"), linear-gradient(...)).
• <angle>: Представляє значення кута (наприклад, 45deg, 0.5rad, 1turn).
• *: Представляє будь-яке дійсне значення CSS. Використовуйте з обережністю, оскільки це нівелює мету перевірки типів.
• Користувацький синтаксис: Дозволяє визначати складні синтаксиси за допомогою шаблонів, схожих на регулярні вирази.
• inherits: Це булеве значення визначає, чи повинна користувацька властивість успадковувати своє значення від батьківського елемента. Якщо встановлено true, властивість буде успадковуватися. Якщо встановлено false, властивість не буде успадковуватися і використовуватиме своє початкове значення, якщо воно не визначено явно на елементі. Значення за замовчуванням — false.
• initial-value: Це вказує значення за замовчуванням для користувацької властивості. Якщо властивість не встановлена явно на елементі, вона використовуватиме це значення. Початкове значення має бути дійсним відповідно до вказаного синтаксису. Якщо початкове значення не надано і не встановлено інше значення, властивість буде розглядатися так, ніби вона має своє невизначене значення.

Практичні приклади використання @property

Розглянемо кілька практичних прикладів використання @property у вашому CSS-коді.

Приклад 1: Анімація кольору

У цьому прикладі ми створимо користувацьку властивість з назвою --background-color і анімуємо її за допомогою переходів CSS. Ми визначимо синтаксис як <color>, щоб забезпечити правильну інтерполяцію кольорів браузером.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

У цьому коді:

• Ми визначаємо користувацьку властивість --background-color із синтаксисом <color>, встановлюємо inherits у false та початкове значення initial-value у білий колір (#ffffff).
• Ми застосовуємо цю властивість до background-color елемента .box за допомогою var(--background-color).
• Ми додаємо перехід до властивості --background-color, щоб вона плавно анімувалася при зміні значення.
• Ми змінюємо значення --background-color на синій (#007bff) при наведенні курсора, створюючи ефект плавного переходу кольору.

Приклад 2: Анімація числа

У цьому прикладі ми створимо користувацьку властивість з назвою --blur-radius і анімуємо її за допомогою переходів CSS. Ми визначимо синтаксис як <length>, щоб забезпечити правильну інтерполяцію значень довжини браузером. Цей приклад також демонструє популярний випадок використання довжин: значень у пікселях. Це можна легко перенести й на інші типи одиниць. Важливо також зазначити, що встановлення початкового значення на `0px` є критично важливим, оскільки браузеру потрібна базова одиниця для правильного виконання переходів.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

У цьому коді:

• Ми визначаємо користувацьку властивість --blur-radius із синтаксисом <length>, встановлюємо inherits у false та початкове значення initial-value у 0px.
• Ми застосовуємо цю властивість до функції filter: blur() елемента .image за допомогою var(--blur-radius).
• Ми додаємо перехід до властивості --blur-radius, щоб вона плавно анімувалася при зміні значення.
• Ми змінюємо значення --blur-radius на 5px при наведенні курсора, створюючи ефект плавного розмиття.

Приклад 3: Створення тематичного інтерфейсу з успадкованими властивостями

У цьому прикладі ми створимо простий тематичний інтерфейс, використовуючи успадковані користувацькі властивості. Ми визначимо користувацьку властивість з назвою --theme-color і встановимо її на елементі :root. Це дозволить усім дочірнім елементам успадковувати колір теми.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

У цьому коді:

• Ми визначаємо користувацьку властивість --theme-color із синтаксисом <color>, встановлюємо inherits у true та початкове значення initial-value у зелений колір (#4caf50).
• Ми встановлюємо значення --theme-color на елементі :root, роблячи його доступним для всіх елементів у документі.
• Ми використовуємо цю властивість для встановлення background-color елемента .button.
• Ми змінюємо значення --theme-color на темніший зелений (#388e3c) при наведенні курсора, демонструючи, як успадковані властивості можна легко оновити для зміни теми інтерфейсу.

Приклад 4: Визначення користувацького синтаксису

Властивість syntax також може приймати рядок для визначення більш специфічного шаблону, що особливо корисно для валідації складніших значень. Синтаксис використовує систему, схожу на регулярні вирази, задокументовану на MDN (Mozilla Developer Network). Цей приклад ілюструє, як визначити та використовувати користувацький синтаксис для позиції фону, що приймає як дійсні значення ключові слова `top`, `bottom`, `left` та `right`.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Тут `syntax` вказується за допомогою рядкового представлення дійсних ключових слів. Нотація `[ ]` визначає набір опцій, символ `|` розділяє їх, а `{1,2}` обмежує кількість дозволених значень одним або двома ключовими словами. Якщо використовується недійсне значення, наприклад `center`, браузер повернеться до `initial-value` — `top left`.

Підтримка браузерами

Підтримка @property браузерами загалом хороша в сучасних браузерах, включаючи:

• Chrome (версія 64 і вище)
• Edge (версія 79 і вище - на базі Chromium)
• Firefox (версія 72 і вище)
• Safari (версія 14.1 і вище)

Однак, завжди варто перевіряти найсвіжіші таблиці сумісності браузерів на сайтах, таких як Can I use..., щоб переконатися, що функції, які ви використовуєте, підтримуються в браузерах, якими, ймовірно, користуються ваші користувачі.

Для старих браузерів, які не підтримують @property, браузер проігнорує правило @property і просто розглядатиме користувацьку властивість як звичайну змінну CSS. Це означає, що анімації та переходи можуть не працювати, як очікувалося, але код все одно буде функціональним.

Найкращі практики використання @property

Ось кілька найкращих практик, які варто пам'ятати при використанні @property:

• Завжди визначайте синтаксис: Переконайтеся, що ви завжди визначаєте syntax ваших користувацьких властивостей для забезпечення типової безпеки та плавних анімацій і переходів.
• Встановлюйте початкове значення: Надавайте initial-value для визначення значення за замовчуванням та запобігання несподіваним візуальним збоям.
• Використовуйте описові назви: Вибирайте описові назви для ваших користувацьких властивостей, які чітко вказують на їхнє призначення та тип даних. Наприклад, використовуйте --button-background-color замість --color.
• Враховуйте успадкування: Вирішуйте, чи повинні ваші користувацькі властивості успадковуватися від батьківських елементів. Використовуйте inherits: true для властивостей, які повинні бути спільними для всього інтерфейсу, наприклад, кольори теми або розміри шрифтів.
• Ретельно тестуйте: Тестуйте ваш код у різних браузерах, щоб переконатися, що він працює, як очікувалося. Використовуйте резервні механізми для старих браузерів, які не підтримують @property.
• Документуйте ваші користувацькі властивості: Додавайте коментарі до вашого CSS-коду, щоб пояснити призначення та використання ваших користувацьких властивостей. Це полегшить розуміння вашого коду іншим розробникам (і вам у майбутньому). Інструменти, такі як Stylelint, також можна налаштувати для дотримання цих найкращих практик.

@property та CSS Houdini

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

Інші API Houdini включають:

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

Поєднуючи @property з іншими API Houdini, ви можете створювати справді потужні та кастомізовані CSS-рішення.

Висновок

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

Хоча підтримка браузерами загалом хороша, важливо тестувати ваш код у різних браузерах та надавати резервні механізми для старих браузерів, які не підтримують @property.

Дотримуючись найкращих практик, викладених у цій статті, ви зможете використати всю потужність @property для створення справді дивовижних веб-досвідів.

Для подальшого вивчення

• MDN Web Docs: @property
• Houdini.how: Посібник з CSS Houdini
• Чи можу я використовувати @property