Перейти к содержанию

@container

Правило @container — это правило условной группы, которое применяет стили к контексту включения. Объявления стилей фильтруются по условию и применяются к контейнеру, если условие истинно. Условие оценивается, когда контейнер меняет размер.

Может быть предоставлено необязательное container-name с учетом регистра, которое отфильтровывает набор контейнеров запросов, рассматриваемых только как те, у которых есть совпадающее имя контейнера запросов. После того, как подходящий контейнер запроса выбран для элемента, каждая функция контейнера в <container-condition> оценивается по сравнению с этим контейнером запроса.

Изображения, фильтры, композиция

Синтаксис

1
2
3
@container <container-condition> {
    /* <stylesheet> */
}

Значения

<container-condition>

Набор функций, которые оцениваются относительно контейнера запроса при изменении размера контейнера. Стили, определенные в <stylesheet>, применяются, если условие истинно.

<stylesheet>

Набор объявлений CSS.

Логические ключевые слова

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

  • and - сочетает в себе два или более условий.
  • or - сочетает в себе два или более условий.
  • not - отрицает условие. Для каждого запроса контейнера допускается только одно условие «не», которое нельзя использовать с ключевыми словами and или or.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@container not (width < 400px) {
    /* <stylesheet> */
}

@container (width > 400px) and (height > 400px) {
    /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
    /* <stylesheet> */
}

@container (width > 400px) not (height > 400px) {
    /* <stylesheet> */
}

Именованные контексты изоляции

Контекст включения может быть назван с помощью свойства container-name.

1
2
3
4
.post {
    container-name: sidebar;
    container-type: inline-size;
}

В контейнерных запросах свойство container-name используется для фильтрации набора контейнеров до контейнеров с совпадающим именем контейнера запроса:

1
2
3
@container sidebar (width > 400px) {
    /* <stylesheet> */
}

Дескрипторы

В условии контейнера можно использовать следующие дескрипторы:

aspect-ratio

Соотношение сторон контейнера, рассчитанное как отношение ширины к высоте контейнера, выраженное как значение <ratio>.

block-size

Размер блока контейнера, выраженный в виде значения <length>.

height

Высота контейнера, выраженная как значение <length>.

inline-size

Инлайновый размер контейнера, выраженный в виде значения <length>.

orientation

Ориентация контейнера: landscape или portrait.

width

Ширина контейнера, выраженная в виде значения <length>.

Спецификация

Комментарии