CSS Container Queries – это инновационный инструмент, который позволяет регистрировать элемент как «контейнер» и применять стили к другим элементам, когда этот контейнер соответствует определенным условиям.
- Введение: Контейнерные Запросы
- Почему стоит использовать CSS Container Queries?
- Регистрация элементов как контейнеров
- Запросы к контейнерам
- Свойства и значения запросов к контейнерам
- Единицы измерения контейнеров
- Запросы стилей контейнеров
- Вложенные запросы стилей
- Спецификация и поддержка браузеров
- Демо и примеры
- CSS трюки которые нужно знать!
- Заключение
Введение: Контейнерные Запросы
В отличие от традиционных медиазапросов, которые были золотым стандартом в адаптивном веб-дизайне, контейнерные запросы позволяют создавать макеты, которые реагируют на размер контейнера, а не на размер окна просмотра. Это особенно полезно в сложных компонентах, где размеры элементов могут значительно варьироваться.
.parent {
container-name: hero-banner;
container-type: inline-size;
/* или container: hero-banner / inline-size; */
}
.child {
display: flex;
flex-direction: column;
}
/* Когда контейнер больше 60 символов... */
@container hero-banner (width > 60ch) {
/* Изменяем направление flex-элементов .child. */
.child {
flex-direction: row;
}
}
Почему стоит использовать CSS Container Queries?
- Контроль над элементами в зависимости от размера контейнера: При использовании контейнерных запросов элементы могут изменяться в зависимости от размеров их контейнера, а не окна просмотра.
- Предсказуемость стилей: Контейнерные запросы позволяют определять все стили для конкретного элемента более предсказуемо.
- Повторное использование: Компоненты, созданные с контейнерными запросами, легко перенести в другие проекты, и они будут вести себя одинаково предсказуемо.
- Новые типы единиц измерения: Вводят новые типы CSS-единиц измерения, которые можно использовать для задания размеров элементов в зависимости от размеров их контейнеров.
Контейнерные запросы – это мощный инструмент, который расширяет возможности адаптивного дизайна, делая его более гибким и предсказуемым.
Регистрация элементов как контейнеров
Для использования CSS Container Queries необходимо зарегистрировать элемент как контейнер. Это делается с помощью свойства container
.
.cards {
container-name: card-grid;
container-type: inline-size;
/* Сокращенная запись */
container: card-grid / inline-size;
}
В этом примере создается контейнер с именем card-grid
, который можно запрашивать по его inline-size
(ширине в горизонтальном режиме письма).
Свойства регистрации контейнеров:
container-name:
Регистрирует элемент как контейнер, который применяет стили к другим элементам в зависимости от его размеров.container-type:
Определяет тип контейнера, который может применять стили к другим элементам при выполнении определенных условий.container:
Сокращенная запись, объединяющая свойстваcontainer-name
иcontainer-type
в одно объявление.
Важные моменты при регистрации контейнеров:
- container-name (имя контейнера):
- Свойство не обязательно.
- Неименованный контейнер будет соответствовать любому контейнерному запросу, который не нацелен на конкретный контейнер. Это может привести к совпадению с несколькими условиями.
- container-type (тип контейнера):
- Свойство обязательно, если мы хотим запрашивать контейнер по его размеру или
inline-size
. size
– позволяет запрашивать контейнер по его размеру (ширине или высоте).inline-size
– позволяет запрашивать контейнер по егоinline-size
, что эквивалентно ширине в стандартном горизонтальном режиме письма.
- Свойство обязательно, если мы хотим запрашивать контейнер по его размеру или
- container:
- Сокращенная запись, объединяющая
container-name
иcontainer-type
.
- Сокращенная запись, объединяющая
- Дополнительные особенности:
- Контейнер не может изменять свои собственные стили, но может изменять стили своих содержимых элементов.
- Контейнер должен иметь явно заданный размер, так как его содержимое не должно влиять на его размеры.
Пример использования:
@container card-grid (inline-size > 500px) {
.card-item {
display: flex;
flex-direction: row;
}
}
В этом примере, когда ширина контейнера card-grid
превышает 500px, элементы с классом card-item
будут выстраиваться в строку.
Некоторые нюансы использования CSS Container Queries
- Неименованные контейнеры: Если контейнер не имеет имени, он будет соответствовать любому запросу, не направленному на конкретный контейнер.
- Размер контейнера: Свойство
container-type
должно быть установлено вsize
илиinline-size
, чтобы запрашивать размер контейнера. - Запросы могут быть объединены: Можно использовать логические операторы, такие как
and
,or
иnot
, для создания более сложных условий.
Запросы к контейнерам
CSS Container Queries позволяют нам применять стили к элементам на основе условий, касающихся размеров контейнера. Это делается с помощью правила @container
, которое работает аналогично медиазапросам, но ориентировано на размеры контейнера, а не окна просмотра.
Пример запроса к контейнеру:
@container my-container (width > 60ch) {
article {
flex-direction: row;
}
}
В этом примере, если ширина контейнера my-container
превышает 60 символов (ch), направление flex-элементов внутри статьи (article) изменяется на строку (row).
Основные аспекты запроса к контейнеру:
- @container: Эта директива указывает браузеру, что мы работаем с контейнерным запросом, а не с медиазапросом.
- Имя контейнера: Часть
my-container
ссылается на имя контейнера, как оно было определено в свойствеcontainer-name
. - Условие запроса:
(width > 60ch)
– условие, при котором применяется стиль. В данном случае это ширина контейнера, превышающая 60 символов.
Важные моменты:
- Имя контейнера не обязательно:
- Если имя контейнера не указано, то любой зарегистрированный контейнер будет соответствовать условиям при их выполнении.
- Запрос размера контейнера:
- Можно запрашивать размер контейнера, если свойство
container-type
установлено вsize
илиinline-size
.
- Можно запрашивать размер контейнера, если свойство
- Поддержка различных типов длин:
- Помимо ширины (
inline-size
), можно запрашивать соотношение сторон (aspect-ratio), высоту (block-size
) и ориентацию (например, портретная или ландшафтная).
- Помимо ширины (
- Поддержка диапазонного синтаксиса:
- Запросы поддерживают операторы больше (>), меньше (<), равно (=), больше или равно (>=) и меньше или равно (<=).
- Возможность объединения запросов:
- Можно создавать сложные условия с помощью логических операторов
and
,or
иnot
.
- Можно создавать сложные условия с помощью логических операторов
Пример объединенного запроса:
@container (width > 500px) and (height > 300px) {
.box {
background-color: lightblue;
}
}
В этом примере, если ширина контейнера превышает 500 пикселей и высота превышает 300 пикселей, фоновый цвет элемента с классом .box
изменится на светло-голубой.
Запросы к контейнерам значительно расширяют возможности адаптивного веб-дизайна, делая его более гибким и предсказуемым. Они позволяют применять стили к элементам на основе условий, касающихся размеров их контейнеров, что особенно полезно в сложных компонентах и макетах.
Свойства и значения запросов к контейнерам
Чтобы эффективно использовать CSS Container Queries, важно понимать основные свойства и значения, которые они предлагают. Рассмотрим основные свойства: container-name
, container-type
и сокращенное свойство container
.
Свойство container-name
element {
container-name: none | <custom-ident>+;
}
- none: Значение по умолчанию. Элемент не имеет имени контейнера. Обычно это значение не используется явно, так как его цель — задать поведение по умолчанию.
- <custom-ident>: Имя контейнера, которое может быть любым, за исключением зарезервированных слов, таких как default, none, at, no, or.
Пример:
.cards {
container-name: card-grid;
}
Свойство container-type
element {
container-type: normal | size | inline-size;
}
- normal: Элемент является контейнером, который можно запрашивать по его стилям, а не по размеру. Все элементы по умолчанию являются контейнерами стилей, поэтому это значение редко задается явно.
- size: Запрос контейнера по его размеру (ширине или высоте).
- inline-size: Запрос контейнера по его ширине в стандартном горизонтальном режиме письма.
Пример:
.cards {
container-type: inline-size;
}
Свойство container
element {
container: <'container-name'> [ / <'container-type'> ]?
}
- Если
<'container-type'>
опущено, оно сбрасывается на значение по умолчанию normal, что определяет контейнер стилей вместо контейнера размеров.
Пример:
.cards {
container: card-grid / inline-size;
}
Единицы измерения контейнеров
CSS Container Queries вводят новые типы единиц измерения, которые позволяют задавать размеры элементов относительно размеров контейнера.
Ширина и высота контейнера
- cqw (Container Query Width): 1% от ширины запрашиваемого контейнера.
- cqh (Container Query Height): 1% от высоты запрашиваемого контейнера.
![CSS Container Queries](https://genius.courses/wp-content/uploads/2024/07/Ширина-и-высота-контейнера-1024x476.webp)
Логические направления контейнера
- cqi (Container Query Inline Size): 1% от
inline-size
контейнера (ширина в горизонтальном режиме письма). - cqb (Container Query Block Size): 1% от
block-size
контейнера (высота в горизонтальном режиме письма).
![CSS Container Queries](https://genius.courses/wp-content/uploads/2024/07/Логические-направления-контейнера-1024x476.webp)
Минимальные и максимальные размеры контейнера
- cqmin (Container Query Minimum Size): Значение
cqi
илиcqb
, в зависимости от того, какое из них меньше. - cqmax (Container Query Maximum Size): Значение
cqi
илиcqb
, в зависимости от того, какое из них больше.
![CSS Container Queries](https://genius.courses/wp-content/uploads/2024/07/Минимальные-и-максимальные-размеры-контейнера-1024x547.png)
Пример использования:
.card {
width: 50cqw; /* 50% от ширины контейнера */
height: 30cqh; /* 30% от высоты контейнера */
}
Запросы стилей контейнеров
Запросы стилей контейнеров (Container Style Queries) позволяют применять стили к элементам на основе стилей контейнеров, а не их размеров. Это мощный инструмент, который дает возможность условной стилизации элементов, основываясь на стилях их контейнеров.
Пример регистрации контейнера стилей:
article {
container-name: card;
}
В данном примере элемент article
регистрируется как контейнер с именем card
. Однако регистрировать контейнер не обязательно, так как все элементы по умолчанию считаются контейнерами стилей.
Использование запросов стилей контейнеров:
@container style(--bg-color: #000) {
p {
color: #fff;
}
}
В этом примере, если значение кастомного свойства --bg-color
контейнера равно черному (#000
), цвет текста внутри параграфа (p
) изменится на белый (#fff
).
Основные аспекты:
Синтаксис
: Похож на медиазапросы, но используется директива@container
вместо@media
.Функция style()
: Указывает условия, основанные на стилях контейнера.Кастомные свойства
: Запросы стилей могут оценивать значения CSS переменных (кастомных свойств).
Пример с кастомными свойствами:
.card-wrapper {
--bg-color: #000;
}
.card {
@container style(--bg-color: #000) {
background-color: #fff;
}
}
В этом примере, если значение кастомного свойства --bg-color
контейнера равно черному (#000
), фон элемента с классом card
изменится на белый (#fff
).
Вложенные запросы стилей
Запросы стилей могут быть вложены, что позволяет создавать более сложные условия.
Пример вложенного запроса:
@container style(--featured: true) {
article {
grid-column: 1 / -1;
}
@container style(--theme: dark) {
article {
--bg-color: #000;
--text: #fff;
}
}
}
В этом примере, если значение кастомного свойства --featured
контейнера равно true
, элемент article
займет все колонки сетки. Если внутри того же контейнера значение кастомного свойства --theme
равно dark
, будут применены дополнительные стили, изменяющие цвет фона и текста.
Спецификация и поддержка браузеров
CSS Container Queries являются частью CSS Containment Module Level 3 спецификации, которая на момент написания находится на стадии черновика редактора. Понимание текущей спецификации и поддержки браузеров важно для эффективного использования этих возможностей в веб-разработке. Основные моменты спецификации включают:
- Регистрация элементов как контейнеров: Использование свойств
container-name
,container-type
иcontainer
для регистрации элементов как контейнеров. - Запросы к контейнерам: Использование директивы
@container
для создания условий, основанных на размерах или стилях контейнера. - Свойства и значения: Описание различных свойств, таких как
container-name
,container-type
и сокращенного свойстваcontainer
. - Единицы измерения: Введение новых единиц измерения, таких как
cqw
,cqh
,cqi
иcqb
.
Поддержка браузеров
Поддержка CSS Container Queries варьируется в зависимости от браузера и типа запросов (размеров или стилей). Запросы размеров контейнеров поддерживаются более широко, тогда как запросы стилей контейнеров находятся на стадии экспериментов.
Поддержка запросов размеров контейнеров
Браузер | Версия |
---|---|
Chrome | 105 и выше |
Firefox | 110 и выше |
Edge | 106 и выше |
Safari | 16.0 и выше |
Android Chrome | 126 и выше |
Android Firefox | 127 и выше |
iOS Safari | 16.0 и выше |
Поддержка запросов стилей контейнеров
Запросы стилей контейнеров поддерживаются экспериментально и требуют включения специальных флагов в браузерах. На момент написания, поддержка этих запросов ограничена и может измениться по мере их развития и внедрения в браузерах.
Демо и примеры
CSS Container Queries открывают новые возможности для адаптивного веб-дизайна. Давайте рассмотрим несколько практических примеров, которые демонстрируют, как можно использовать эти запросы для создания гибких и адаптивных интерфейсов.
Пример 1: Изменение макета карточек
В этом примере мы изменим расположение карточек в зависимости от размера их контейнера.
<div class="card-grid">
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
</div>
.card-grid {
container: card-grid / inline-size;
display: flex;
flex-direction: column;
}
.card {
padding: 20px;
margin: 10px;
background-color: #f0f0f0;
}
@container card-grid (width > 500px) {
.card-grid {
flex-direction: row;
}
}
Когда ширина контейнера card-grid
превышает 500 пикселей, направление флекс-бокса изменяется с колонки на строку, и карточки выстраиваются горизонтально.
Пример 2: Адаптивный текст в зависимости от ширины контейнера
<div class="text-container">
<p class="responsive-text">Этот текст изменит свой размер в зависимости от ширины контейнера.</p>
</div>
.text-container {
container: text-container / inline-size;
}
.responsive-text {
font-size: 16px;
}
@container text-container (width > 400px) {
.responsive-text {
font-size: 20px;
}
}
@container text-container (width > 600px) {
.responsive-text {
font-size: 24px;
}
}
В этом примере текст внутри контейнера text-container
изменяет свой размер в зависимости от ширины контейнера. При ширине более 400 пикселей текст увеличивается до 20 пикселей, а при ширине более 600 пикселей — до 24 пикселей.
Пример 3: Условное изменение фона на основе стиля контейнера
<div class="styled-container">
<p>Этот фон изменится в зависимости от кастомного свойства контейнера.</p>
</div>
.styled-container {
--bg-color: #fff;
background-color: var(--bg-color);
padding: 20px;
}
@container style(--bg-color: #fff) {
.styled-container p {
color: #000;
}
}
@container style(--bg-color: #000) {
.styled-container p {
color: #fff;
}
}
Здесь цвет текста внутри контейнера styled-container
изменяется в зависимости от значения кастомного свойства --bg-color
. Если оно равно белому (#fff
), текст становится черным, а если черному (#000
), текст становится белым.
CSS трюки которые нужно знать!
Заключение
CSS Container Queries представляют собой мощный инструмент для создания адаптивных веб-интерфейсов, предоставляя возможность изменять стили элементов на основе размеров или стилей их контейнеров. Это расширяет возможности разработчиков в построении гибких и отзывчивых дизайнов, которые адаптируются не только к размерам экрана, но и к особенностям содержимого.