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

Новый адаптивный дизайн: веб-дизайн в мире, управляемом компонентами

Управление макро- и микромакетами в новую эру адаптивного веб-дизайна.

Una Kravets

Адаптивный дизайн сегодня

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

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

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

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

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

Это происходит примерно каждые 10 лет. 10 лет назад, примерно в 2010–2012 годах, мы увидели огромные изменения в мобильном и адаптивном дизайне, а также появление CSS3.

Хронология стилей CSS — Источник: Web Design Museum.

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

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

Адаптивность к пользователю, контейнеру и типу устройства

Отзывчивость к пользователю

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

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

prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors
и многое другое.

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

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

`prefers-reduced-motion`

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

С помощью prefers-reduced-motion вы можете создавать страницы с уменьшенным движением и создавать улучшенные возможности движения для тех, у кого этот параметр не установлен.

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

Prefers-reduced-motion не должно означать «без движения», поскольку движение очень важно для передачи информации в Интернете. Вместо этого обеспечьте надежный базовый интерфейс, который направляет пользователей без лишних движений, и постепенно улучшайте его для пользователей, у которых нет таких потребностей или предпочтений в отношении специальных возможностей.

`prefers-color-scheme`

Ещё одна медиафункция предпочтений – prefers-color-scheme. Эта функция позволяет настраивать интерфейс в соответствии с темой, которую предпочитает пользователь. В операционной системе, будь то на компьютере или мобильном устройстве, пользователи могут установить предпочтение для светлой, темной или автоматической темы, которая меняется в зависимости от времени суток.

Если вы настроили страницу с помощью пользовательских свойств CSS, замена значений цвета выполняется просто. Вы можете быстро обновить значения цветовой темы, такие как backgroundColor и textOnPrimary, чтобы динамически подстраиваться под новую тему в медиазапросе.

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

Разработка для тёмной темы

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

Не используйте яркие, насыщенные цвета в тёмных темах

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

Material Design содержит полезные рекомендации по созданию тёмных тем.

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

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

Исследование Android 2018 года, посвященное тёмным темам, показало, что они позволяют экономить до 60 % энергии в зависимости от яркости экрана и пользовательского интерфейса. Статистика в 60 % получена в результате сравнения экрана воспроизведения YouTube с приостановленным видео при 100 % яркости экрана с использованием темной темы для пользовательского интерфейса приложения по сравнению со светлой темой.

По возможности всегда предлагайте пользователям тёмную тему.

Адаптивный к контейнеру

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

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

Посмотреть демоверсию на Codepen (доступно в Canary, если включен флаг).

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

Такой гибкости невозможно достичь только с помощью медиазапросов.

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

Для этого требуется правило @container. Оно работает аналогично запросу медиа с @media, но @container запрашивает информацию у родительского контейнера, а не у области просмотра и агента пользователя.

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

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

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

В приведенном выше коде используется max-width, а для ссылок задано значение display:none. Кроме того, уменьшается размер шрифта времени, если ширина контейнера меньше 850px.

Карточки запросов контейнера

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

Посмотреть демоверсию на Codepen (доступно в Canary, если включен флаг).

Для создания этого макета не используются медиазапросы, только запросы контейнера. Это позволяет каждой карточке товара переключаться на правильный макет, чтобы заполнить свое пространство. Например, сетка использует макет столбцов minmax, чтобы элементы могли перетекать в свое пространство, и перекомпоновывает сетку, когда это пространство слишком сжато (что означает, что оно достигло минимального размера).

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

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

Если в сетке есть хотя бы 350px свободного места, макет карточки становится горизонтальным, поскольку для него задается значение display: flex, у которого по умолчанию flex-direction равно row.

Если места мало, карточки товаров накладываются друг на друга. Каждая карточка товара стилизует сама себя, что было бы невозможно только с глобальными стилями.

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

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

Посмотреть демоверсию на Codepen (доступно в Canary после включения параметра).

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

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

Теперь мы можем думать о макро- и микромакетах в рамках одного компонента пользовательского интерфейса, что позволяет принимать действительно хорошие и детальные дизайнерские решения.

Как использовать запросы контейнера

Эти демоверсии теперь доступны для игры за флагом в Chrome Canary. Откройте страницу about://flags в Canary и включите параметр #enable-container-queries. Это позволит включить поддержку значений @container, inline-size и block-size для свойства contain, а также реализацию LayoutNG Grid.

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

Стили с ограниченной областью действия

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

диаграмма стилей с ограниченной областью действия — Автор изображения – Мириам Сюзанн (Miriam Suzanne).

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

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

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

Адаптивность к типу устройства

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

Диаграмма связей — Диаграмма из Microsoft Edge Explainers.

Складные или гибкие экраны и проектирование для охвата экрана – один из примеров того, где мы можем увидеть сдвиг форм-фактора сегодня. А screen-spanning – это ещё одна спецификация, которая разрабатывается для поддержки новых форм-факторов и потребностей.

В этом случае может помочь экспериментальный медиазапрос для разделения экрана. Сейчас он работает так: @media (spanning: <type of fold>). В демоверсии настраивается макет сетки с двумя столбцами: один имеет ширину --sidebar-width, которая по умолчанию равна 5rem, а другой – 1fr. Если макет просматривается на устройстве с двумя экранами и одним вертикальным сгибом, значение --sidebar-width обновляется в соответствии со значением среды левого сгиба.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

Это позволяет создать макет, в котором боковая панель (в данном случае навигация) заполняет пространство одной из складок, а пользовательский интерфейс приложения заполняет другую. Это предотвращает появление "складки" в интерфейсе.

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

Заключение

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

Круг нового адаптивного

Это новый адаптивный дизайн.

Это сочетание макро- и микромакетов, а также учет пользовательских настроек и форм-фактора.

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

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

web.dev/learnCSS

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

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

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