Знакомство с контейнерными запросами CSS

Источник: «Responsive Web Design Evolved: Introducing CSS Container Queries»
Контейнерные запросы CSS — интересное дополнение к миру CSS. В этой статье мы дадим вам базовое представление о контейнерных запросах CSS и о том, как они работают.

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

А что, если я расскажу вам, что существует новый метод, называемый контейнерными запросами, который можно использовать для стилизации элементов, просто учитывая размер их контейнера?

Контейнерные запросы CSS решают большинство проблем, связанных с написанием медиа запросов, и позволяют разработчикам применять стили на основе размера контейнера без учёта области просмотра или других характеристик устройства.

В этой статье я подробно расскажу о контейнерных запросах CSS с примерами кода, чтобы дать вам лучшее понимание.

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

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

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

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

1. Контекст именования

Именование контекста содержимого в контейнерных запросах CSS позволяет с помощью at-правила @container нацеливаться на определённый контекст содержимого с помощью различных стилей.

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

В следующем примере создаётся контекст вложения с именем navbar и он используется в at-правиле @container для применения стилей, когда минимальная ширина контекста вложения navbar составляет 500 px или более.

.container {
container-type: inline-size;
container-name: navbar;
}

@container navbar (min-width: 500px) {
.ul {
display: grid;
}
}

2. Единицы длины контейнерного запроса CSS

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

Единицами длины контейнерного запроса являются:

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

@container (min-width: 500px) {
.nav-bar h1 {
font-size: max(1.75em, 1.1em + 2cqi);
}
}

3. Обратная совместимость для контейнерных запросов

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

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

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

Написание первого контейнерного запроса

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

Например, предположим, что у вас есть элемент контейнера с классом .container и вы хотите применить различные стили в зависимости от ширины контейнера. Для этого можно использовать следующий CSS:

/* html file */
<html lang="en">
<head>
<title>Container Queries</title>
</head>
<body>
<div class="container">
<div class="paragraph">
Lorem Ipsum is ...
</div>
<div class="paragraph">
Lorem Ipsum is ...
</div>
<div class="paragraph">
Lorem Ipsum is ...
</div>
</div>
</body>
</html>


/* css file */
.container {
container-type: inline-size;
container-name: maincontainer;
display: grid;
gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
}

@container maincontainer (min-width: 500px) {
grid-template-columns: 1fr;
}

.paragraph{
background: rgb(231, 227, 227);
padding:1em;
font-size: 18px;
}

В данном примере первый блок стилей будет применяться ко всем классам .container по умолчанию. Второй блок стилей будет применяться к классам .container с шириной не менее 500 px.

Стили применённые по умолчаниюСтиль применённый к классам не менее 500px

Условия медиа запроса min-width, max-width, min-height и max-height можно использовать в правиле @container для указания размеров контейнера, на который должны срабатывать стили. Для создания более сложных запросов можно комбинировать эти условия с помощью логических операторов (например, and, or).

Поддержка браузеров

В настоящее время контейнерные запросы поддерживаются в следующих версиях браузеров:

Подробную спецификацию поддержки браузеров можно найти здесь.

Преимущества контейнерных запросов

Недостатки контейнерных запросов

Заключение

Контейнерные запросы CSS — интересное дополнение к миру CSS. Они представляют собой альтернативу медиа-запросам, и разработчики могут легко работать со стилями, основанными на размерах контейнеров. Надеюсь, что эта статья дала вам базовое представление о контейнерных запросах CSS и о том, как они работают.

Спасибо за прочтение.

Дополнительные материалы

Предыдущая Статья

Десять основных соглашений об именовании JavaScript

Следующая Статья

Шесть возможностей JavaScript ES12, которые следует использовать