Недавно я наткнулась на очень интересную статью о CSS Container Queries. Это инновационный инструмент, который позволяет регистрировать элемент как «контейнер» и применять стили к другим элементам, когда этот контейнер соответствует определенным условиям.

Решила поделиться с вами, что же это такое - коротко и по делу. Традиционная адаптивная верстка очень тесно связана с медиазапросами (@media ….), которые в свою очередь (в большинстве случаев) зависят от размер окна просмотра. Контейнерные запросы позволяют создавать макеты, которые реагируют на размер контейнера, а не на размер окна просмотра. Как это выглядит? Довольно просто:

++.cards-container {container: cardsContainer / inline-size;/ развернуто /container-name: cardsContainer;container-type: inline-size;}@container cardsContainer (width .cards {background-color: red;}}

И всё, да будет магия ) По шагам: 1. Регистрируем родительский компонент как контейнер (container-type: inline-size;) 2. Применяем @container (width Важные моменты при регистрации контейнеров:

container-name (имя контейнера):_++ Свойство не обязательно. (@container (width Неименованный контейнер будет соответствовать любому контейнерному запросу, который не нацелен на конкретный контейнер. Это может привести к совпадению с несколькими условиями.

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

container: Сокращенная запись, объединяющая container-name и container-type. Дополнительные особенности: Контейнер не может изменять свои собственные стили, но может изменять стили своих содержимых элементов. Контейнер должен иметь явно заданный размер, так как его содержимое не должно влиять на его размеры.

Почему стоит использовать CSS Container Queries?

1. Контроль над элементами в зависимости от размера контейнера: При использовании контейнерных запросов элементы могут изменяться в зависимости от размеров их контейнера, а не окна просмотра. 2. Предсказуемость стилей: Контейнерные запросы позволяют определять все стили для конкретного элемента более предсказуемо. 3. Повторное использование: Компоненты, созданные с контейнерными запросами, легко перенести в другие проекты, и они будут вести себя одинаково предсказуемо. 4. Новые типы единиц измерения: Вводят новые типы CSS-единиц измерения, которые можно использовать для задания размеров элементов в зависимости от размеров их контейнеров. — cqw (Container Query Width): 1% от ширины запрашиваемого контейнера. — cqh (Container Query Height): 1% от высоты запрашиваемого контейнера. и еще ряд интересных вариантов

Контейнерные запросы – это мощный инструмент, который расширяет возможности адаптивного дизайна, делая его более гибким и предсказуемым. Звучит это конечно круто, и прежде чем бежать и применять в работе, что же по поддержке? Момент написания этой статьи поддерживаются 93,41% браузеров, в то время как запросы стилей контейнеров находятся на стадии экспериментов.Лично я для крупных проектов, применять бы не стала, а для мини проекта с небольшой проходимостью возможно бы попробовала.

А вы что думаете по этому поводу?