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

Свойство CSS container-name задаёт список имён контейнеров запросов, используемых правилом @container в запросе контейнера.

Синтаксис

container-name: none;

/* A single name */
container-name: my-layout;

/* Multiple names */
container-name: my-page-layout my-component-library;

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

Значения

Это свойство задаётся списком значений <custom-ident>, разделённых пробелами, или ключевым словом none:

none

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

<custom-ident>

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

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

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

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

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

Описание

Если имя не задано, запрос контейнера применяет стили к элементам на основе таких характеристик, как размер или состояние прокрутки ближайшего предка с контекстом изоляции.

Если контексту изоляции задано имя, на него можно ссылаться напрямую, указав это имя в правиле @container.

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

Примеры

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

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

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

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

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

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

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

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

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

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

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

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

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

@container meta (width <= 500px) {
  p {
    visibility: hidden;
  }
}

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

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

В этом примере показано, как использовать запрос контейнера только по имени.

HTML

Добавим <div> с id, равным container, и три элемента <p>: два внутри контейнера и один за его пределами:

<div id="container">
  <p>I'm in the container.</p>
  <p>I'm also in the container.</p>
</div>
<p>I'm not in the container.</p>

CSS

Присвоим контейнеру имя:

#container {
  container-name: my-container;
}

Затем можно выборочно применить стили только к элементам внутри контейнеров с таким именем, как показано в следующем фрагменте.

@container my-container {
  p {
    background-color: lime;
    font-size: 1.3rem;
    width: 50vw;
    padding: 0.5rem;
    font-family: sans-serif;
  }
}

Результат

Заданные стили должны применяться только к первому и второму элементам <p>, но не к третьему.

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

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

См. также

• Запросы контейнеров CSS
• Использование запросов размера и стиля контейнера
• Использование запросов состояния прокрутки контейнера
• @container — правило
• Сокращённое свойство CSS container
• Свойство CSS container-type
• Свойство CSS content-visibility