CSSContainerRule: свойство containerQuery

Только для чтения containerQuery свойство интерфейса CSSContainerRule возвращает строку, представляющую условия контейнера, которые оцениваются при изменении размера контейнера, чтобы определить, применяются ли стили в связанном @container.

Например, значение containerQuery для @container ниже равно (min-width: 700px):

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

Строка, содержащая запрос к контейнеру.

Обратите внимание, что значение может не совпадать с исходной строкой, так как могут выполняться нормализации, такие как удаление пробелов.

В примере ниже определяется безымянное правило @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 применяет новую ширину, размер шрифта и цвет фона к элементу "card", если ширина меньше 650 пикселей.

<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. И наконец, выводим имя контейнера и свойства запроса.

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

Пример вывода показан ниже. Раздел журнала содержит строку запроса. Блок «card» должен изменять фон, когда ширина страницы переходит через 650 пикселей.

• Модуль CSS с содержанием
• Запросы к контейнерам
• Использование запросов к размеру и стилям контейнера