M

MLOG

Українська

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

Правило CSS @property: розкриваємо потенціал визначення типів користувацьких властивостей

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

Що таке користувацькі властивості CSS (змінні)?

Перш ніж зануритися у правило @property, важливо зрозуміти користувацькі властивості CSS, також відомі як змінні CSS. Користувацькі властивості дозволяють визначати значення, які можна повторно використовувати у вашому CSS, роблячи таблиці стилів легшими для підтримки та оновлення. Вони оголошуються за допомогою синтаксису --variable-name та доступні за допомогою функції var().

Приклад:


:root {
  --primary-color: #007bff; /* Глобально визначений основний колір */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

У цьому прикладі --primary-color та --secondary-color є користувацькими властивостями. Якщо вам потрібно змінити основний колір на всьому вашому вебсайті, вам потрібно оновити його лише в одному місці – у селекторі :root.

Обмеження базових користувацьких властивостей

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

Представляємо правило @property

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

Синтаксис правила @property

Базовий синтаксис правила @property виглядає так:


@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

Розглянемо кожну частину правила:

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

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

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

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


@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Зміна на зелений колір при наведенні */
}

У цьому прикладі ми визначаємо користувацьку властивість під назвою --brand-color і вказуємо, що її синтаксис — <color>. Ми також встановлюємо початкове значення #007bff (відтінок синього). Тепер, коли на .element наводять курсор, колір фону плавно переходить від синього до зеленого.

Приклад 2: Анімація користувацької довжини

Анімація довжин (наприклад, ширина, висота) — ще один поширений випадок використання правила @property.


@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Тут ми визначаємо користувацьку властивість під назвою --element-width і вказуємо, що її синтаксис — <length>. Початкове значення встановлено на 100px. Коли на .element наводять курсор, його ширина плавно переходить від 100px до 200px.

Приклад 3: Створення користувацького індикатора прогресу

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


@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

У цьому прикладі ми визначаємо користувацьку властивість під назвою --progress, яка представляє відсоток прогресу. Потім ми використовуємо функцію calc() для обчислення ширини індикатора прогресу на основі значення --progress. Встановлюючи атрибут data-progress на елементі .progress-bar, ми можемо контролювати рівень прогресу.

Приклад 4: Створення тем за допомогою користувацьких властивостей

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


@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Світла тема за замовчуванням */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Світла тема за замовчуванням */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Темна тема */
    --text-color: #ffffff;
}

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

Сумісність з браузерами

Станом на кінець 2023 року підтримка правила @property браузерами загалом хороша в сучасних браузерах, включаючи Chrome, Firefox, Safari, та Edge. Однак, завжди варто перевіряти останню інформацію про сумісність на таких сайтах, як Can I Use (caniuse.com), щоб переконатися, що ваша цільова аудиторія має достатню підтримку цієї функції.

Якщо вам потрібно підтримувати старіші браузери, які не підтримують правило @property, ви можете використовувати виявлення функцій за допомогою JavaScript та надавати резервні рішення. Наприклад, ви можете використовувати JavaScript для виявлення, чи підтримує браузер CSS.registerProperty (JavaScript API, пов'язаний з @property), а потім застосовувати альтернативні стилі, якщо він не підтримується.

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

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

Міркування щодо доступності

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

Також, переконайтеся, що ваш вибір кольорів забезпечує достатній контраст для користувачів з вадами зору. Ви можете використовувати такі інструменти, як WebAIM Contrast Checker, щоб перевірити, чи відповідають ваші комбінації кольорів рекомендаціям щодо доступності.

Глобальні аспекти

При розробці вебсайтів та додатків для глобальної аудиторії важливо враховувати культурні відмінності та локалізацію. Ось деякі речі, які слід пам'ятати при використанні правила @property у глобальному контексті:

Майбутнє користувацьких властивостей CSS та правила @property

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

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

Висновок

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

Додаткові матеріали