@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>.

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

• CSS Containment Module Level 3

Комментарии