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

container-type

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

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

Синтаксис

1
container-type: <type>;

Значения

size
Устанавливает контейнер запросов для запросов размера контейнера как на встроенной, так и на блочной оси как во встроенном, так и в блочном измерениях. Применяет ограничение макета, ограничение стиля и ограничение размера к контейнеру.
inline-size
Устанавливает контейнер запросов для многомерных запросов на встроенной оси контейнера. Применяет макет, стиль и встроенный размер к элементу.
normal
Элемент не является контейнером запросов для любых запросов размера контейнера, но остается контейнером запросов для запросов в стиле контейнера.

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

Пример

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container">
  <div class="card">
    <img
      src="image.png"
      alt="Cat with two different color eyes"
    />
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

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

1
2
3
.container {
  container-type: inline-size;
}

Написание запроса к контейнеру с помощью at-правила @container применит стили к элементам контейнера, если он шире 400 пикселей:

1
2
3
4
5
6
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Комментарии