Наконец-то она здесь. Ну, почти.

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

Вы даже можете попробовать это прямо сейчас в Google Chrome. Перейдите к chrome://flags/#enable-container-queries в браузере Chrome, установите для него значение enabled, и все готово.

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

Новый запрос CSS, который предлагает возможность для дочернего элемента применять правила стиля на основе контейнера.

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

Вот простое использование контейнерного запроса,

По сути, это говорит браузеру применить стиль background-color: blue если контейнер имеет ширину не менее 300 пикселей.

Синтаксис довольно прост и очень похож на медиа-запрос. Запрос контейнера содержит три дополнительных свойства и правило.

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

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

И, наконец, container используется как сокращенное свойство, которое можно использовать для установки как container-type, так и container-name в одном объявлении.

Чтобы выбрать контейнер, мы используем @container, чтобы указать правило для ближайшего контекста включения.

Это очень увлекательно, потому что дочерний элемент может осознавать свое окружение и сам решать, как реагировать.

Высокомодульный компонент

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

Мы хотим, чтобы компонент адаптировался к разным размерам экрана. На самом маленьком видовом экране миниатюра и детали располагаются вертикально. В немного большем окне просмотра миниатюра будет находиться слева. И, наконец, в самом большом окне просмотра наш контент будет располагаться поверх миниатюры.

Начнем с HTML-кодов,

И CSS,

Все идет нормально. Наша карта хорошо выглядит на меньшем экране, как мы и планировали.

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

Мы можем использовать display: flex; для размещения контента по горизонтали, а также мы добавили небольшие изменения в эскиз и детали, чтобы он по-прежнему выглядел хорошо.

И, наконец, в самой большой области просмотра мы обновили миниатюру, чтобы заполнить пробелы, добавили немного темного наложения поверх миниатюры с помощью background: linear-gradient(....);, мы также установили для .card-detail значение position: absolute; и изменили цвет заголовка и описания на #ffffff.

Наша карточка теперь выглядит так, если ширина контейнера не менее 560px.

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

Я создал пример, чтобы продемонстрировать мастерство запроса контейнера,

Как результат,

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

Более того, зависимость от глобального окна просмотра через медиазапрос делает наш компонент менее модульным — другими словами, его гораздо сложнее повторно использовать в разных макетах.

Размер и другие аспекты

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

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

Первый тип, запрос размера контейнера, устанавливает контейнер для включения запроса относительно его размера. Возможные значения этого типа: size, inline-size и block-size.

Тип size устанавливает размер запрашиваемого контейнера как по встроенной, так и по блочной оси.

В CSS встроенные и блочные оси относятся к направлению, в котором текст течет внутри строки. Например, в английском языке текст течет слева направо и сверху вниз.

Контейнер, установленный на тип size, позволяет запрашивать его по его width и height. Аналогично, inline-size и block-size позволяют запрашивать контейнеры width и height соответственно.

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

Второй тип называется запрос в контейнерном стиле. Этот тип открывает возможность запрашивать контейнер на основе его единственного конкретного свойства.

Запрос состояния контейнера

Третий тип, запрос состояния контейнера, устанавливает контейнер для включения запроса относительно текущего состояния контейнера, например, является ли контейнер position: sticky зависшим или он в настоящее время виден на экране.

Скорее всего, при нормальных обстоятельствах вам понадобится только запрос размера, но я здесь не для того, чтобы судить 😅. Кроме того, это все еще черновики и в будущем могут ожидаться **изменения. Но это дает нам представление о том, что возможно с запросом контейнера.

Заключение

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

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

Первоначально опубликовано на https://frendyguo.me.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.