Container queries

Container queries: стили по размеру контейнера, container-type, cqw/cqh-единицы и отказ от зависимостей от вьюпорта.

Уровень: средний 9 разделов 1,5 часа

1. Зачем queries вместо media

Медиазапросы смотрят на РАЗМЕР ОКНА, а container queries — на размер КОНТЕЙНЕРА. Одна и та же карточка в узкой колонке и широкой панели меняется сама, без глобальных брейкпоинтов.

компонент знает свой контекст, а не весь экран;
меньше брейкпоинтов на «известных цифрах» окна;
удобно для карточек, виджетов, grid-ячеек.

2. Подключение

Контейнеру задают container-type: inline-size (ширина) или size (обе оси). Дети внутри получают право на @container-запросы.

.panel {
  container-type: inline-size;
  container-name: card;
}
@container (min-width: 400px) {
  .card { display: flex; }
}
/* можно по имени, можно сплошной: @container (min-width: 400px) */

3. Единицы cqw/cqh

Внутри контейнера работают cqw/min 1% ширины, cqh — высоты, cqmin, cqmax, cqi — inline-версия. Размеры относительно своего контейнера почти как vw — относительно окна.

.card__title { font-size: 3cqw; }   /* 3% ширины контейнера */
padding: 4cqmin;

cqw удобно там, где компонент должен быть «монолитным» в любой колонке — как уменьшение вьюпорта, но локально.

4. Стили по высоте и другим свойствам

@container (min-height: 200px) — стили зависят от высоты;
стиль запросов поддерживает сравнения: (width >= 400px) в новых синтаксисах;
container-type: size — жёстко по обоим осям, нужен явный размер.

@container (height >= 240px) and (width >= 360px) { .tile { display: grid; } }

5. Паттерн: карточка в любой сетке

Реальная ценность: один компонент .card, который в узком сайдбаре — вертикальный, в широкой панели — горизонтальный, без отдельных классов под колонки.

.feed { container-type: inline-size; }
.card { display: grid; gap: 12px; }
.card__media { aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }

@container (min-width: 520px) {
  .card { grid-template-columns: 180px 1fr; align-items: center; }
  .card__media { aspect-ratio: 1; }
}

6. Вложенность сеток

Назовите вложенные контейнеры (container-name) — запросы целятся в нужный слой, а не в первый попавшийся.

.list { container-name: list; container-type: inline-size; }
.item { container-name: item; container-type: inline-size; }

@container list (min-width: 900px) { .item { … } }
@container item (min-width: 300px) { .item__text { display: block; } }

7. Поддержка и fallback

Container queries — во всех браузерах с конца 2023-го. Для очень старых — fallback: базовый «мобильный» вид без @container, а запросы только дозируют улучшение.

.card { display: block; }              /* базово: колонка */
@supports (container-type: inline-size) {
  .feed { container-type: inline-size; }
  @container (min-width: 520px) { .card { display: grid; } }
}

8. Когда НЕ пользоваться

сайт-лендинг с линейным потоком — media окна проще;
важен скроллбар: контейнер с overflow: auto не даёт inline-size;
grid-элемент сам по себе не контейнер своего содержания — нужен обёртка.

Практическое правило: если компонент встречается в паре мест с разной шириной — container queries; если блок только один на странице — media.

9. Чек-лист container queries

контейнеру задан container-type: inline-size;
детям подходит query по имени, если слоёв несколько;
fallback-база на месте (без @container), улучшение — через запросы;
проверили поддержку: caniuse.com/mdn-css_at-rules_container.

Что дальше

Курс завершён.

← Вернуться к курсам