CSS запити контейнерів

Container Queries (контейнерні запити) — це нова функція CSS, яка дозволяє застосовувати стилі на основі розміру контейнера, а не розміру вікна браузера. Це революційна зміна для створення дійсно модульних та повторно використовуваних компонентів.

Що таке Container Queries?

Container Queries дозволяють компонентм адаптуватися до розміру їх батьківського контейнера, а не до розміру вікна перегляду. Це особливо корисно для створення компонентів, які можуть використовуватися в різних контекстах.

Відмінність від Media Queries

Media Queries реагують на розмір вікна браузера:

css

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

Container Queries реагують на розмір контейнера:

css

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

@container (min-width: 400px) {
  .card {
    width: 50%;
  }
}

Як використовувати Container Queries

Оголошення контейнера

Спочатку потрібно оголосити елемент як контейнер:

css

.card-container {
  container-type: inline-size;
  /* або */
  container-type: size;
  /* або */
  container-type: normal; /* за замовчуванням, не створює контейнер */
}

Типи контейнерів:

inline-size — відстежує лише ширину (внутрішній вимір)
size — відстежує як ширину, так і висоту
normal — не створює контейнер

Використання @container

Після оголошення контейнера ви можете використовувати запити:

css

.card {
  padding: 1rem;
  font-size: 1rem;
}

@container (min-width: 400px) {
  .card {
    padding: 2rem;
    font-size: 1.25rem;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 3rem;
    font-size: 1.5rem;
  }
}

Практичний приклад

html

<div class="sidebar">
  <div class="card-container">
    <div class="card">
      <h3>Назва картки</h3>
      <p>Текст картки адаптується до розміру контейнера.</p>
    </div>
  </div>
</div>

<div class="main-content">
  <div class="card-container">
    <div class="card">
      <h3>Назва картки</h3>
      <p>Та сама картка, але в іншому контексті.</p>
    </div>
  </div>
</div>

css

.sidebar {
  width: 300px;
}

.main-content {
  width: 800px;
}

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

.card {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

/* Картка адаптується до розміру контейнера */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card h3 {
    font-size: 1.5rem;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 2rem;
  }
  
  .card h3 {
    font-size: 2rem;
  }
}

Іменовані контейнери

Ви можете дати контейнеру ім'я для більш точного контролю:

css

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

.main-content {
  container-type: inline-size;
  container-name: main;
}

/* Стилі застосовуються лише до контейнера з іменем "sidebar" */
@container sidebar (min-width: 300px) {
  .card {
    /* стилі для картки в бічній панелі */
  }
}

/* Стилі застосовуються лише до контейнера з іменем "main" */
@container main (min-width: 600px) {
  .card {
    /* стилі для картки в основному контенті */
  }
}

Одиниці контейнерних запитів

Container Queries вводять нові одиниці вимірювання:

cqw — 1% ширини контейнера
cqh — 1% висоти контейнера
cqi — 1% внутрішнього розміру контейнера
cqb — 1% блочного розміру контейнера
cqmin — менше значення з cqi та cqb
cqmax — більше значення з cqi та cqb

css

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

.card {
  font-size: clamp(1rem, 4cqw, 2rem);
  padding: clamp(1rem, 5cqw, 3rem);
}

Поєднання з Media Queries

Container Queries та Media Queries можна використовувати разом:

css

/* Media Query для загального макету */
@media (min-width: 1024px) {
  .page {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

/* Container Query для компонент */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

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

Container Queries підтримуються в сучасних браузерах:

Chrome 105+
Firefox 110+
Safari 16.0+
Edge 105+

Для старіших браузерів ви можете використовувати полифіл або запасний варіант через Media Queries.

Переваги Container Queries

Модульність: Компоненти стають дійсно незалежними
Повторне використання: Один компонент працює в різних контекстах
Гнучкість: Легше створювати адаптивні дизайни
Краща продуктивність: Браузер може оптимізувати рендеринг

Коли використовувати

Використовуйте Container Queries, коли:

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

Використовуйте Media Queries, коли:

Потрібно змінити загальний макет сторінки
Адаптація залежить від розміру екрана пристрою
Працюєте зі старими браузерами

Порада:

Container Queries — це потужний інструмент для створення модульних компонентів. Використовуйте їх разом з Media Queries для створення гнучких та адаптивних інтерфейсів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань