container-name

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

Новое

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

Свойство container-name CSS задаёт список имён контейнеров запросов, используемых в правиле @container в запросах на контейнеры. Запрос на контейнер применит стили к элементам на основе размера ближайшего предка с контекстом ограничения. Если контексту ограничения присвоено имя, его можно нацелить с помощью правила @container вместо ближайшего предка с контекстом ограничения.

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

Синтаксис

container-name: none;

/* A single name */
container-name: myLayout;

/* Multiple names */
container-name: myPageLayout myComponentLibrary;

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

Значения

none

Значение по умолчанию. У контейнера запроса нет имени.

<custom-ident>

Регистрозависимая строка, используемая для идентификации контейнера. Применяются следующие условия:

Имя не должно быть равно or, and, not, или default.
Значение имени не должно быть в кавычках.
Разрешено использование дефисного идентификатора, предназначенного для обозначения идентификаторов, определённых автором (например, --container-name).
Разрешается список из нескольких имён, разделённых пробелом.

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

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

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

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

Примеры

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

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

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

Для создания контекста ограничения добавьте свойство container-type к элементу в CSS. Следующий пример создаёт два контекста ограничения: один для метаинформации карточки и один для выдержки из поста:

Примечание: Краткая запись для этих объявлений описана на странице container.

.post-meta {
  container-type: inline-size;
}

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

Написание запроса на контейнер с помощью правила @container применит стили к элементам контейнера, когда запрос вернёт истину. Следующий пример содержит два запроса на контейнер: один, который будет применяться только к содержимому элемента .post-excerpt, и один, который будет применяться к содержимому элементов .post-meta и .post-excerpt:

@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

Дополнительную информацию о написании запросов на контейнеры см. на странице Запросы CSS на контейнеры.

Использование нескольких имён контейнеров

Вы также можете указать несколько имён контейнера, разделённых пробелом:

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

Это позволит вам нацеливаться на контейнер с помощью любого имени в правиле @container. Это полезно, если вы хотите нацеливаться на один и тот же контейнер с несколькими запросами на контейнеры, где любое условие может быть истинным:

@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

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

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

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

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

См. также

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