Опановуємо правило CSS @when: Умовне застосування стилів для динамічного веб-дизайну

Правило CSS @when, що є частиною специфікації CSS Conditional Rules Module Level 5, пропонує потужний спосіб умовного застосування стилів на основі певних умов. Воно виходить за рамки традиційних медіа-запитів, дозволяючи більш детально контролювати стилізацію залежно від розмірів контейнерів, кастомних властивостей і навіть стану елементів. Це може значно покращити адаптивність та гнучкість вашого веб-дизайну, що призведе до кращого досвіду користувача на різних пристроях та в різних контекстах.

Розуміння основ правила @when

По суті, правило @when надає механізм для виконання блоку CSS-стилів тільки тоді, коли виконується певна умова. Це схоже на оператори if у мовах програмування. Давайте розберемо синтаксис:

@when condition {
  /* CSS rules to apply when the condition is true */
}

Умова може базуватися на різних факторах, зокрема:

• Запити до контейнерів: Стилізація елементів на основі розміру їхнього батьківського елемента, а не області перегляду.
• Кастомні стани: Реакція на взаємодію користувача або стани застосунку.
• CSS-змінні: Застосування стилів на основі значення кастомних властивостей CSS.
• Запити діапазону: Перевірка, чи потрапляє значення у певний діапазон.

Сила @when полягає в його здатності створювати справді компонентну стилізацію. Ви можете інкапсулювати логіку стилів всередині компонента і гарантувати, що вона застосовуватиметься тільки тоді, коли компонент відповідає певним критеріям, незалежно від загальної верстки сторінки.

Запити до контейнерів з @when

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

Базовий приклад запиту до контейнера

Спочатку потрібно оголосити контейнер. Це можна зробити за допомогою властивості container-type:

.container {
  container-type: inline-size;
}

inline-size дозволяє робити запити до контейнера на основі його інлайнового розміру (ширина в горизонтальних режимах письма, висота — у вертикальних). Ви також можете використовувати size для запитів до обох вимірів або normal, щоб не створювати контейнер для запитів.

Тепер ви можете використовувати @container (часто в поєднанні з @when) для застосування стилів на основі розміру контейнера:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

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

Ось як ми можемо використовувати @when для досягнення того ж результату, можливо, в поєднанні з @container залежно від підтримки браузером та переваг у кодуванні (оскільки @when пропонує більшу гнучкість у деяких сценаріях, що виходять за рамки лише розміру контейнера):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

У цьому випадку `card-container` — це ім'я контейнера, присвоєне за допомогою `@container`, а `container(card-container)` у `@when` перевіряє, чи активний вказаний контекст контейнера. Примітка: Підтримка функції `container()` та точний синтаксис можуть відрізнятися в різних браузерах та версіях. Перед впровадженням звертайтеся до таблиць сумісності браузерів.

Практичні міжнародні приклади

• Списки товарів в електронній комерції: Відображайте списки товарів по-різному залежно від доступного простору в сітці сторінки категорії. Менший контейнер може показувати лише зображення товару та ціну, тоді як більший може містити короткий опис та рейтинг. Це корисно для різних регіонів з різною швидкістю інтернету та типами пристроїв, дозволяючи оптимізувати досвід як для високопродуктивних настільних комп'ютерів, так і для мобільних з'єднань з низькою пропускною здатністю в країнах, що розвиваються.
• Анотації новинних статей: Налаштовуйте довжину анотацій статей, що відображаються на головній сторінці новинного сайту, залежно від ширини контейнера. У вузькій бічній панелі показуйте лише заголовок і кілька слів; в основній контентній області надайте більш детальну анотацію. Враховуйте мовні відмінності, оскільки деякі мови (наприклад, німецька) мають довші слова та фрази, що впливає на простір, необхідний для анотацій.
• Віджети на панелі інструментів: Змінюйте макет віджетів на панелі інструментів залежно від розміру їхнього контейнера. Маленький віджет може відображати простий графік, тоді як більший може містити детальну статистику та елементи керування. Адаптуйте досвід роботи з панеллю інструментів до конкретного пристрою та розміру екрана користувача, враховуючи культурні вподобання щодо візуалізації даних. Наприклад, деякі культури можуть віддавати перевагу стовпчастим діаграмам над круговими.

Використання @when з кастомними станами

Кастомні стани дозволяють визначати власні стани для елементів і викликати зміни стилів на основі цих станів. Це особливо корисно у складних веб-додатках, де традиційних псевдокласів CSS, таких як :hover та :active, недостатньо. Хоча кастомні стани все ще розвиваються в реалізаціях браузерів, правило @when надає перспективний спосіб керування стилями на основі цих станів, коли підтримка дозріє.

Концептуальний приклад (використання CSS-змінних для імітації станів)

Оскільки нативна підтримка кастомних станів ще не є загальнодоступною, ми можемо імітувати її за допомогою CSS-змінних та JavaScript.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

У цьому прикладі ми використовуємо CSS-змінну --is-active для відстеження стану елемента. Код JavaScript перемикає значення цієї змінної при кліку на елемент. Потім правило @when застосовує інший колір фону, коли --is-active дорівнює 1. Хоча це обхідний шлях, він демонструє концепцію умовної стилізації на основі стану.

Потенційні майбутні сценарії використання зі справжніми кастомними станами

Коли справжні кастомні стани будуть реалізовані, синтаксис може виглядати приблизно так (примітка: це припущення, засноване на пропозиціях):

.my-element {
  /* Initial styles */
}

@when :state(my-custom-state) {
  .my-element {
    /* Styles when the custom state is active */
  }
}

Потім ви будете використовувати JavaScript для встановлення та зняття кастомного стану:

element.states.add('my-custom-state'); // Activate the state
element.states.remove('my-custom-state'); // Deactivate the state

Це дозволить здійснювати неймовірно точний контроль над стилізацією на основі логіки застосунку.

Міркування щодо інтернаціоналізації та локалізації

• Мови з написанням справа наліво (RTL): Кастомні стани можна використовувати для адаптації макета та стилізації компонентів для RTL-мов, таких як арабська та іврит. Наприклад, дзеркальне відображення макета меню навігації, коли активний певний RTL-стан.
• Доступність: Використовуйте кастомні стани для надання розширених функцій доступності, таких як підсвічування сфокусованих елементів або надання альтернативних текстових описів, коли спрацьовує стан взаємодії користувача. Переконайтеся, що ці зміни стану ефективно передаються допоміжним технологіям.
• Культурні вподобання в дизайні: Адаптуйте візуальний вигляд компонентів на основі культурних вподобань у дизайні. Наприклад, використання різних колірних схем або наборів іконок залежно від локалі або мови користувача.

Робота з CSS-змінними та запитами діапазону

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

Приклад: перемикання тем

:root {
  --theme-color: #fff;
  --text-color: #000;
}

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

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

У цьому прикладі змінна --theme-color контролює колір фону тіла документа. Коли вона встановлена на #000, правило @when змінює --text-color на #fff, створюючи темну тему. Користувачі можуть змінювати значення --theme-color за допомогою JavaScript або встановлюючи іншу CSS-змінну у користувацькій таблиці стилів.

Запити діапазону

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

@when (400px <= width <= 800px) {
  .element {
    /* Styles applied when the width is between 400px and 800px */
  }
}

Однак точний синтаксис та підтримка запитів діапазону в @when можуть відрізнятися. Рекомендується звертатися до останніх специфікацій та таблиць сумісності браузерів. Запити до контейнерів часто є більш надійною та добре підтримуваною альтернативою для умов, заснованих на розмірі.

Глобальна доступність та налаштування користувача

• Висококонтрастні теми: Використовуйте CSS-змінні та правило @when для реалізації висококонтрастних тем, що задовольняють потреби користувачів із вадами зору. Дозвольте користувачам налаштовувати колірну палітру та розміри шрифтів відповідно до їхніх конкретних потреб.
• Зменшення руху: Поважайте переваги користувача щодо зменшення руху, використовуючи CSS-змінні для вимкнення анімацій та переходів, коли користувач увімкнув налаштування "зменшення руху" у своїй операційній системі. Медіа-запит prefers-reduced-motion можна поєднувати з @when для більш точного контролю.
• Налаштування розміру шрифту: Дозвольте користувачам налаштовувати розмір шрифту на веб-сайті за допомогою CSS-змінних. Використовуйте правило @when для адаптації макета та відступів елементів для розміщення різних розмірів шрифтів, забезпечуючи читабельність та зручність використання для всіх користувачів.

Найкращі практики та міркування

• Сумісність з браузерами: Правило @when все ще відносно нове, і підтримка браузерами ще не є універсальною. Завжди перевіряйте таблиці сумісності браузерів перед використанням його у продакшені. Розгляньте можливість використання поліфілів або запасних рішень для старих браузерів. Станом на кінець 2024 року підтримка браузерами залишається обмеженою, і часто більш практичним підходом є опора на @container та розумне використання CSS-змінних із запасними варіантами на JavaScript.
• Специфічність: Будьте уважні до специфічності CSS при використанні правила @when. Переконайтеся, що ваші умовні стилі достатньо специфічні, щоб перекрити будь-які конфліктуючі стилі.
• Підтримуваність: Використовуйте CSS-змінні та коментарі, щоб зробити ваш код більш читабельним та легким для підтримки. Уникайте створення надто складних умовних правил, які важко зрозуміти та налагодити.
• Продуктивність: Хоча правило @when може покращити продуктивність, зменшуючи кількість CSS, що потребує розбору, важливо використовувати його розсудливо. Надмірне використання умовних правил може негативно вплинути на продуктивність, особливо на старих пристроях.
• Прогресивне покращення: Використовуйте прогресивне покращення, щоб гарантувати, що ваш веб-сайт добре працює, навіть якщо браузер не підтримує правило @when. Надайте базовий, функціональний досвід для всіх користувачів, а потім поступово покращуйте його для браузерів, що підтримують цю функцію.

Майбутнє умовної стилізації

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

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

Висновок

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

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