Свойство CSS color-scheme
и соответствующий метатег позволяют разработчикам использовать на своих страницах настройки по умолчанию для конкретной темы таблицы стилей пользовательского агента.
Фон
Медиа-функция предпочтений пользователя prefers-color-scheme
Функция мультимедийных предпочтений пользователя prefers-color-scheme
дает разработчикам полный контроль над внешним видом своих страниц. Если вы с ним не знакомы, прочитайте мою статью prefers-color-scheme
: «Привет, темнота, мой старый друг» , где я задокументировал все, что знаю о создании потрясающих темных режимов.
Одна часть головоломки, которая была лишь кратко упомянута в статье, — это CSS-свойство color-scheme
и соответствующий одноименный метатег. Оба они упрощают вашу жизнь как разработчика, позволяя вам настроить на своей странице параметры по умолчанию для конкретной темы таблицы стилей пользовательского агента, такие как, например, элементы управления формой, полосы прокрутки, а также системные цвета CSS. В то же время эта функция не позволяет браузерам самостоятельно применять какие-либо преобразования.
Поддержка браузера
prefers-color-scheme
color-scheme
Таблица стилей пользовательского агента
Прежде чем продолжить, позвольте мне кратко описать, что такое таблица стилей пользовательского агента. Большую часть времени вы можете думать о слове «пользовательский агент» (UA) как о причудливом способе сказать «браузер» . Таблица стилей UA определяет внешний вид страницы по умолчанию. Как следует из названия, таблица стилей UA зависит от рассматриваемого UA. Вы можете взглянуть на таблицу стилей UA Chrome (и Chromium) и сравнить ее с таблицами стилей Firefox или Safari (и WebKit). Обычно таблицы стилей UA согласуются по большинству вопросов. Например, все они делают ссылки синими, основной текст — черным, а цвет фона — белым, но есть и важные (а иногда и раздражающие) различия, например, стиль оформления элементов управления.
Ознакомьтесь поближе с таблицей стилей UA WebKit и с тем, что она делает с темным режимом. (Выполните полнотекстовый поиск слова «темный» в таблице стилей.) Значение по умолчанию, предоставляемое таблицей стилей, меняется в зависимости от того, включен или выключен темный режим. Чтобы проиллюстрировать это, вот одно такое правило CSS, использующее псевдокласс :matches
и внутренние переменные WebKit, такие как -apple-system-control-background
, а также внутреннюю директиву препроцессора WebKit #if defined
:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
Вы заметили некоторые нестандартные значения свойств color
и background-color
выше. Ни text
, ни -apple-system-control-background
не являются допустимыми цветами CSS. Это внутренние семантические цвета WebKit.
Оказывается, CSS имеет стандартизированную семантическую систему цветов. Они указаны в CSS Color Module Level 4 . Например, Canvas
(не путать с тегом <canvas>
) предназначен для фона содержимого или документов приложения, тогда как CanvasText
предназначен для текста в содержимом приложения или документах. Они сочетаются друг с другом и не должны использоваться изолированно.
Таблицы стилей UA могут использовать либо свои собственные, либо стандартизированные цвета семантической системы, чтобы определить, как HTML-элементы должны отображаться по умолчанию. Если в операционной системе установлен темный режим или используется темная тема, CanvasText
(или text
) будет условно установлен на белый цвет, а Canvas
(или -apple-system-control-background
) будет установлен на черный цвет. Затем таблица стилей UA назначает следующий CSS только один раз и охватывает как светлый, так и темный режим.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
CSS color-scheme
Спецификация модуля настройки цвета CSS уровня 1 представляет модель и элементы управления автоматической регулировкой цвета пользовательским агентом с целью обработки пользовательских предпочтений, таких как темный режим, настройка контрастности или определенные желаемые цветовые схемы.
Определенное в нем свойство color-scheme
позволяет элементу указывать, в каких цветовых схемах его удобно визуализировать. Эти значения согласовываются с предпочтениями пользователя, в результате чего выбранная цветовая схема влияет на такие элементы пользовательского интерфейса (UI), как цвета по умолчанию для элементов управления формы и полос прокрутки, а также используемые значения системных цветов CSS. В настоящее время поддерживаются следующие значения:
normal
Указывает, что элемент вообще не поддерживает цветовые схемы, поэтому элемент должен отображаться с использованием цветовой схемы браузера по умолчанию.[ light | dark ]+
Указывает, что элемент знает и может обрабатывать перечисленные цветовые схемы, а также выражает упорядоченное предпочтение между ними.
В этом списке light
представляет собой светлую цветовую схему со светлыми цветами фона и темными цветами переднего плана, тогда как dark
представляет собой противоположность, с темными цветами фона и светлыми цветами переднего плана.
Для всех элементов рендеринг с использованием цветовой схемы должен привести к тому, что цвета, используемые во всем пользовательском интерфейсе браузера для элемента, будут соответствовать назначению цветовой схемы. Примерами являются полосы прокрутки, подчеркивания для проверки орфографии, элементы управления формами и т. д.
В элементе :root
рендеринг с использованием цветовой схемы дополнительно должен влиять на цвет поверхности холста (то есть глобальный цвет фона), начальное значение свойства color
и используемые значения системных цветов, а также должно влияют на полосы прокрутки области просмотра.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
Метатег color-scheme
Для использования свойства CSS color-scheme
необходимо сначала загрузить CSS (если на него есть ссылка через <link rel="stylesheet">
) и проанализировать его. Чтобы помочь пользовательским агентам немедленно отобразить фон страницы с желаемой цветовой схемой, значение color-scheme
также можно указать в элементе <meta name="color-scheme">
.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
Сочетание color-scheme
и prefers-color-scheme
Поскольку и метатег, и свойство CSS (если оно применяется к элементу :root
) в конечном итоге приводят к одному и тому же поведению, я всегда рекомендую указывать цветовую схему через метатег, чтобы браузер мог быстрее адаптироваться к предпочтительной схеме.
Хотя для абсолютных базовых страниц дополнительные правила CSS не требуются, в общем случае вам всегда следует комбинировать color-scheme
с prefers-color-scheme
. Например, собственный CSS-цвет WebKit -webkit-link
, используемый WebKit и Chrome для классической ссылки blue rgb(0,0,238)
, имеет недостаточный коэффициент контрастности 2,23:1 на черном фоне и не соответствует требованиям WCAG AA, поскольку а также требованиям WCAG AAA.
Я открыл ошибки для Chrome , WebKit и Firefox , а также мета-проблему в стандарте HTML, чтобы исправить это.
Взаимодействие с prefers-color-scheme
Взаимодействие CSS-свойства color-scheme
и соответствующего метатега с мультимедийной функцией предпочтений пользователя « prefers-color-scheme
на первый взгляд может показаться запутанным. На самом деле, они очень хорошо играют вместе. Самое важное, что нужно понимать, это то, что color-scheme
определяет исключительно внешний вид по умолчанию, тогда как prefers-color-scheme
определяет стилизуемый внешний вид. Чтобы сделать это более понятным, предположим следующую страницу:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Встроенный код CSS на странице устанавливает background-color
элемента <fieldset>
в значение gainsboro
в общем случае и в darkslategray
, если пользователь предпочитает dark
цветовую схему в соответствии с медиа-функцией предпочтений пользователя prefers-color-scheme
.
С помощью элемента <meta name="color-scheme" content="dark light">
страница сообщает браузеру, что она поддерживает темную и светлую тему, отдавая предпочтение темной теме.
В зависимости от того, установлен ли в операционной системе темный или светлый режим, вся страница выглядит светлой на темном или наоборот, в зависимости от таблицы стилей пользовательского агента. Для изменения текста абзаца или цвета фона страницы не требуется никакого дополнительного CSS-кода, предоставленного разработчиком.
Обратите внимание, как background-color
элемента <fieldset>
меняется в зависимости от того, включен ли темный режим, в соответствии с правилами встроенной таблицы стилей, предоставленной разработчиком на странице. Это либо gainsboro
, либо darkslategray
.
Внешний вид элемента <button>
контролируется таблицей стилей пользовательского агента. Его color
установлен в системный цвет ButtonText
, а его background-color
и четыре border-color
установлены в системный цвет ButtonFace
.
Теперь обратите внимание, как меняется border-color
элемента <button>
. Вычисленное значение для border-top-color
и border-bottom-color
переключается с rgba(0, 0, 0, 0.847)
(черноватый) на rgba(255, 255, 255, 0.847)
(беловатый), поскольку пользователь Агент динамически обновляет ButtonFace
на основе цветовой схемы. То же самое относится и к color
элемента <button>
, которому присвоен соответствующий системный цвет ButtonText
.
Демо
Вы можете увидеть эффекты color-scheme
, примененной к большому количеству HTML-элементов, в демо-версии Glitch . В демо намеренно показаны нарушения WCAG AA и WCAG AAA с использованием цветов ссылок, упомянутых в предупреждении выше.
Благодарности
CSS color-scheme
и соответствующий метатег были реализованы Rune Lillesveen . Руне также является соредактором спецификации CSS Color Adjustment Module Level 1. Изображение героя Филиппа Леоне на Unsplash .