Container Queries: The End of Media Queries?

Container Queries: The End of Media Queries? Объясняю на пальцах за чашкой кофе

Привет! Наливай кофе, устраивайся поудобнее. Сегодня мы разберем тему, которая окончательно изменила правила игры в верстке. Поговорим про Container Queries (контейнерные запросы). Спойлер: нет, Media Queries не умерли окончательно, но их полномочия теперь сильно ограничены.

Представь классическую боль. Ты верстаешь независимый компонент карточки товара. Эта карточка должна идеально смотреться в боковой панели (шириной 300px), в сетке товаров (по 400px на карточку) и на главном баннере во всю ширину экрана (1200px). Раньше тебе приходилось писать тонны спагетти-кода, привязываясь к ширине экрана. Но экрану-то плевать, какого размера твой блок внутри конкретной разметки! Вот эту боль мы сегодня и закроем раз и навсегда.

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

До появления контейнерных запросов мы крутились как могли. Самый популярный костыль — создание кучи модификаторов в БЭМ-стиле: card--sidebar, card--grid, card--featured. Мы заставляли JS-разработчиков вешать ResizeObserver на родительские элементы, чтобы динамически переключать классы в зависимости от ширины родителя. Это убивало производительность, плодило лишний JS и заставляло UI дергаться при загрузке.

Мы подробно разбирали масштабы этой трагедии в нашей статье о проблемах адаптивности старого поколения. Если коротко: стили компонента намертво привязывались к контексту его расположения, что на корню уничтожало саму идею переиспользуемых UI-китов.

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

Сегодня Container Queries поддерживаются всеми современными браузерами «из коробки». Идея проста: мы объявляем родительский элемент «контейнером», а дочерние элементы стилизуем в зависимости от физических размеров этого родителя, а не всего экрана.

Для этого используется свойство container-type (обычно со значением inline-size, чтобы отслеживать только ширину) и, опционально, container-name, чтобы обращаться к конкретному контейнеру, если их несколько. Это открывает невероятную свободу: один и тот же компонент сам решает, как ему выглядеть, просто оценивая доступное ему пространство.

Кстати, если хочешь глубже погрузиться в эволюцию этой технологии, загляни в наш прошлый материал про переходный период от медиа-запросов к контейнерным.

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

Давай закодим это. Ниже — максимально простой и понятный пример. Мы создаем родительскую сетку (наш контейнер) и карточку, которая меняет свою раскладку с вертикальной на горизонтальную, как только контейнер становится шире 500 пикселей.

<div class="card-wrapper">
  <div class="card">
    <img src="https://picsum.photos/300/200" alt="Превью" class="card__img">
    <div class="card__content">
      <h3 class="card__title">Супер-фича из 2026 года</h3>
      <p class="card__text">Этот компонент сам знает, когда ему стать двухколоночным.</p>
    </div>
  </div>
</div>

<style>
/* 1. Объявляем родителя контейнером */
.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
  width: 100%;
  max-width: 800px;
  border: 2px dashed #ccc;
  padding: 1rem;
}

/* 2. Базовые стили карточки (для узкого контейнера) */
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
}

.card__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* 3. Магия Container Queries */
@container card-container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card__img {
    width: 200px;
    height: 150px;
  }
}
</style>

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

Самый частый факап, на котором спотыкаются мидлы при первом знакомстве с контейнерами — попытка изменить стили самого контейнера внутри его же запроса. Запомни железное правило:

Нельзя изменять размеры контейнера внутри @container-запроса, который на этот контейнер завязан.

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

@container (min-width: 500px) {
  .card-wrapper {
    width: 300px; /* БУМ! */
  }
}

Ты мгновенно уронишь браузер в бесконечный цикл рендеринга (layout loop). Контейнер видит, что он больше 500px -> уменьшает себя до 300px -> видит, что он меньше 500px -> увеличивает себя обратно. Браузер офигевает от такой наглости и просто ломает верстку. Контейнерные запросы созданы для стилизации внутренностей (детей) контейнера, но никак не его самого.

Так что пользуйся новой фичей с умом, изолируй компоненты и пиши чистый CSS!

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