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

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

Una Kravets

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

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

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

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

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

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

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

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

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

Адаптируется к потребностям пользователя

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

К функциям управления медиаконтентом, определяемым на основе пользовательских настроек, относятся:

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

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

prefers-reduced-motion

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

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

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

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

prefers-color-scheme

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

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

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

Дизайн для темной темы

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

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

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

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

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

Адаптируется к контейнеру

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

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

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

Такая гибкость недостижима при использовании одних только запросов от СМИ.

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

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

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

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

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

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

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

Для создания всей этой разметки не используются медиа-запросы, только запросы контейнеров. Это позволяет каждой карточке товара автоматически перестраиваться в соответствии со своим пространством. Например, в сетке используется разметка столбцов по принципу 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`.

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

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

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

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

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

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

Использование контейнерных запросов уже сегодня.

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

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

Ограниченные стили

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

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

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

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

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

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

Адаптируется к форм-фактору

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

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

An experimental media query for screen-spanning could help us here. It currently behaves like this: @media (spanning: <type of fold>) . The demo sets up a grid layout with two columns: one has a width of --sidebar-width, which is 5rem by default, and the other is 1fr . When the layout is viewed on a dual screen that has a single vertical fold, the value of --sidebar-width is updated with the environment value of the left fold.

: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 DevTools, чтобы отлаживать и создавать прототипы масштабирования экрана непосредственно в браузере.

Заключение

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

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

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

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

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

web.dev/learnCSS

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

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

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