M

MLOG

Українська

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

CSS-запити до стилів контейнера: адаптивний дизайн на основі стилів для глобальних застосунків

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

Що таке CSS-запити до стилів контейнера?

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

Уявіть це так: замість того, щоб питати «Чи область перегляду ширша за 768px?», ви можете запитати «Чи має цей контейнер встановлену власну властивість --theme: dark;?». Це відкриває абсолютно новий світ можливостей для створення гнучких та багаторазових компонентів, які можуть бездоганно адаптуватися до різних тем, макетів або варіацій брендингу на вашому вебсайті чи в застосунку.

Переваги запитів до стилів контейнера

Як використовувати CSS-запити до стилів контейнера

Ось покроковий опис того, як реалізувати запити до стилів контейнера:

1. Налаштування контейнера

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

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

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

Крім того, використовуйте container-type: style, щоб контейнер використовувався лише для запитів до стилів, а не до розміру, або container-type: size style для використання обох. Щоб контролювати назву контейнера, використовуйте container-name: my-container, а потім звертайтеся до нього за допомогою @container my-container (...).

2. Визначення запитів до стилів

Тепер ви можете використовувати правило @container style(), щоб визначити стилі, які застосовуються при виконанні певної умови:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

У цьому прикладі стилі в межах правила @container будуть застосовані до елемента .component лише в тому випадку, якщо його батьківський елемент-контейнер має власну властивість --theme, встановлену як dark.

3. Застосування стилів до контейнера

Нарешті, вам потрібно застосувати CSS-властивості, які перевіряють ваші запити до стилів, до елемента-контейнера:

<div class="container" style="--theme: dark;">
  <div class="component">Це компонент.</div>
</div>

У цьому прикладі .component матиме темний фон і білий текст, оскільки його контейнер має стиль --theme: dark;, застосований безпосередньо в HTML (для простоти). Найкращою практикою є застосування стилів через CSS-класи. Ви також можете використовувати JavaScript для динамічної зміни стилів контейнера, що ініціюватиме оновлення запитів до стилів.

Практичні приклади для глобальних застосунків

1. Компоненти з темами

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

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Заголовок картки</h2>
    <p>Вміст картки.</p>
  </div>
</div>

У цьому прикладі компонент .card автоматично перемикатиметься між темною та світлою темою залежно від властивості --theme свого контейнера. Це дуже корисно для сайтів, де користувачі можуть обирати різні теми відповідно до своїх уподобань.

2. Варіації макета

Ви можете використовувати запити до стилів контейнера для створення різних варіацій макета компонентів залежно від доступного простору або загального макета сторінки. Розглянемо компонент вибору мови. У головній навігації це може бути компактний спадний список. У футері це може бути повний список доступних мов.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Стилі для компактного спадного списку */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Стилі для повного списку мов */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

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

3. Адаптація до типу контенту

Розглянемо новинний вебсайт з короткими описами статей. Ви можете використовувати запити до стилів контейнера, щоб налаштувати вигляд описів залежно від того, чи містять вони зображення.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (із зображенням) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (без зображення) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Це забезпечує більш візуально привабливе та інформативне представлення коротких описів статей, покращуючи користувацький досвід. Зауважте, що встановлення властивості `--has-image` безпосередньо в HTML не є ідеальним. Кращим підходом було б використання JavaScript для виявлення наявності зображення та динамічного додавання або видалення класу (наприклад, `.has-image`) до елемента `.article-summary`, а потім встановлення власної властивості `--has-image` у CSS-правилі для класу `.has-image`.

4. Локалізована стилізація

Для міжнародних вебсайтів запити до стилів контейнера можна використовувати для адаптації стилів залежно від мови або регіону. Наприклад, ви можете захотіти використовувати різні розміри шрифтів або міжсимвольні інтервали для мов з довшим текстом.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

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

5. Аспекти доступності

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

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Це гарантує, що ваш вебсайт буде зручним у використанні та доступним для всіх, незалежно від їхніх можливостей. Зверніть увагу на використання медіа-запиту `@media (prefers-contrast: more)` для визначення режиму високої контрастності на рівні операційної системи, а потім встановлення власної властивості `--high-contrast`. Це дозволяє вам ініціювати зміни стилів за допомогою запиту до стилю на основі системних налаштувань користувача.

Найкращі практики

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

Запити до стилів контейнера мають чудову підтримку в сучасних браузерах, включаючи Chrome, Firefox, Safari та Edge. Однак старіші браузери можуть не повністю підтримувати цю функцію. Обов'язково використовуйте функціональні запити для надання запасних стилів для цих браузерів або використовуйте поліфіл.

Висновок

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

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

Ресурси