02.08.2021

Контейнерные запросы

Контейнерные запросы

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

Наконец это случилось: контейнерные запросы действительно в деле! После того, как нам годами гласили, что это невозможно, в прошлом году вышло наконец движение в нужном направлении. В этом году легенда CSS Miriam Suzanne (и другие) усердно работала над тем, чтоб все двигалось в правильном направлении, и мы, в конце концов, можем увидеть контейнерные запросы в браузере.

Примите к сведению

На данный момент контейнерные запросы находятся на стадии макета и доступны только в Chrome Canary. Чтоб включить контейнерные запросы, перейдите в Chrome по адресу chrome://flags и включите там контейнерные запросы.

Прогрессивный подход

Естественно, первое, на чем я сосредотачиваюсь: как мы можем использовать контейнерные запросы прямо на данный момент ? Если браузер не понимает какой-то CSS, он проигнорирует его и продолжит синтаксический анализ остального, потому мы можем эффективно использовать контейнерные запросы уже сейчас. Вот как бы я реализовал это:

Это традиционный пример с проблемой дизайна: как вы справляетесь с постоянным состоянием, когда контейнер card не находится снутри меньшего родительского элемента или небольшого окна просмотра? Естественно, мы можем использовать медиа-запросы, но они не очень полезны, если card окажется в нескольких контекстах — скажем, в дизайн-системе.

Одно резвое и простое решение, которое мы можем воплотить, — это добавить max-width, поэтому, если контейнер card окажется в большенном контексте, он, по крайней мере, не будет смотреться ужасно.

Все-же это не идеально, но вполне приемлемо. Это малое жизнеспособное решение, которое будет работать полностью нормально.

Давайте будем равномерно использовать контейнерный запрос. Во-первых, давайте создадим элемент <main> нашим контейнером.

CSS

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

CSS

То, что мы делаем тут, очень похоже на медиа-запрос. Когда контейнер имеет ширину, равную либо большую чем 40em, мы можем поменять макет card, чтобы он лучше соответствовал дополнительному месту. Мы даже стараемся сделать изображение лучше с помошью aspect-ratio.

Контейнерные запросы

Card сейчас имеет красивый встроенный макет и квадратное изображение

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

Контейнерные запросы

Card сейчас реагирует на размеры своих контейнеров

Возьмем приведенный выше пример. Это гибкий макет, который позволяет дочерним элементам расти, заполняя место. C контейнерными запросами нет никаких заморочек, потому что мы устанавливаем изменяемые элементы как контейнер, а правила, которые мы устанавливаем для контейнера card, делают все остальное. Комфортно!

Наконец, мы можем набирать текст в контексте

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

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

CSS

Подведение итогов

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

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

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

Наконец, вот пример демонстрации, которую я сделал, когда в первый раз познакомился с контейнерными запросами.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *