Свойство CSS `container-type`

Свойство CSS container-type CSS задаёт тип контекста контейнера, используемый в запросе контейнера.

Синтаксис

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
container-type: anchored;

/* Two values */
container-type: size scroll-state;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

Значения

Для этого свойства указывается одно или два ключевых значения из следующего списка. Если указаны два значения, одно должно быть scroll-state, а другое — inline-size или size:

anchored

Создаёт контейнер запроса для запросов привязанных контейнеров. В этом случае размер элемента не вычисляется изолированно; изоляция не применяется.

inline-size

Создаёт контейнер запроса для запросов размеров по строчной оси контейнера. К элементу применяются изоляция стиля и изоляция строчного размера. Строчный размер элемента можно вычислить изолированно, не учитывая дочерние элементы (см. Использование изоляции CSS).

normal

Значение по умолчанию. Элемент не является контейнером запроса для запросов размера контейнера, состояния прокрутки или привязки, но может использоваться в качестве контейнера запроса для запросов стиля контейнера и запросов контейнера только по имени.

scroll-state

Создаёт контейнер запроса для запросов состояния прокрутки. В этом случае размер элемента не вычисляется изолированно; изоляция не применяется.

size

Создаёт контейнер запроса для запросов размера контейнера по обоим измерениям — строчному и блочному. К элементу применяются изоляция стиля и изоляция размера. Изоляция размера применяется к элементу как в строчном, так и в блочном направлении. Размер элемента можно вычислить изолированно, не учитывая дочерние элементы.

Формальное определение

Формальный синтаксис

container-type = 
  normal |
  [ [ size | inline-size ] || scroll-state ]

Описание

Запросы контейнера позволяют выборочно применять стили внутри контейнера в зависимости от результатов условных запросов, выполняемых для этого контейнера. Правило @container используется для задания проверок, выполняемых для контейнера, и правил, которые будут применяться к содержимому контейнера, если запрос вернёт true.

Некоторые типы запросов контейнера можно выполнять только для элементов, которым заданы определённые значения свойства container-type, создающие в этих контейнерах определённые контексты контейнера:

• Размер: позволяет выборочно применять правила CSS к дочерним элементам контейнера в зависимости от условия общего размера или строчного размера, например максимального или минимального измерения, соотношения сторон или ориентации.
• Состояние прокрутки: позволяет выборочно применять правила CSS к дочерним элементам контейнера в зависимости от состояния прокрутки, например от того, является ли контейнер прокручиваемым и частично прокручен ли он, или является ли контейнер целевым элементом привязки, который будет привязан к контейнеру привязки прокрутки.
• Привязка: позволяет выборочно применять правила CSS к дочерним элементам контейнера в зависимости от того, позиционирован ли контейнер относительно якоря и применяется ли к нему резервный вариант position-try.

Если для контейнера не задано container-type, элемент не является контейнером запроса для запросов размера контейнера, состояния прокрутки или привязки, но по-прежнему может использоваться в качестве контейнера запроса для запросов стиля контейнера и запросов контейнера только по имени.

Запросы размера контейнера

Запросы размера контейнера позволяют выборочно применять правила CSS к потомкам контейнера в зависимости от условия размера, например максимального или минимального измерения, соотношения сторон или ориентации.

К контейнерам размера дополнительно применяется изоляция размера — она не позволяет элементу получать сведения о размере из своего содержимого, что важно для запросов контейнера, чтобы избежать бесконечных циклов. Если бы это было не так, правило CSS внутри запроса контейнера могло бы изменить размер содержимого, из-за чего запрос мог бы вернуть значение false и изменить размер родительского элемента, что, в свою очередь, могло бы изменить размер содержимого и снова сделать запрос истинным, и так далее. Эта последовательность повторялась бы бесконечно.

Размер контейнера должен задаваться контекстом, например для блочных элементов, растягивающихся на всю ширину родителя, или определяться явно. Если контекстный или явный размер недоступен, элементы с изоляцией размера схлопнутся.

Запросы состояния прокрутки контейнера

Запросы состояния прокрутки контейнера позволяют выборочно применять правила CSS к дочерним элементам контейнера в зависимости от состояния прокрутки, например:

• Частично ли прокручено содержимое контейнера.
• Является ли контейнер целевым элементом привязки, который будет привязан к контейнеру привязки прокрутки.
• Позиционирован ли контейнер с помощью position: sticky и зафиксирован ли у границы прокручиваемого контейнера.

В первом случае запрашиваемый контейнер — это сам прокручиваемый контейнер. В двух других случаях запрашиваемый контейнер — это элемент, на который влияет положение прокрутки родительского прокручиваемого контейнера.

Запросы привязанных контейнеров

Запросы привязанных контейнеров позволяют выборочно применять правила CSS к потомкам позиционированного относительно якоря контейнера, когда для него активен резервный вариант position-try, заданный свойством position-try-fallbacks.

Например, у вас может быть элемент всплывающей подсказки, позиционированный относительно якоря и расположенный по умолчанию над ним с помощью значения position-area top, но для него задано значение position-try-fallbacks flip-block. Это приведёт к тому, что всплывающая подсказка переместится в блочном направлении под якорь, когда начнёт выходить за верхнюю границу области просмотра. Если задать для неё container-type: anchored, можно обнаружить применение резервного варианта position-try с помощью правила @container и соответствующим образом применить CSS.

.tooltip {
  position: absolute;
  position-anchor: --myAnchor;
  position-area: top;
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

Примеры

Создание изоляции строчного размера

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

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Чтобы создать контекст контейнера строчного размера, добавьте к элементу свойство container-type со значением inline-size:

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

Запрос контейнера с помощью правила @container применит стили к элементам контейнера, если его ширина превышает 400px:

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

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

Совместимость с браузерами

См. также

• Запросы контейнера CSS
• Использование запросов размера и стиля контейнера
• Использование запросов состояния прокрутки контейнера
• Использование запросов привязанных контейнеров
• @container — правило
• Сокращённое свойство CSS container
• Свойство CSS container-name
• Свойство CSS content-visibility