CSS Container Queries: Современный подход к адаптивному дизайну

CSS Container Queries – это инновационный инструмент, который позволяет регистрировать элемент как «контейнер» и применять стили к другим элементам, когда этот контейнер соответствует определенным условиям.

Введение: Контейнерные Запросы

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

.parent {
  container-name: hero-banner;
  container-type: inline-size;

  /* или container: hero-banner / inline-size; */
}

.child {
  display: flex;
  flex-direction: column;
}

/* Когда контейнер больше 60 символов... */
@container hero-banner (width > 60ch) {
  /* Изменяем направление flex-элементов .child. */
  .child { 
    flex-direction: row;
  }
}

Почему стоит использовать CSS Container Queries?

1. Контроль над элементами в зависимости от размера контейнера: При использовании контейнерных запросов элементы могут изменяться в зависимости от размеров их контейнера, а не окна просмотра.
2. Предсказуемость стилей: Контейнерные запросы позволяют определять все стили для конкретного элемента более предсказуемо.
3. Повторное использование: Компоненты, созданные с контейнерными запросами, легко перенести в другие проекты, и они будут вести себя одинаково предсказуемо.
4. Новые типы единиц измерения: Вводят новые типы CSS-единиц измерения, которые можно использовать для задания размеров элементов в зависимости от размеров их контейнеров.

Контейнерные запросы – это мощный инструмент, который расширяет возможности адаптивного дизайна, делая его более гибким и предсказуемым.

Регистрация элементов как контейнеров

Для использования CSS Container Queries необходимо зарегистрировать элемент как контейнер. Это делается с помощью свойства container.

.cards {
  container-name: card-grid;
  container-type: inline-size;

  /* Сокращенная запись */
  container: card-grid / inline-size;
}

В этом примере создается контейнер с именем card-grid, который можно запрашивать по его inline-size (ширине в горизонтальном режиме письма).

Свойства регистрации контейнеров:

• container-name: Регистрирует элемент как контейнер, который применяет стили к другим элементам в зависимости от его размеров.
• container-type: Определяет тип контейнера, который может применять стили к другим элементам при выполнении определенных условий.
• container: Сокращенная запись, объединяющая свойства container-name и container-type в одно объявление.

Важные моменты при регистрации контейнеров:

1. container-name (имя контейнера):
   • Свойство не обязательно.
   • Неименованный контейнер будет соответствовать любому контейнерному запросу, который не нацелен на конкретный контейнер. Это может привести к совпадению с несколькими условиями.
2. container-type (тип контейнера):
   • Свойство обязательно, если мы хотим запрашивать контейнер по его размеру или inline-size.
   • size – позволяет запрашивать контейнер по его размеру (ширине или высоте).
   • inline-size – позволяет запрашивать контейнер по его inline-size, что эквивалентно ширине в стандартном горизонтальном режиме письма.
3. container:
   • Сокращенная запись, объединяющая container-name и container-type.
4. Дополнительные особенности:
   • Контейнер не может изменять свои собственные стили, но может изменять стили своих содержимых элементов.
   • Контейнер должен иметь явно заданный размер, так как его содержимое не должно влиять на его размеры.

Пример использования:

@container card-grid (inline-size > 500px) {
  .card-item {
    display: flex;
    flex-direction: row;
  }
}

В этом примере, когда ширина контейнера card-grid превышает 500px, элементы с классом card-item будут выстраиваться в строку.

Некоторые нюансы использования CSS Container Queries

• Неименованные контейнеры: Если контейнер не имеет имени, он будет соответствовать любому запросу, не направленному на конкретный контейнер.
• Размер контейнера: Свойство container-type должно быть установлено в size или inline-size, чтобы запрашивать размер контейнера.
• Запросы могут быть объединены: Можно использовать логические операторы, такие как and, or и not, для создания более сложных условий.

Запросы к контейнерам

CSS Container Queries позволяют нам применять стили к элементам на основе условий, касающихся размеров контейнера. Это делается с помощью правила @container, которое работает аналогично медиазапросам, но ориентировано на размеры контейнера, а не окна просмотра.

Пример запроса к контейнеру:

@container my-container (width > 60ch) {
  article {
    flex-direction: row;
  }
}

В этом примере, если ширина контейнера my-container превышает 60 символов (ch), направление flex-элементов внутри статьи (article) изменяется на строку (row).

Основные аспекты запроса к контейнеру:

1. @container: Эта директива указывает браузеру, что мы работаем с контейнерным запросом, а не с медиазапросом.
2. Имя контейнера: Часть my-container ссылается на имя контейнера, как оно было определено в свойстве container-name.
3. Условие запроса: (width > 60ch) – условие, при котором применяется стиль. В данном случае это ширина контейнера, превышающая 60 символов.

Важные моменты:

1. Имя контейнера не обязательно:
   • Если имя контейнера не указано, то любой зарегистрированный контейнер будет соответствовать условиям при их выполнении.
2. Запрос размера контейнера:
   • Можно запрашивать размер контейнера, если свойство container-type установлено в size или inline-size.
3. Поддержка различных типов длин:
   • Помимо ширины (inline-size), можно запрашивать соотношение сторон (aspect-ratio), высоту (block-size) и ориентацию (например, портретная или ландшафтная).
4. Поддержка диапазонного синтаксиса:
   • Запросы поддерживают операторы больше (>), меньше (<), равно (=), больше или равно (>=) и меньше или равно (<=).
5. Возможность объединения запросов:
   • Можно создавать сложные условия с помощью логических операторов and, or и not.

Пример объединенного запроса:

@container (width > 500px) and (height > 300px) {
  .box {
    background-color: lightblue;
  }
}

В этом примере, если ширина контейнера превышает 500 пикселей и высота превышает 300 пикселей, фоновый цвет элемента с классом .box изменится на светло-голубой.

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

Свойства и значения запросов к контейнерам

Чтобы эффективно использовать CSS Container Queries, важно понимать основные свойства и значения, которые они предлагают. Рассмотрим основные свойства: container-name, container-type и сокращенное свойство container.

Свойство container-name

element {
  container-name: none | <custom-ident>+;
}

• none: Значение по умолчанию. Элемент не имеет имени контейнера. Обычно это значение не используется явно, так как его цель — задать поведение по умолчанию.
• <custom-ident>: Имя контейнера, которое может быть любым, за исключением зарезервированных слов, таких как default, none, at, no, or.

Пример:

.cards {
  container-name: card-grid;
}

Свойство container-type

element {
  container-type: normal | size | inline-size;
}

• normal: Элемент является контейнером, который можно запрашивать по его стилям, а не по размеру. Все элементы по умолчанию являются контейнерами стилей, поэтому это значение редко задается явно.
• size: Запрос контейнера по его размеру (ширине или высоте).
• inline-size: Запрос контейнера по его ширине в стандартном горизонтальном режиме письма.

Пример:

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

Свойство container

element {
  container: <'container-name'> [ / <'container-type'> ]?
}

• Если <'container-type'> опущено, оно сбрасывается на значение по умолчанию normal, что определяет контейнер стилей вместо контейнера размеров.

Пример:

.cards {
  container: card-grid / inline-size;
}

Единицы измерения контейнеров

CSS Container Queries вводят новые типы единиц измерения, которые позволяют задавать размеры элементов относительно размеров контейнера.

Ширина и высота контейнера

• cqw (Container Query Width): 1% от ширины запрашиваемого контейнера.
• cqh (Container Query Height): 1% от высоты запрашиваемого контейнера.

Логические направления контейнера

• cqi (Container Query Inline Size): 1% от inline-size контейнера (ширина в горизонтальном режиме письма).
• cqb (Container Query Block Size): 1% от block-size контейнера (высота в горизонтальном режиме письма).

Минимальные и максимальные размеры контейнера

• cqmin (Container Query Minimum Size): Значение cqi или cqb, в зависимости от того, какое из них меньше.
• cqmax (Container Query Maximum Size): Значение cqi или cqb, в зависимости от того, какое из них больше.

Пример использования:

.card {
  width: 50cqw; /* 50% от ширины контейнера */
  height: 30cqh; /* 30% от высоты контейнера */
}

Запросы стилей контейнеров

Запросы стилей контейнеров (Container Style Queries) позволяют применять стили к элементам на основе стилей контейнеров, а не их размеров. Это мощный инструмент, который дает возможность условной стилизации элементов, основываясь на стилях их контейнеров.

Пример регистрации контейнера стилей:

article {
  container-name: card;
}

В данном примере элемент article регистрируется как контейнер с именем card. Однако регистрировать контейнер не обязательно, так как все элементы по умолчанию считаются контейнерами стилей.

Использование запросов стилей контейнеров:

@container style(--bg-color: #000) {
  p { 
    color: #fff; 
  }
}

В этом примере, если значение кастомного свойства --bg-color контейнера равно черному (#000), цвет текста внутри параграфа (p) изменится на белый (#fff).

Основные аспекты:

1. Синтаксис: Похож на медиазапросы, но используется директива @container вместо @media.
2. Функция style(): Указывает условия, основанные на стилях контейнера.
3. Кастомные свойства: Запросы стилей могут оценивать значения CSS переменных (кастомных свойств).

Пример с кастомными свойствами:

.card-wrapper {
  --bg-color: #000;
}

.card {
  @container style(--bg-color: #000) {
    background-color: #fff;
  }
}

В этом примере, если значение кастомного свойства --bg-color контейнера равно черному (#000), фон элемента с классом card изменится на белый (#fff).

Вложенные запросы стилей

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

Пример вложенного запроса:

@container style(--featured: true) {
  article {
    grid-column: 1 / -1;
  }
  @container style(--theme: dark) {
    article {
      --bg-color: #000;
      --text: #fff;
    }
  }
}

В этом примере, если значение кастомного свойства --featured контейнера равно true, элемент article займет все колонки сетки. Если внутри того же контейнера значение кастомного свойства --theme равно dark, будут применены дополнительные стили, изменяющие цвет фона и текста.

Спецификация и поддержка браузеров

CSS Container Queries являются частью CSS Containment Module Level 3 спецификации, которая на момент написания находится на стадии черновика редактора. Понимание текущей спецификации и поддержки браузеров важно для эффективного использования этих возможностей в веб-разработке. Основные моменты спецификации включают:

1. Регистрация элементов как контейнеров: Использование свойств container-name, container-type и container для регистрации элементов как контейнеров.
2. Запросы к контейнерам: Использование директивы @container для создания условий, основанных на размерах или стилях контейнера.
3. Свойства и значения: Описание различных свойств, таких как container-name, container-type и сокращенного свойства container.
4. Единицы измерения: Введение новых единиц измерения, таких как cqw, cqh, cqi и cqb.

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

Поддержка CSS Container Queries варьируется в зависимости от браузера и типа запросов (размеров или стилей). Запросы размеров контейнеров поддерживаются более широко, тогда как запросы стилей контейнеров находятся на стадии экспериментов.

Поддержка запросов размеров контейнеров

Браузер	Версия
Chrome	105 и выше
Firefox	110 и выше
Edge	106 и выше
Safari	16.0 и выше
Android Chrome	126 и выше
Android Firefox	127 и выше
iOS Safari	16.0 и выше

Поддержка запросов стилей контейнеров

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

Демо и примеры

CSS Container Queries открывают новые возможности для адаптивного веб-дизайна. Давайте рассмотрим несколько практических примеров, которые демонстрируют, как можно использовать эти запросы для создания гибких и адаптивных интерфейсов.

Пример 1: Изменение макета карточек

В этом примере мы изменим расположение карточек в зависимости от размера их контейнера.

<div class="card-grid">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <div class="card">Карточка 3</div>
</div>

.card-grid {
  container: card-grid / inline-size;
  display: flex;
  flex-direction: column;
}

.card {
  padding: 20px;
  margin: 10px;
  background-color: #f0f0f0;
}

@container card-grid (width > 500px) {
  .card-grid {
    flex-direction: row;
  }
}

Когда ширина контейнера card-grid превышает 500 пикселей, направление флекс-бокса изменяется с колонки на строку, и карточки выстраиваются горизонтально.

Пример 2: Адаптивный текст в зависимости от ширины контейнера

<div class="text-container">
  <p class="responsive-text">Этот текст изменит свой размер в зависимости от ширины контейнера.</p>
</div>

.text-container {
  container: text-container / inline-size;
}

.responsive-text {
  font-size: 16px;
}

@container text-container (width > 400px) {
  .responsive-text {
    font-size: 20px;
  }
}

@container text-container (width > 600px) {
  .responsive-text {
    font-size: 24px;
  }
}

В этом примере текст внутри контейнера text-container изменяет свой размер в зависимости от ширины контейнера. При ширине более 400 пикселей текст увеличивается до 20 пикселей, а при ширине более 600 пикселей — до 24 пикселей.

Пример 3: Условное изменение фона на основе стиля контейнера

<div class="styled-container">
  <p>Этот фон изменится в зависимости от кастомного свойства контейнера.</p>
</div>

.styled-container {
  --bg-color: #fff;
  background-color: var(--bg-color);
  padding: 20px;
}

@container style(--bg-color: #fff) {
  .styled-container p {
    color: #000;
  }
}

@container style(--bg-color: #000) {
  .styled-container p {
    color: #fff;
  }
}

Здесь цвет текста внутри контейнера styled-container изменяется в зависимости от значения кастомного свойства --bg-color. Если оно равно белому (#fff), текст становится черным, а если черному (#000), текст становится белым.

CSS трюки которые нужно знать!

Заключение

CSS Container Queries представляют собой мощный инструмент для создания адаптивных веб-интерфейсов, предоставляя возможность изменять стили элементов на основе размеров или стилей их контейнеров. Это расширяет возможности разработчиков в построении гибких и отзывчивых дизайнов, которые адаптируются не только к размерам экрана, но и к особенностям содержимого.