container-type

Базовая версия 2023

Новое

С февраля 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

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

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

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

Примечание: При использовании свойств container-type и container-name значения style и layout свойства contain автоматически применяются.

Синтаксис

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

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

Значения

size

Устанавливает контейнер запроса для запросов размера контейнера как в строчных, так и в блочных измерениях. Применяет ограничение макета, ограничение стиля и ограничение размера к контейнеру.

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

inline-size

Устанавливает контейнер запроса для запросов размеров по оси строки контейнера. Применяет ограничения макета, стиля и размера по строке к элементу.

Ограничение размера по строке применяется к элементу. Размер элемента по строке может быть вычислен изолированно, игнорируя дочерние элементы.

normal

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

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

Начальное значение	`normal`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	цвет цвета

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

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

Примеры

Установление ограничения размера по строке

Рассмотрим следующий пример 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;
}

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

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

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

Спецификация
CSS Conditional Rules Module Level 5 # container-type

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`container-type`	105	105	110	91	16	105	110	72	16	20.0	105
`inline-size`	105	105	110	91	16	105	110	72	16	20.0	105
`normal`	105	105	110	91	16	105	110	72	16	20.0	105
`size`	105	105	110	91	16	105	110	72	16	20.0	105

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/container-type