Container Queries: The End of Media Queries?

Container Queries: Смерть Media Queries или их лучший друг?

Наливай кофе, устраивайся поудобнее. Давай начистоту: сколько раз ты проклинал адаптивную верстку? Представь классическую боль: ты сверстал идеальную карточку товара. В сетке на всю ширину экрана она выглядит божественно. Но стоит закинуть её в узкий сайдбар или динамический виджет — и всё ломается. Текст наезжает на картинку, кнопка улетает за границы, верстка «плывет».

Традиционный адаптив всегда был компромиссом, потому что мы пытались управлять внешним видом отдельных компонентов, зная только общие размеры экрана устройства. Но элементам плевать на ширину экрана смартфона или монитора — им важно лишь то, сколько места выделил им конкретный родительский блок. И именно эту проблему раз и навсегда решают Container Queries (контейнерные запросы).

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

Долгое время медиа-запросы (Media Queries) были нашим единственным спасением. Но у них есть фундаментальный изъян: они мыслят глобально, на уровне вьюпорта. Чтобы заставить один и тот же UI-компонент выглядеть адекватно в разных частях сайта, нам приходилось городить безумные костыли:

• Плодить классы-модификаторы: Мы создавали бесконечный список стилей вроде .card--sidebar, .card--footer, .card--main-page. В итоге CSS раздувался, а поддерживать эту гору селекторов становилось невыносимо.
• Мучить JavaScript: Мы подключали тяжелые скрипты с ResizeObserver, чтобы динамически вешать классы в зависимости от ширины родителя. Привет, лишняя нагрузка на CPU и дерганый интерфейс из-за скачков макета (Layout Shift).
• Надеяться на чудо-формулы: Пытались выжать максимум из «резиновой» верстки. В этом плане очень выручали математические функции в CSS: clamp, min, max. Они круто масштабируют шрифты и отступы, но перестроить структуру сетки (например, превратить вертикальный список в горизонтальный) чисто на математике невозможно.

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

В 2026 году контейнерные запросы — это не экспериментальная фича, а обязательный стандарт современной верстки. Поддержка браузерами давно перевалила за 95%, так что отмазки больше не работают. Теперь мы можем создавать по-настоящему независимые UI-компоненты, которые сами знают, как себя вести в любых условиях обитания.

Логика работы простая:

• Мы объявляем элемент-родитель «контейнером» с помощью свойства container-type.
• Задаем ему имя через container-name (опционально, но крайне полезно для избежания путаницы).
• Внутри CSS пишем правило @container вместо привычного @media.

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

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

Давай разберем рабочий пример. У нас есть карточка товара. Если родительский блок узкий (меньше 450px) — карточка строится вертикально. Как только родитель расширяется — карточка автоматически перестраивается в горизонтальный ряд. При этом ширина самого экрана смартфона или десктопа роли не играет!

<!-- HTML структура -->
<div class="card-wrapper">
  <div class="product-card">
    <div class="card-preview"></div>
    <div class="card-info">
      <h3 class="card-title">Умная колонка</h3>
      <p class="card-text">Звук, который заполняет всё пространство комнаты.</p>
      <button class="card-btn">Купить</button>
    </div>
  </div>
</div>

<style>
/* 1. Назначаем обертку контейнером */
.card-wrapper {
  container-type: inline-size;
  container-name: product-zone;
  width: 100%;
}

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

.card-preview {
  height: 180px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}

.card-title {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
}

/* 3. Магия адаптации под ширину КОНТЕЙНЕРА */
@container product-zone (min-width: 450px) {
  .product-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .card-preview {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
  }

  .card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

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

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

Например, ты пишешь:

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

@container (min-width: 400px) {
  .product-card {
    padding: 40px; /* ОШИБКА! */
  }
}

Это приводит к бесконечному циклу рендеринга (infinite layout loop). Браузер видит, что контейнер стал больше 400px, применяет новые стили, увеличивает внутренние отступы, из-за чего общая ширина элемента может измениться, что снова триггерит проверку контейнера. Чтобы защитить вкладку от зависания, браузер просто заблокирует и проигнорирует такие стили.

Запомни железное правило: мы всегда объявляем контейнером внешнюю обертку (родительский элемент), а стилизуем и трансформируем внутри контейнерного запроса его дочерние элементы. Только так твоя верстка будет летать и работать без багов.

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