CSS контейнерные запросы

Для использования контейнерных запросов необходимо объявить контекст содержательности для элемента, чтобы браузер знал, что вы, возможно, захотите запросить размеры этого контейнера позже. Для этого используйте свойство container-type со значением size, inline-size, или normal.

Эти значения имеют следующие эффекты:

size

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

inline-size

Запрос будет основан на инлайновых размерах контейнера. Применяет размещение, стиль и содержательность для размера в строке к элементу.

normal

Элемент не является контейнером запроса для запросов размера контейнера, но остается контейнером запроса для запросов стиля контейнера.

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

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

Вы можете создать контекст содержательности, используя свойство container-type:

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

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

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

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Используя контейнерные запросы, карточку можно повторно использовать в различных областях страницы, не зная, где именно она будет размещена каждый раз. Если контейнер с карточкой уже 700px, шрифт заголовка карточки будет маленьким, а если карточка находится в контейнере шире 700px, шрифт заголовка карточки будет больше.

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

В предыдущем разделе контейнерный запрос применял стили на основе ближайшего предка с контекстом содержательности. Можно дать контексту содержательности имя, используя свойство container-name. После присвоения имени, имя можно использовать в запросе @container для того, чтобы нацелиться на определенный контейнер. Следующий пример создает контекст содержательности с именем sidebar:

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

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

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

Дополнительную информацию о наименовании контекстов содержательности см. на странице container-name.

Краткая запись объявления контекста содержательности — это использование свойства container:

.post {
  container: sidebar / inline-size;
}

Дополнительную информацию об этом свойстве см. в справочнике container.

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

Единицы длины контейнерных запросов:

• cqw: 1% от ширины контейнера запроса
• cqh: 1% от высоты контейнера запроса
• cqi: 1% от размера контейнера в строке
• cqb: 1% от размера контейнера в блоке
• cqmin: Меньшее из значений cqi или cqb
• cqmax: Большее из значений cqi или cqb

Следующий пример использует единицу cqi для установки размера шрифта заголовка на основе размера контейнера в строке:

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

Дополнительную информацию об этих единицах см. в справочнике Единицы длины контейнерных запросов.

Для браузеров, которые пока не поддерживают контейнерные запросы, можно использовать grid и flex, чтобы создать аналогичный эффект для компонента карточки, используемого на этой странице. Следующий пример использует объявление grid-template-columns для создания двухколоночной структуры для компонента карточки.

.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Если вы хотите использовать одноколоночную структуру для устройств с меньшей областью просмотра, вы можете использовать запрос на медиа для изменения шаблона сетки:

@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

• Запросы на медиа
• CSS правило @container
• CSS свойство contain
• CSS сокращённое свойство container
• CSS свойство container-name
• CSS свойство content-visibility
• Использование запросов размера и стиля контейнера
• Say Hello to CSS Container Queries by Ahmad Shadeed
• Container Queries: a Quick Start Guide
• Сборник статей по контейнерным запросам