Контейнерные запросы (Container Queries): полное руководство с примерами кода

Сегодня мы поговорим о технологии, которая кардинально изменит ваш подход к адаптивному дизайну. Если вы устали подстраивать компоненты под размер экрана через медиазапросы, то контейнерные запросы (Container Queries) станут для вас настоящим откровением. В этой статье я расскажу, как перейти от устаревших медиазапросов к адаптивности на уровне компонентов, приведу примеры кода, сравню подходы и поделюсь личным опытом внедрения этой технологии в реальные проекты.

Почему медиазапросы больше не спасают?

Традиционно адаптивность строится на медиазапросах, которые реагируют на размер окна браузера. Например:

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

Проблема: компоненты не знают о своем окружении. Карточка, которая отлично выглядит в сайдбаре на десктопе, «ломается», если мы поместим её в узкую сетку на мобильном устройстве. Медиазапросы не учитывают контекст компонента — только глобальные размеры экрана.

Пример из практики:
В одном из проектов мне пришлось создавать 5 разных медиазапросов для одних и тех же карточек, чтобы они корректно отображались в сайдбаре, гриде и модальных окнах. Это увеличило CSS-код на 40% и усложнило поддержку.

Что такое контейнерные запросы?

Контейнерные запросы (Container Queries) позволяют компонентам адаптироваться к размеру их непосредственного контейнера, а не всего окна. Это как если бы каждый компонент «знал», где он находится, и подстраивался под доступное пространство.

Как это работает?

1. Вы определяете контейнер:

.card-container {
  container-type: inline-size;
  /* или container-type: size; для отслеживания высоты */
}

2. Пишете стили для компонента внутри контейнера:

@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Отказ от медиазапросов

Шаг 1. Объявляем контейнер

Любой элемент может стать контейнером. Главное — задать container-type:

• inline-size — отслеживает ширину.
• size — отслеживает ширину и высоту.

Пример:

<div class="card-container">
  <div class="card">...</div>
</div>

.card-container {
  container-type: inline-size;
  container-name: card-container; /* Опционально, для точного таргетинга */
}

Шаг 2. Адаптируем компоненты

Используем @container вместо @media:

/* Стандартный стиль карточки */
.card {
  display: flex;
  gap: 20px;
}

/* Стиль для контейнера уже 400px */
@container card-container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Шаг 3. Комбинируем условия

Контейнерные запросы поддерживают логические операторы:

@container (width > 300px) and (height < 200px) {
  .card {
    font-size: 14px;
  }
}

Сравнение медиазапросов и контейнерных запросов

Практические рекомендации

1. Используйте контейнерные запросы для:
   • Компонентов с повторным использованием (карточки, кнопки, формы).
   • Сложных сеток, где элементы вложены друг в друга.
2. Не отказывайтесь полностью от медиазапросов:
   • Для глобальных изменений (например, скрытие сайдбара на мобильных).
3. Оптимизируйте производительность:
   • Избегайте избыточных container-type: size — отслеживание высоты дороже для рендеринга.
4. Проверяйте поддержку:
   • Добавляйте фолбэки через @supports:
   css

   .card {
     flex-direction: row;
   }
   
   @supports (container-type: inline-size) {
     @container (max-width: 400px) {
       .card {
         flex-direction: column;
       }
     }
   }

Пример: адаптивная карточка

HTML:

<article class="post-container">
  <div class="post">
    <img src="photo.jpg" alt="">
    <h2>Заголовок</h2>
    <p>Текст поста...</p>
  </div>
</article>

CSS:

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

.post {
  display: flex;
  gap: 15px;
}

@container (max-width: 500px) {
  .post {
    flex-direction: column;
  }
  .post img {
    width: 100%;
  }
}

Будущее контейнерных запросов

На 2025 год контейнерные запросы поддерживают 95% браузеров.

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

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