Создание адаптивных интерфейсов с помощью медиазапросов настроек

1. Подготовка

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

Пользовательские настройки

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

Вот несколько примеров пользовательских настроек, которые могут использоваться в CSS:

• Размер области просмотра на устройстве
• Ориентация устройства (вертикальная или горизонтальная).
• Размер шрифта
• Онлайн/офлайн
• Качество сети
• Цветовая схема (светлая или темная).
• Анимация интерфейса (включена | уменьшена).
• Качество ввода (мышь | сенсорный экран | стилус)
• Направление текста и режим письма (слева направо, сверху вниз и т. д.).
• Режим отображения (fullscreen | standalone | minimal UI | browser)

Вот несколько примеров пользовательских настроек, которые скоро появятся в CSS:

• Упрощенный режим
• Цветовой диапазон
• Контрастность (меньше, больше, уменьшить)
• Цвета (принудительно применяет цвета пользователя к странице).
• Прозрачность (включена | уменьшена)

Запросы медиа

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

Адаптация к пользователю

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

Требования

• Знание HTML и CSS.
• Знание инструментов разработчика, таких как инструменты разработчика в Google Chrome.

Что вы создадите

В этой практической работе вы создадите форму, которая адаптируется к следующим факторам:

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

Что вы узнаете

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

• Создание светлой и тёмной тем
• Создавайте анимированные и доступные формы.
• Макет адаптивных форм
• Используйте относительные единицы измерения и логические свойства.

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

Что вам понадобится

• Google Chrome 89 или более поздней версии или другой браузер.

2. Подготовка

Как получить код

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

Рекомендуется: используйте Codepen

1. Откройте новую вкладку браузера.
2. Перейдите на страницу https://codepen.io/argyleink/pen/abBMeeq.
3. Если у вас нет аккаунта, создайте его, чтобы сохранить работу.
4. Нажмите Fork (Ответвление).

Альтернатива: работа на локальном компьютере

Если вы хотите скачать код и работать локально, вам понадобится Node.js версии 12 или выше и настроенный редактор кода.

Как использовать Git

1. Перейдите на страницу https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces.
2. Клонируйте хранилище в папку.
3. Обратите внимание, что ветка по умолчанию – beginning.

Как работать с файлами

Скачать исходный код

1. Распакуйте скачанный ZIP-файл в папку.

Запустите проект

Используйте каталог проекта, созданный на одном из предыдущих шагов, а затем:

1. Выполните команду npm install, чтобы установить зависимости, необходимые для запуска сервера.
2. Выполните команду npm start, чтобы запустить сервер на порте 3000.
3. Откройте новую вкладку браузера.
4. Перейдите на страницу http://localhost:3000.

Об HTML

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

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

3. Адаптивные взаимодействия

Ветка Git: beginning

В конце этого раздела ваша форма настроек будет адаптироваться к:

• Геймпад и клавиатура
• Мышь и сенсорный экран
• Программа чтения с экрана или аналогичная технология специальных возможностей

Атрибуты для HTML

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

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

Группировка входных данных

Элемент <fieldset> в HTML используется для группировки похожих входных данных и элементов управления. В форме есть две группы: одна для громкости, а другая для уведомлений. Это важно для удобства пользователей, так как позволяет пропускать целые разделы.

Как упорядочивать элементы

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

Взаимодействие с клавиатурой

Пользователи привыкли перемещаться по формам с помощью клавиши Tab. К счастью, браузер позаботится об этом, если вы предоставите ожидаемые элементы HTML. Такие элементы, как <button>, <input>, <h2> и <label>, автоматически становятся целями для клавиатуры или программы чтения с экрана.

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

style.css

input {
  outline-offset: 5px;
}

Что можно попробовать

1. Проверьте элементы HTML, используемые в index.html.
2. Нажмите на демостраницу в браузере.
3. Для перемещения по элементам формы используйте клавиши tab и shift+tab.
4. Используйте клавиатуру, чтобы изменить значения ползунков и флажков.
5. Подключите геймпад по Bluetooth и перемещайте фокус по элементам формы.

Взаимодействие с помощью мыши

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

Видите, как вы получаете две функции пользовательского опыта для подключения ваших меток и их входных данных?

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

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

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

Несвязанные: нет атрибутов, связывающих элементы.

<input type="checkbox">
<label>...</label>

Связанные: атрибуты, связывающие элементы.

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

Что можно попробовать

1. Наведите указатель мыши на ярлык и обратите внимание на выделенный флажок.
2. Изучите элемент label с помощью инструментов разработчика в Chrome, чтобы визуализировать область, на которую можно нажать, чтобы установить флажок.

Взаимодействие с программой чтения с экрана

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

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

index.html

<picture aria-hidden="true">

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

Элемент ползунка input[type="range"] имеет специальный атрибут ARIA: aria-labelledby="media-volume". Это дает программе чтения с экрана специальные инструкции, которые помогают улучшить взаимодействие с пользователем.

Что можно попробовать

1. Для перемещения по форме используйте программу чтения с экрана, встроенную в операционную систему.
2. Скачайте и попробуйте использовать программу чтения с экрана.

4. Адаптивные макеты

Ветвь Git: layouts

В конце этого раздела страница настроек будет:

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

Интервалы

Ключом к хорошему макету является ограниченная палитра вариантов интервалов. Это помогает контенту находить естественные соответствия и гармонию.

Дополнительные параметры

В этом семинаре мы будем использовать семь размеров объектов недвижимости.

• Добавьте эти элементы в верхнюю часть страницы style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

Стили страниц

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

• Добавить в чат-группу "style.css":

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Вот ваше первое использование настраиваемых свойств интервалов! Так начнется ваше космическое путешествие.

Типографика

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

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Стили для h1, h2 и h3 незначительны и стилистичны. Однако для элемента small требуется дополнительный элемент line-height, который используется при переносе текста. Иначе они будут слишком скученными.

Логические свойства

Обратите внимание, что для padding в body используются логические свойства (block-start, block-end), чтобы указать сторону. Логические свойства будут широко использоваться в оставшейся части практической работы. Как и rem, они адаптируются к пользователю. Этот макет можно перевести на другой язык и настроить в соответствии с направлением письма и документов, к которому привык пользователь. Логические свойства позволяют поддерживать это с помощью всего одного определения пространства, направления или выравнивания.

Grid и Flexbox уже зависят от направления текста, то есть стили, написанные для одного языка, будут контекстными и соответствующим образом применяться к другим. Адаптивное направление: контент размещается в соответствии с направлением документа.

Логические свойства позволяют охватить больше пользователей с меньшим количеством стилей для написания.

Макеты CSS Grid

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

Ниже приведен скриншот инструментов разработчика Chrome, на котором показаны все макеты CSS Grid одновременно.

1. Добавьте следующие стили в style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

По умолчанию сетка помещает каждый дочерний элемент в свою строку, что делает её отличным решением для укладки элементов. Кроме того, у него есть дополнительное преимущество – использование gap. Ранее вы установили margin: 0 для всех элементов с селектором *, что теперь важно, поскольку вы используете gap для интервалов. Свойство gap не только позволяет управлять пространством в контейнере, но и зависит от направления потока.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Это самый сложный макет сетки в дизайне, но он учитывает самый захватывающий адаптивный аспект:

• max-width предоставляет значение, которое алгоритм макета использует, чтобы определить, насколько большим он может быть.
• gap использует дополнительные параметры и передает row-gap, отличающийся от column-gap.
• Для align-items задано значение flex-start, чтобы не растягивать элементы по высоте.
• Синтаксис grid-template-columns может показаться сложным, но цель проста: сделать столбцы шириной 35ch, но не менее 10ch, и размещать элементы в столбцах, если есть место, а если нет – в строках.

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

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

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

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

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Этот макет отвечает за создание карточки и группировку входных данных. overflow: hidden и gap: 1px станут понятны, когда вы добавите цвет в следующем разделе.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Этот макет отвечает за центрирование значка и флажка со связанными с ними метками и элементами управления. Первый столбец шаблона сетки, var(--space-lg), создает столбец шире значка, чтобы дочерний элемент мог быть центрирован внутри него.

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

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

В этом макете центрирование применяется только к элементам picture и checkbox с помощью :is псевдоселектора.

3. Замените селектор picture > svg на .fieldset-item svg, как показано ниже.

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Это позволяет задать размер значка SVG в соответствии с системой размеров.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

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

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

Что можно попробовать

1. Откройте Инструменты разработчика в Chrome и найдите значки Grid в HTML-коде на панели Элементы. Нажмите на них, чтобы включить инструменты отладки.
2. Откройте инструменты разработчика в Chrome и наведите указатель мыши на свойство gap на панели Стили.
3. Откройте инструменты разработчика в Chrome, перейдите на панель Стили и переключитесь со Стилей на Макеты. Изучите эту область, переключая ее настройки и включая макеты.

Запросы медиа

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

Примечание. Код CSS для каждого раздела нужно добавлять после селектора, который он изменяет в style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Форма уже адаптировалась к размеру области просмотра с помощью auto-fit, но при тестировании на мобильном устройстве поворот устройства в альбомную ориентацию не размещает две группы форм рядом. Адаптируйте креатив к горизонтальной ориентации с помощью запроса медиа orientation и проверки ширины области просмотра. Теперь, если устройство находится в горизонтальной ориентации и имеет ширину не менее 640 пикселей, принудительно создайте два столбца, переключив дополнительный параметр --repeat на число вместо ключевого слова auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Этот запрос медиа – ещё одно расширение интервалов, когда доступно больше места в области просмотра. Шаблон сетки расширяет первый столбец, используя в шаблоне более крупное настраиваемое свойство (var(--space-xxl)). Отступы также увеличены для дополнительных параметров.

Что можно попробовать

1. Попробуйте изменить размер окна браузера и посмотрите, как изменится размер чат-группы.
2. Предварительный просмотр на мобильном устройстве
3. Предварительный просмотр на мобильном устройстве в горизонтальной ориентации

5. Адаптивный цвет

Ветвь Git: colors

В конце этого раздела ваша форма настроек будет:

• Адаптируйте дизайн к светлой и темной темам.
• иметь цветовую схему, основанную на шестнадцатеричном коде цвета бренда;
• Иметь доступные цвета

HSL

В следующем разделе вы создадите цветовую систему с помощью HSL, которая поможет вам создать светлую и тёмную темы. Она основана на следующей базовой концепции CSS: calc().

HSL расшифровывается как оттенок, насыщенность и светлота. Тон – это угол, как точка на часах, а насыщенность и яркость – проценты. calc() может выполнять математические операции с процентами и углами. Вы можете выполнять расчеты яркости и насыщенности этих процентов в CSS. Объедините вычисления цветовых каналов с дополнительными параметрами, и вы получите современную динамическую цветовую схему, в которой варианты вычисляются на основе базового цвета, что поможет вам избежать управления множеством цветов в коде.

Дополнительные параметры

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

Предположим, что фирменный цвет вашего приложения – #0af. Ваша первая задача – преобразовать шестнадцатеричный код цвета hsl(200 100% 50%) в значение HSL. Это преобразование показывает цветовые каналы вашего бренда в HSL, которые вы можете использовать в calc() для вычисления различных поддерживающих цветов бренда.

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

Каждый из блоков кода, приведенных в этом разделе, нужно добавить в один и тот же селектор :root.

Каналы брендов

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Три канала HSL были извлечены и помещены в их собственные пользовательские свойства.

1. Используйте все три свойства как есть и воссоздайте фирменный цвет.

Бренд

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Поскольку ваша цветовая схема по умолчанию тёмная, рекомендуется уменьшить насыщенность цветов для использования на тёмных поверхностях (в противном случае они могут вибрировать в глазах или быть недоступными). Чтобы уменьшить насыщенность фирменного цвета, используйте оттенок и яркость как есть, но уменьшите насыщенность вдвое с помощью деления: calc(var(--saturation) / 2). Теперь ваш фирменный цвет правильно вписан в тему, но его насыщенность снижена.

Текст

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Для текста в тёмной теме вы используете оттенок бренда в качестве основы, но создаёте из него почти белые цвета. Многие пользователи будут думать, что текст белый, хотя на самом деле он очень светло-голубой. Оставаясь в пределах оттенка, можно создать гармоничный дизайн. --text1 – это 85 % белого, а --text2 – 65 % белого. Оба цвета имеют очень низкую насыщенность.

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

"Платформа"

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Текст очень светлый, потому что в тёмной теме поверхности будут тёмными. Если для цветов текста использовались высокие значения яркости (85 % и выше), для поверхностей будут использоваться более низкие значения (30 % и ниже). Достаточная разница между диапазонами яркости поверхности и текста поможет обеспечить доступные цвета для чтения.

3. Обратите внимание, что цвета начинаются с самого тёмного серого с 10% яркостью и 10% насыщенностью, а затем десатурируются по мере того, как становятся светлее. Каждая новая поверхность на 5 % светлее предыдущей. Насыщенность светлых поверхностей также немного снижена. Попробуйте установить насыщенность всех поверхностей на 10 %. Оно нравится вам больше или меньше?

Светлая тема

После того как вы задали цвета текста и фона для тёмной темы, можно адаптировать их для светлой темы, обновив дополнительные параметры цвета в медиазапросе prefers-color-scheme.

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

Бренд

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

Сначала выберите цвет бренда. Нужно восстановить насыщенность.

Текст

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

В тёмной теме текст был светло-синим, а в светлой он стал тёмно-синим. Значения светлоты 10 % и 30 % для цвета HSL должны сигнализировать вам о том, что эти цвета темные.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

Как использовать систему цветов

Теперь, когда цвета определены, пора их использовать. У вас есть красивый акцентный цвет бренда, два цвета текста и четыре цвета поверхности.

• Для следующих разделов кода найдите соответствующий селектор и добавьте CSS цвета в существующий блок кода.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

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

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

Это мелкий шрифт. Они должны быть менее заметными, чем заголовки и абзацы (основной контент).

Тёмные элементы управления формами

:root {
  color-scheme: dark light;
}

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

6. Адаптивная анимация

Ветвь Git: animations

В конце этого раздела страница настроек будет:

• Адаптируйте анимацию к предпочтениям пользователя.
• Реагировать на действия пользователя.

Меньше движения и отсутствие движения

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

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

Стили взаимодействия

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Когда пользователь взаимодействует с входными данными одного из элементов <fieldset>, похожих на карточки, это добавляет эффект подъема. Интерфейс выдвигает элемент вперед, помогая пользователю сосредоточиться, когда группа контекстных форм приближается к пользователю.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

7. Поздравляю!

Ветвь Git: complete

Поздравляем! Вы успешно создали адаптивный пользовательский интерфейс.

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