Container Queries: The End of Media Queries?

Container Queries: Конец эпохи Media Queries? Наливай кофе, давай разбираться

Признайся, сколько раз ты проклинал верстку, когда дизайнер приносил макет с одним и тем же компонентом, который ведет себя совершенно по-разному в разных частях сайта? Например, карточка товара: в сайдбаре она должна быть узкой и вертикальной, в сетке товаров — квадратной, а в корзине на всю ширину — горизонтальной.

Раньше мы решали это кучей классов-модификаторов или писали громоздкие медиа-запросы, привязанные к ширине экрана. Но экраны пользователей тут вообще ни при чем! Компонент должен зависеть от размеров своего родителя, а не от того, открыт сайт на огромном мониторе или на стареньком iPhone. Сегодня мы наконец-то можем выбросить костыли. Давай разберем, как Container Queries меняют правила игры и почему Media Queries пора отправить на пенсию (ну, почти).

Как мы страдали раньше

До появления современных CSS-свойств адаптивность была сплошным компромиссом. Чтобы впихнуть один и тот же компонент в разные контексты, мы использовали три основных костыля:

• Классы-модификаторы: Мы плодили классы вроде .card--sidebar, .card--grid, .card--full-width. Стоило менеджеру попросить перенести карточку из сайдбара в контентную область, как верстка ломалась, и приходилось переписывать JS-логику или менять классы на лету.
• JS-скрипты на базе ResizeObserver: Мы вешали слушатели на изменение размеров элементов. Это приводило к лишней нагрузке на процессор, микро-лагам при рендере и неприятному дерганью интерфейса (layout shift), пока скрипт пытался понять, какую тему оформления применить.
• Сложные сетки: Конечно, в некоторых ситуациях нас спасал Grid, особенно когда мы научились готовить Subgrid, но глобально проблему адаптивности изолированных компонентов это не решало. Компонент оставался глупым и ничего не знал о своем окружении.

Как делать правильно в 2026 году

Container Queries (контейнерные запросы) — это стандарт, который поддерживается всеми современными браузерами уже не первый год, а в 2026 году стал абсолютным де-факто для компонентного подхода.

Суть проста: мы объявляем родительский элемент «контейнером» с помощью свойства container-type. После этого любой дочерний элемент может спросить у CSS: «Эй, какая сейчас ширина у моего родителя?» — и применить нужные стили через директиву @container.

Если ты хочешь более детально изучить историю внедрения и базовый синтаксис этой технологии, рекомендую почитать наш подробный разбор Container Queries. Ну а здесь мы перейдем сразу к практике.

Готовый сниппет кода

Давай напишем адаптивную карточку, которая сама решает, как ей выглядеть. Если ее родитель уже 500px, она перестраивается в горизонтальный вид. И заметь — никакого JS и никаких Media Queries!

/* 1. Делаем родительский блок контейнером */
.component-holder {
  container-type: inline-size;
  container-name: card-container;
  width: 100%;
}

/* 2. Базовые стили карточки (для узкого контейнера, например, в сайдбаре) */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

.product-card .image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
  border-radius: 8px;
}

/* 3. Адаптив на основе ширины КОНТЕЙНЕРА */
@container card-container (min-width: 500px) {
  .product-card {
    flex-direction: row;
    align-items: center;
    padding: 24px;
  }

  .product-card .image-wrapper {
    width: 180px;
    height: 180px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
}

Частая ошибка новичков

Когда мидлы впервые дорываются до Container Queries, они совершают одну и ту же классическую ошибку: пытаются повесить container-type и проверку @container на один и тот же элемент.

Запомни железное правило: элемент не может опрашивать сам себя.

Если ты напишешь что-то вроде:

/* ТАК ДЕЛАТЬ НЕЛЬЗЯ */
.card {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    padding: 24px; /* Приведет к бесконечному циклу рендеринга! */
  }
}

Браузер просто проигнорирует эти стили или сломает верстку. Почему? Потому что изменение стилей элемента может изменить его собственный размер, что вызовет повторную проверку контейнера, которая снова изменит размер… привет, бесконечный цикл рефлоу! Контейнером всегда должен быть родительский элемент (обертка), а стилизовать внутри `@container` нужно его дочерние элементы.

Используй этот подход с умом, изолируй компоненты, и пускай Media Queries отвечают только за глобальную сетку сайта (Layout), а Container Queries — за жизнь внутри блоков.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!