CSS Container Queries: Новый подход к адаптивному дизайну

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

Container Queries - это новая возможность CSS, которая позволяет стилизовать элементы в зависимости от размера их родительского контейнера, а не от размера viewport (как это происходит с медиа-запросами). Это дает разработчикам больше контроля над адаптивным дизайном и позволяет создавать более гибкие компоненты.

Давайте рассмотрим пример, который поможет понять преимущества Container Queries. Представим, что у нас есть проект с следующей структурой:

Мы хотим, чтобы при определенной ширине контейнера `<main>` наши статьи меняли свой layout с вертикального на горизонтальный.

Изначально мы могли бы использовать медиа-запросы:

Однако, этот подход имеет ограничения. Если мы добавим боковую панель:

То наш медиа-запрос не сработает корректно, так как он ориентируется на ширину всего viewport, а не на ширину `<main>`.

Чтобы решить эту проблему, мы можем использовать Container Queries. Вот как это работает:

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

2. Создаем Container Query:

Теперь стили будут применяться в зависимости от ширины ближайшего родительского элемента с объявленным `container-type`, а не от ширины viewport.

container-name - Если у вас несколько вложенных контейнеров, вы можете использовать `container-name` для более точного таргетинга:

cqw и cqh - container queries также вводят новые единицы измерения:

- `cqw`: 1% от ширины контейнера

- `cqh`: 1% от высоты контейнера

Пример использования:

На момент написания статьи поддержка Container Queries достигла уровня, позволяющего использовать их в большинстве современных проектов. Согласно данным сайта "Can I Use", около 92% браузеров поддерживают эту технологию.

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

Несмотря на то, что эта технология все еще относительно нова, она уже достаточно стабильна для использования в продакшене. По мере роста поддержки браузерами, Container Queries, несомненно, станут неотъемлемой частью инструментария каждого фронтенд-разработчика.

Об авторе

Ларичев Антон – ex-CTO, разработчик со стажем 14 лет и основатель платформы для обучения разработки: PurpleSchool

Мой YouTube канал

Мой Telegram