CSS Container Queries: Новый взгляд на адаптивный веб-дизайн.

Адаптивный дизайн уже давно стал необходимостью в cовременной веб-разработке. Пользователи заходят на сайты с самых разных устройств: от мобильных телефонов до больших мониторов, и разработчикам приходится учитывать размеры экранов при создании макетов. По данным StatCounter Global Stats, доля мобильного трафика составляет около 60% от общего объема веб-трафика. Это означает, что более половины всех посещений сайтов происходит с мобильных устройств. За последние пять лет доля мобильного трафика увеличилась примерно на 20%. Этот рост обусловлен увеличением числа владельцев смартфонов, улучшением качества мобильных сетей и удобством использования мобильных приложений. На протяжении многих лет media queries в CSS были основным инструментом для адаптации дизайна к различным ширинам и высотам экрана. Однако, в 2023 году мир адаптивного дизайна изменился с появлением container queries. И эта технология продолжает набирать популярность в 2025 году, предлагая разработчикам новые подходы к созданию гибких интерфейсов.

В этой статье мы разберем, что такое container queries, как они работают, зачем их использовать и как внедрить их в свои проекты.

Что такое container queries?

Container queries — это новый механизм в CSS, который позволяет адаптировать стили элементов не основываясь на размере экрана (как в media queries), а на размерах их родительского контейнера. Ранее адаптивный дизайн был сильно привязан к размеру viewport, что ограничивало разработчиков в использовании более сложных компонентов внутри интерфейсов. С контейнерными запросами всё иначе: теперь можно определить стили для элемента в зависимости от того, насколько велик или мал родительский контейнер.

Как работают container queries?

Например у нас есть такая разметка:

<div class="container">
    <div class="card">
        <p>Контент карточки</p>
    </div>
</div>

Нам нужно маркировать контейнер, размеры которого будут отслеживаться. Для этого используется свойство container-type. Оно говорит браузеру, что этот элемент будет родительским контейнером, размеры которого мы будем учитывать:

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

В данном случае inline-size означает, что мы будем ориентироваться только на изменение ширины родительского компонента. Так же есть свойство block-size, которое определяет, что размер контейнера будет зависеть от его внутренней высоты.

Далее необходимо сделать привязку стилей к размерам контейнера, на этом шаге мы можем писать запросы, аналогичные media queries, например:

@container (min-width: 768px) {
  .card {
    padding: 2rem;
    font-size: 1.2rem;
  }
}

@container (max-width: 480px) {
  .card {
    padding: 1rem;
    font-size: 1rem;
  }
}

В данном примере у нас есть элемент с классом .card (карточка товара например), который является дочерним элементом нашего контейнера, и его стили будут изменяться исходя из ширины её родительского контейнера, независимо от ширины экрана.

Примеры использования container queries.

Допустим у нас есть карточка c пиццей, ее описание и кнопка заказать. Весь контент карточки обернут в контейнер с классом card-container. Ему мы задаем css свойство container-type: inline-size, которое говорит что все его содержимое мы будем позиционировать относительно его ширины, так же мы задаем ему имя cardContainer. Соответственно мы прописали, что при ширине контейнера 478px, мы позиционируем наши блоки внутри карточки по вертикали (flex-direction: column).

И тут возникает вопрос а почему container queries, мы же могли это сделать просто через media ? Да, но container queries yпрощают создание модульных компонентов, которые адаптируются к своему окружению. Код становится чище и легче для понимания, так как стилизация зависит от конкретных контейнеров, а не от глобального состояния окна.

Давайте рассмотрим еще один пример применения данной технологии.

В данном примере у нас есть карточки пользователей. Мы задаем контейнеру карточки свойство container, тем самым мы можем изменять стили в контексте этого блока, то есть мы отталкиваемся от его ширины, а не ширины viewport. Мы отображаем данные в карточке спомощью grid. Каждому блоку задаем grid-area. Когда ширина контейнера достигает 320px или 20rem и больше, мы задаем другие стили для данных и позиционируем наши блоки в другом порядке. Это очень удобно. Ниже полный код блока

@container (min-width: 20rem) {
  .buttons {
    flex-direction: row;
  }

  .card {
    align-items: center;
    grid-template-columns: 125px 1fr;
        grid-template-areas:
        "avatar name"
        "contact contact"
        "buttons buttons";
  }

  .name {
    width: 100%;
    align-items: flex-start;
    padding-top: .75rem;
    text-align: left;
  }

  .name > span {
    font-size: 1.125rem;
  }

  .contact {
    display: grid;
    grid-template-columns: calc(50% - 8px / 2) calc(50% - 8px / 2);
  }
}

Преимущества Container Queries

Container queries открывают новые возможности для разработки адаптивного дизайна. Вот основные их преимущества перед media queries:

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

2. Гибкость. С контейнерными запросами можно создавать независимые компоненты, которые адаптируются под свою среду.

3. Снижение сложности. Вам больше не нужно прописывать сложные зависимости от размеров экрана. Логика адаптации сосредоточена там, где она действительно нужна.

4. Улучшение производительности. С помощью container queries можно избежать глобальных изменений, ограничиваясь только стилями внутри отдельных модулей. Не перерисовывать полностью экран, а только ту часть контекста где применены стили.

Текущая поддержка браузеров

На момент написания статьи (2025 год) большинство браузеров уже поддерживают контейнерные запросы, включая последние версии Chrome, Edge, Firefox и Safari. Тем не менее, для некоторых устаревших систем всё ещё может понадобиться fallback. Например, использование обычных media queries для тех браузеров, которые не поддерживают container queries.

Заключение

Container queries — это следующий этап эволюции адаптивного дизайна. Они позволяют создавать компоненты, которые могут менять свой вид и поведение в зависимости от размеров родительских контейнеров.Это упрощает разработку сложных интерфейсов и выводит компонентно-ориентированный подход на новый уровень.