контейнер

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

Новое доступно

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

Свойство контейнер сокращённой записи CSS определяет элемент как контейнер запросов и указывает имя и тип контекста содержания, используемого в запросе контейнера.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

Синтаксис

/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

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

Значения

<container-name>: Имя контекста содержимого, чувствительное к регистру. Более подробная информация о синтаксисе содержится на странице свойства container-name.
<container-type>: Тип контекста содержимого. Более подробная информация о синтаксисе содержится на странице свойства container-type.

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

Начальное значение	как каждое из свойств сокращённой записи: `container-name`: `none` `container-type`: `normal`
Применимо к	все элементы
Наследуется	нет
Проценты	как каждое из свойств сокращённой записи: `container-name`: нет `container-type`: нет
Вычисленное значение	как каждое из свойств сокращённой записи: `container-name`: `none` или упорядоченный список идентификаторов `container-type`: как указано
Тип анимации	как каждое из свойств сокращённой записи: `container-name`: Не подлежит анимации `container-type`: цвет

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

container = 
  <'container-name'> [ / <'container-type'> ]?  

<container-name> = 
  none             |
  <custom-ident>+  

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

Примеры

Установление размеров контейнера по строке

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

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

Явным способом создания контекста контейнера является объявление container-type с необязательным container-name:

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

Сокращённая запись container предназначена для упрощения определения в одном объявлении:

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

Затем вы можете нацелиться на этот контейнер по имени, используя псевдокласс @container:

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

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

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

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

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

См. также

CSS запросы к контейнерам
Использование запросов размера и стиля контейнера
@container псевдокласс
CSS contain свойство
CSS container-type свойство
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