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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с февраля 2023 года.

container — сокращённая запись свойства 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` `container-type`
Применяется к	всем элементам
Наследуется	нет
Проценты	как у каждого из свойств сокращённой записи: `container-name` `container-type`
Вычисленное значение	как у каждого из свойств сокращённой записи: `container-name` `container-type`
Тип анимации	как у каждого из свойств сокращённой записи: `container-name` `container-type`

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

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

Примеры

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

Рассмотрим следующий пример 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 (width >= 400px) {
  /* <stylesheet> */
}

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

Спецификация
Модуль условных правил CSS, уровень 5 # container-shorthand

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`container`	105	105	110	91	16	105	110	72	16	20.0	105	16
`inline-size`	105	105	110	91	16	105	110	72	16	20.0	105	16
`name-only_queries`	148	148	149	132	26.4	148	149	99	26.4	Нет	148	26.4
`none`	105	105	110	91	16	105	110	72	16	20.0	105	16
`normal`	109	109	110	95	16	109	110	74	16	21.0	109	16
`scroll-state`	105	105	110	91	16	105	110	72	16	20.0	105	16
`size`	105	105	110	91	16	105	110	72	16	20.0	105	16

См. также

Контейнерные запросы CSS
Использование запросов размера и стиля контейнера
@container директива
Свойство CSS contain
Свойство CSS container-type
Свойство CSS container-name
Свойство CSS content-visibility

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