CSSContainerRule: свойство containerName

Только для чтения containerName свойство интерфейса CSSContainerRule представляет имя контейнера ассоциированного CSS @container at-правила.

Например, значение containerName для @container ниже равно sidebar:

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Строка, содержащая container-name ассоциированного @container с этим CSSContainerRule. Если @container не именован, функция возвращает пустую строку ("").

В примере ниже определяется именованное @container правило и отображаются свойства связанного CSSContainerRule. CSS очень похож на тот, что в примере @container Создание контекстов именованных контейнеров.

Сначала мы определяем HTML для card (<div>) находящегося внутри post.

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

CSS для элемента контейнера задает тип контейнера и может также задать имя. Карточка имеет размер шрифта по умолчанию, который переопределяется для @container именованного sidebar если минимальная ширина больше 700px.

<style id="example-styles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (min-width: 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

Код ниже получает HTMLStyleElement ассоциированный с примером, используя его id, а затем использует его свойство sheet для получения StyleSheet. Из StyleSheet мы получаем набор cssRules добавленных в лист. Поскольку мы добавили @container как третье правило выше, мы можем получить связанное CSSContainerRule используя третий элемент (индекс "2") в cssRules. И наконец, мы выводим имя контейнера и запрошенные свойства (код, выполняющий вывод, не показан).

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);

Ниже показан пример вывода. В разделе лога перечислен контейнер имени. Размер заголовка в карточке должен удваиваться, когда ширина страницы превышает 700px.

• CSS container сокращенное свойство
• CSS модуль ограничения
• Запросы к контейнерам
• Использование запросов к размеру и стилю контейнера