CSS Container Queries: створюємо справді адаптивні компоненти

Container queries змінюють правила гри для компонентного дизайну. Замість того, щоб покладатися лише на viewport media queries, компоненти тепер можуть реагувати на розмір свого контейнера.

Чому Container Queries важливі

Традиційні media queries реагують лише на розмір viewport. Це створює проблеми, коли:

• Компоненти з'являються в різних контекстах (сайдбар vs основний контент)
• Grid-макети мають динамічну кількість колонок
• Компоненти повинні бути справді багаторазовими у різних проєктах

Базовий синтаксис

.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

Реальні застосування

1. Адаптивні картки

Картки, які переключаються з вертикального на горизонтальний макет на основі доступного простору, а не ширини viewport.

2. Адаптивна навігація

Навігація, що згортається в burger-меню на основі розміру контейнера, ідеально для сайдбарів.

3. Масштабування типографіки

Налаштування розмірів шрифтів на основі ширини контейнера для кращої читабельності в різних контекстах.

Одиниці Container Query

Нові одиниці роблять розмірність ще гнучкішою:

• cqw - 1% від ширини контейнера
• cqh - 1% від висоти контейнера
• cqi - 1% від inline розміру контейнера
• cqb - 1% від block розміру контейнера

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

Container queries підтримуються у всіх сучасних браузерах з 2023 року. Для старих браузерів використовуйте feature detection:

@supports (container-type: inline-size) {
  /<em> Container query стилі </em>/
}

Кращі практики

Називайте контейнери - Використовуйте container-name для ясності

Починайте з inline-size - Найпоширеніший варіант використання

Поєднуйте з media queries - Використовуйте обидва для оптимальної адаптивності

Тестуйте в різних контекстах - Перевіряйте компоненти в різних розмірах контейнерів

Висновок

Container queries відкривають справжній компонентний адаптивний дизайн. Компоненти стають самодостатніми, багаторазовими і автоматично адаптуються до свого середовища.

Спробуйте створити адаптивні компоненти з нашим CSS Grid Generator і протестуйте їх у різних розмірах контейнерів!