@container

Правило @container имеет следующий синтаксис:

@container <container-condition># {
  <stylesheet>
}

Например:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

/* condition list */
@container card (width > 400px), style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

<container-condition>

Необязательное <container-name> и <container-query>. Определённые в <stylesheet> стили применяются, если условие истинно.

<container-name>

Необязательно. Имя контейнера, к которому будут применены стили, когда запрос примет истинное значение, указанное как <ident>.

<container-query>

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

<stylesheet>

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

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

• and объединяет два или более условий.
• or объединяет два или более условий.
• not отрицает условие. Только одно условие 'not' разрешено для каждого запроса к контейнеру и не может использоваться с ключевыми словами and или or.

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

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

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

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

.post {
  container-name: sidebar;
  container-type: inline-size;
}

Краткая запись для этого — использование container в форме container: <name> / <type>, например:

.post {
  container: sidebar / inline-size;
}

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

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

Подробности об использовании и ограничениях именования описаны на странице container-name.

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

aspect-ratio

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

block-size

Размер block-size контейнера, выраженный как значение <length>.

height

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

inline-size

Размер inline-size контейнера, выраженный как значение <length>.

orientation

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

width

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

Рассмотрим следующий пример компонента карточки с заголовком и текстом:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Контекст контейнера можно создать с помощью свойства container-type, в данном случае с использованием значения inline-size для класса .post. Затем можно использовать правило @container для применения стилей к элементу с классом .card в контейнере, который уже меньше 650px.

/* A container context based on inline size */
.post {
  container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}

В примере HTML — компонент карточки с заголовком и текстом:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Сначала создайте контекст контейнера, используя свойства container-type и container-name. Краткая запись для этого описана на странице container.

.post {
  container-type: inline-size;
  container-name: summary;
}

Затем укажите этот контейнер, добавив имя в запрос к контейнеру:

@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

Невозможно указать несколько контейнеров в одном запросе к контейнеру. Можно вложить запросы к контейнерам, что даст тот же эффект.

Следующий запрос оценивается как истинный и применяет объявленный стиль, если контейнер с именем summary шире 400px и имеет родительский контейнер, шире 800px.

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

Запросы к контейнерам также могут оценивать вычисленный стиль элемента контейнера. Запрос к стилю контейнера — это запрос @container который использует одну или несколько функциональных нотаций style(). Булевой синтаксис и логическое объединение функций стиля в запрос стиля такой же, как и для запросов к функциям CSS.

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Параметр каждой style() — это одно <style-feature>. <style-feature> — это допустимое объявление CSS, свойство CSS или <custom-property-name>.

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Функция стиля без значения истинна, если вычисленное значение отличается от начального значения для данного свойства.

Если <style-feature> переданное как аргумент функции style(), является объявлением, запрос к стилю оценивается как истинный, если значение объявления совпадает с вычисленным значением этого свойства для запрошенного контейнера. В противном случае результат ложный.

Следующий запрос к контейнеру проверяет, что вычисленное computed_value свойства --accent-color элемента контейнера равно blue:

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Функции стиля, которые запрашивают сокращённое свойство, истинны, если вычисленные значения совпадают для каждого из его свойств, и ложны в противном случае. Например, @container style(border: 2px solid red) истинно, если все 12 длинных свойств (border-bottom-style, и т. д.) составляющие это сокращённое свойство, истинны.

Глобальные revert и revert-layer недопустимы в качестве значений в запросе <style-feature> и приводят к ложному значению запроса к стилю контейнера.

• Использование запросов по контейнерам
• Использование запросов по размеру и стилям контейнера
• container-name
• container-type
• contain
• content-visibility
• Модуль CSS Containment