M

MLOG

Українська

Дізнайтеся про правило CSS @when — потужну функцію, що дозволяє умовно застосовувати стилі на основі підтримки браузера, розміру екрана тощо. Навчайтеся з практичними прикладами.

Правило CSS @when: Майстерне застосування умовних стилів

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

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

Правило @when — це умовне at-rule у CSS, яке дозволяє визначати стилі, що застосовуються лише за умови виконання певних умов. Уявіть це як оператор if для вашого CSS. На відміну від медіа-запитів, які в основному зосереджені на характеристиках вікна перегляду (розмір екрана, орієнтація тощо), @when надає більш загальний та розширюваний спосіб для умовної стилізації. Воно розширює існуючі умовні at-rules, такі як @supports та @media.

Ключові переваги використання @when

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

Основний синтаксис правила @when виглядає так: 
@when <condition> {
  /* CSS-правила, що застосовуються, коли умова істинна */
}

<condition> може бути будь-яким валідним логічним виразом, що обчислюється як true або false. Цей вираз часто включає:

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

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

1. Адаптивний дизайн з @when та медіа-запитами

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

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

У цьому прикладі стилі всередині блоку @when застосовуються лише тоді, коли ширина екрана становить від 768 до 1023 пікселів (типовий розмір планшета). Це забезпечує чіткий та лаконічний спосіб визначення стилів для конкретних діапазонів вікна перегляду.

Примітка щодо інтернаціоналізації: Адаптивний дизайн є критично важливим для глобальної аудиторії. Враховуйте різноманітність розмірів екранів у різних регіонах. Наприклад, у деяких країнах використання мобільних пристроїв вище, що робить підхід "mobile-first" ще більш важливим.

2. Визначення можливостей з @when та @supports

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Резервні стилі для браузерів, що не підтримують grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Налаштування ширини для старих браузерів */
  }
}

Тут ми використовуємо @supports для перевірки, чи підтримує браузер CSS Grid Layout. Якщо так, ми застосовуємо стилі на основі grid до .container. Якщо ні, ми надаємо резервні стилі з використанням flexbox, щоб забезпечити схожу розмітку в старих браузерах.

Примітка щодо глобальної доступності: Визначення можливостей є важливим для доступності. Старі браузери можуть не підтримувати нові атрибути ARIA або семантичні елементи HTML5. Надавайте відповідні резервні варіанти, щоб контент залишався доступним.

3. Поєднання медіа-запитів та запитів можливостей

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

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

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

4. Стилізація на основі кастомних властивостей (змінних CSS)

@when також можна використовувати в поєднанні з кастомними властивостями CSS (також відомими як змінні CSS) для створення динамічної та керованої станом стилізації. Ви можете використовувати JavaScript для оновлення значення кастомної властивості, а потім використовувати @when для застосування різних стилів на основі цього значення.

Спочатку визначте кастомну властивість:

:root {
  --theme-color: #007bff; /* Колір теми за замовчуванням */
  --is-dark-mode: false;
}

Потім використовуйте @when для застосування стилів на основі значення кастомної властивості:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Нарешті, використовуйте JavaScript для перемикання значення кастомної властивості --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

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

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

5. Стилізація на основі data-атрибутів

Ви також можете використовувати @when з data-атрибутами для стилізації елементів на основі значень їхніх даних. Це може бути корисно для створення динамічних інтерфейсів, де елементи змінюють свій вигляд залежно від взаємодії користувача або оновлення даних.

Наприклад, припустимо, у вас є список завдань, і кожне завдання має атрибут data-status, який вказує на його статус (наприклад, "todo", "in-progress", "completed"). Ви можете використовувати @when, щоб стилізувати кожне завдання по-різному залежно від його статусу.

[data-status="todo"] {
  /* Стилі за замовчуванням для завдань "todo" */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Примітка: підтримка умови тестування attribute() може бути обмеженою або не повністю реалізованою в усіх браузерах на даний момент. Завжди ретельно тестуйте.

Сумісність з браузерами та поліфіли

Станом на кінець 2024 року підтримка правила @when браузерами все ще розвивається. Хоча багато сучасних браузерів підтримують основну функціональність, деякі старіші браузери можуть цього не робити. Тому вкрай важливо перевіряти таблиці сумісності та використовувати відповідні резервні варіанти або поліфіли, де це необхідно.

Завжди звертайтеся до таких ресурсів, як Can I use..., щоб перевірити поточний стан підтримки @when та пов'язаних функцій у браузерах.

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

Висновок

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

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