CSSContainerRule

Интерфейс CSSContainerRule представляет собой отдельное правило CSS @container.

Объект этого типа может использоваться для получения условий запроса для @container, а также имени контейнера, если оно определено. Обратите внимание, что имя контейнера и запрос вместе определяют «текст условия», который можно получить, используя CSSConditionRule.conditionText.

Наследует свойства от своих предков CSSConditionRule, CSSGroupingRule и CSSRule.

CSSContainerRule.containerName Только для чтения

Возвращает строку, представляющую имя @container, или пустую строку.

CSSContainerRule.containerQuery Только для чтения

Возвращает строку, представляющую набор функций или «условий контейнера», которые оцениваются для определения, применяются ли стили в связанном @container.

Нет специфических методов; наследует методы от своих предков CSSConditionRule, CSSGroupingRule и CSSRule.

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

Первая часть кода просто создает список для регистрации свойств правила контейнера, а также JavaScript-метод log() для упрощения добавления свойств.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

Затем мы определяем HTML для card (<div>) внутри post.

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

CSS для примера показан ниже. Как описано в соответствующем примере @container, CSS для элемента контейнера задаёт тип контейнера. Затем @container применяет новую ширину, размер шрифта и цвет фона к карточке, если ширина меньше 650px.

<style id="example-styles">
  /* A container context based on inline size */
  .post {
    container-type: inline-size;
  }

  /* Apply styles if the container is narrower than 650px */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

Приведенный ниже код получает HTMLStyleElement, связанный с примером по его id, а затем использует его свойство sheet для получения StyleSheet. Из StyleSheet мы получаем набор cssRules, добавленных в лист. Так как мы добавили @container в качестве второго правила выше, мы можем получить связанное CSSContainerRule, используя второй элемент (с индексом «1») в cssRules. Наконец, мы регистрируем свойства containerName, containerQuery и conditionText (унаследованные).

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

Выходной код примера показан ниже. В разделе регистрации отображается containerName, которое равно пустой строке, так как имя не определено. Строки containerQuery и conditionText также регистрируются и имеют одинаковое значение, поскольку имя не определено. Карточка должна изменять цвет фона по мере изменения ширины страницы через 650px.

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

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

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

Как описано в @container, 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>

Код для получения листа и правил почти идентичен предыдущему примеру. Единственное отличие в том, что в этом примере у нас три правила CSS, поэтому для получения связанного CSSContainerRule мы получаем третий элемент в 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}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

В выходном коде примера ниже отображаются строки containerName и containerQuery. Строка conditionText также регистрируется и показывает комбинацию этих двух строк. Размер заголовка в разделе карточки должен удваиваться по мере превышения ширины страницы 700px.

• CSS container-name, container-type, и container сокращённые свойства
• Модуль CSS-содержимого
• Запросы по контейнерам
• Использование запросов к размеру и стилю контейнера