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

Рабочая группа CSS состоит из членов. от всех основных поставщиков браузеров и других технологических компаний, таких как Apple и Adobe. Apple, недавно выпустившая новую версию MacOS, хотела найти способ обнаружить ее шикарный темный режим в браузере. Чтобы сделать это, Apple выдвинула рекомендацию к спецификации для нового медиа-запроса уровня 5.

  @media (prefers-color-схема: light | dark) {…}  

Используя этот медиазапрос, мы можем определить, использует ли пользователь в настоящее время светлый или темный режим в ОС. На данный момент это поддерживается только Safari Technology Preview 69 и выше, но другие браузеры не должны сильно отставать.

Чтобы проверить это, вам нужно будет перейти на Mojave 10.14 (MacOS) и выбрать «Темный внешний вид» в «Системных настройках». Есть несколько способов использовать этот новый медиа-запрос для реализации различных тем. Мы рассмотрим некоторые из них в этом уроке.

01. Настройка страницы

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

  
 
 Заголовок один 
 
 Заголовок два 
 
 
… 
 
… 
 
  

Основные элементы стиля

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

  body {font-family: 'Merriweather', serif; цвет фона: #ededed; цвет: # 212121; набивка: 1,618рем; высота линии: 1,618; размер шрифта: 16 пикселей; }  

03. Контейнер стилей

Далее мы будем стилизовать наш контейнер, чтобы сделать Содержание удобной длины строки для чтения. Мы также добавим цвет фона и тень. Чтобы центрировать поле содержимого на странице, мы будем использовать ключевое слово «auto» в левом и правом значениях свойств поля.

  .content-container {padding: 1.618rem 3.236rem ; максимальная ширина: 48,54 мм; маржа: 3,236рем авто; цвет фона: #fff; box-shadow: 0 0 12px 6px rgba (0,0,0,0.05); пограничный радиус: .269666667рем; }  

04. Добавьте цвет выделения

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

   Lorem ipsum  .text - alpha {color: # c3423f; }  

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

  @media (prefer-color-схема: темная) {body {background-color: # 111; }}  

06. Переопределить остальные стили

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

  .content-container {color: white; цвет фона: # 212121; } .text - alpha {color: # 50a8d8; }  

07. Ремонтопригодность

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

08. Возьмите другой подход

Итак как еще мы можем решить проблему? Давайте посмотрим на фильтры CSS. Одним из значений, которые мы можем использовать в CSS-фильтрах, является «инвертировать», поэтому мы можем просто применить это к HTML и инвертировать все цвета, что дает нам «темный режим».

  @media (prefer-color-схема: темная) {html {фильтр: инвертировать (100%); }}  

09. Добавить изображения

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

10. Используйте пользовательские свойства

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

Чтобы использовать пользовательские свойства, мы определяем их в верхней части нашего CSS внутри элемента «: root ». Корневой элемент имеет ту же область видимости, что и HTML, поэтому будет доступен глобально. Нам нужно определиться с именами переменных и определить их значения.

 : root {--background-color: #ededed; --page-background: #fff; --text-color: # 212121; --color-alpha: # c3423f; }  

12. Примените наши пользовательские свойства

Теперь у нас есть определенные пользовательские свойства, которые мы можем использовать в нашем CSS. Мы начнем с тела и применим цвет фона и текста. Чтобы использовать пользовательское свойство, мы используем синтаксис [ var (- custom-property-name) '.

  body {background-color: var (- background) -цвет); color: var (- text-color); }  

13. Примените оставшиеся свойства

Используя тот же метод, мы также можем обновить 'background-color' нашего контейнера и 'color' нашего ' text-alpha ' класса, чтобы использовать наш пользовательский свойства. Все цвета на нашей странице теперь контролируются с помощью пользовательских свойств.

  .content-container {background-color: var (- page-background); } .text - alpha {color: var (- color-alpha); }  

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

  @media (prefers-color-circuit: dark) ) {: root {--background-color: # 111; - page-background: # 212121; --text-color: #ededed; --color-alpha: # 50a8d8; }}  

15. Возьмите полный контроль

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

 : root {… --page-shadow: 0 0 12px 6px rgba (0,0,0,0.05); }  

16. Применить тень

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

  @media (prefers-color-схема: dark) {: root {… --page-shadow: 0 0 12px 6px rgba (0,0,0,0,33); }} .content-container {… box-shadow: var (- page-shadow); }  

17. Добавить изображение

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

  img {width: 100%; высота: авто; плыть налево; максимальная ширина: 300 пикселей; поле справа: 1,618рем; нижнее поле: 1.618rem; }  

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

18. Добавление дополнительных компонентов

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

  .button {display: inline-flex; семейство шрифтов: наследовать; background-color: var (- color-alpha); color: var (- text-color); набивка: 1.618рем 3.236рем; граница: 0 нет; радиус границы: 0,25рем; текстовое оформление: нет; }  

19. Создание стилей наведения кнопки

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

  .button {… transition: background-color 150ms цвет 150мс; &: hover {background-color: var (- text-color); цвет: вар (- цвет-альфа); }}  

20. Создание пользовательских свойств кнопки

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

  .button {--button-background: var (- color-alpha); --button-text: var (- background-color); background-color: var (- кнопка-фон); цвет: var (- кнопка-текст); …}  

21. Использовать область

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

  .button {… &: hover {--button-background: # ae3937; @media (prefers-color-схема: темная) {--button-background: # 2e98d1; --button-text: var (- background-color); }}}  

Эта статья была первоначально опубликована в выпуске 283 Creative Web Журнал дизайна Веб-дизайнер . Купить номер 283 или подписаться на веб-дизайнера здесь .

Статьи по теме: