02.08.2021

Медиа-запросы во времена @container

Медиа-запросы во времена @container

От создателя: теперь, когда на горизонте возникают контейнерные запросы, нужны ли нам вообщем медиа-запросы? Есть ли будущее, в котором мы будем создавать адаптивные интерфейсы на сто процентов без них?

Итан, который ввел термин адаптивный веб-дизайн более 10 лет назад, недавно сказал, что макеты без медиа-запросов, непременно, имеют определенные ограничения: Можем ли мы считать гибкий макет «отзывчивым», если он не употребляет никаких медиа-запросов, а использует только контейнерные запросы? […] Я бы ответил: да, непременно.

На CSS-Tricks у Криса были похожие мысли. Он поставил задачку изучить, как и где медиа-запросы употребляются сегодня, и будут ли они как и раньше необходимы в будущем: Распространенным вопросом, является последующий — если бы у нас были контейнерные запросы, использовали бы мы их для подавляющего большинства медиа-запросов, которые мы используем сейчас. Задача заключается в том, чтобы посмотреть на кодовую базу CSS свежим взором, зная, как в настоящее время работают запросы @container.

Я задумался и посмотрел на некоторые из своих проектов — и да, большая часть того, где я использую @media сейчас, вероятно, может быть заменено на @container. Тем не наименее, я придумал несколько сценариев, в которых, как мне кажется, медиа-запросы как и раньше будут необходимы.

Для макета странички

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

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

CSS

Для глобальных токенов

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

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

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

CSS

Для пользовательских предпочтений и фактических «медиа» запросов

Размеры экрана — не единственное, что мы можем найти с помощью медиа-запросов. Спецификация Media Queries Level 4 Spec (уровень 5 в текущее время является рабочим проектом) перечисляет огромное количество различных запросов, связанных с предпочтениями юзера, например:

prefers-reduced-motion

prefers-contrast

prefers-reduced-transparency

prefers-color-scheme

inverted-colors

и другие

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

CSS

В конце концов, запросы на подобе @media print, никуда не пропадают. Дискуссируются экспериментальные идеи новых медиа-запросов, например, для «складывающихся» устройств:

Медиа-запросы во времена @container

CSS

Для компонент, привязанных к окну

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

Посмотрите, например, на вкладку Twitter «Сообщения» понизу экрана. Соответствующим контейнером является окно, потому имеет смысл использовать здесь медиа-запрос и использовать position:fixed только в точке останова.

Для высоты

Текущая реализация @container позволяет запрашивать только ширину элемента (его «встроенную» ось), но не его высоту.

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

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

CSS

Сочитайте контейнерные запросы и медиа-запросы

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

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

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

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

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