Медиавыражение CSS `forced-colors`

Медиавыражение forced-colors CSS используется для проверки, включил ли пользовательский агент режим принудительных цветов, в котором для страницы применяется ограниченная палитра цветов, выбранная пользователем. Пример такого режима — режим высокой контрастности Windows.

Синтаксис

Медиавыражение forced-colors указывает, включён ли в данный момент в браузере режим принудительных цветов.

Значения

none

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

active

Указывает, что режим принудительных цветов активен. Браузер предоставляет авторам палитру цветов с помощью ключевых слов системных цветов CSS и, если это уместно, задаёт соответствующее значение prefers-color-scheme, чтобы авторы могли адаптировать страницу. Браузер выбирает значение для prefers-color-scheme на основе светлоты системного цвета Canvas (подробности см. в спецификации настройки цветов).

Примечания по использованию

Свойства, на которые влияет режим принудительных цветов

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

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

• color
• background-color
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• -webkit-tap-highlight-color
• атрибут SVG fill
• атрибут SVG stroke

Кроме того, в режиме принудительных цветов следующие свойства ведут себя особым образом:

• box-shadow принудительно устанавливается в значение 'none'
• text-shadow принудительно устанавливается в значение 'none'
• background-image принудительно устанавливается в значение 'none' для значений, не основанных на url
• color-scheme принудительно устанавливается в значение 'light dark'
• scrollbar-color принудительно устанавливается в значение 'auto'

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

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

В некоторых случаях пользовательский агент не принуждает к использованию значений для перечисленных выше свойств:

Если для элемента свойству forced-color-adjust задано значение none, принудительные значения цветов не применяются, а стили автора используются как обычно. Кроме того, подложка для текста отключается.

Если для элемента свойству forced-color-adjust задано значение preserve-parent-color, а значение свойства color этого элемента не наследуется от родительского элемента, то элемент будет вести себя так же, как если бы для preserve-parent-color было задано значение none.

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

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

Вопросы доступности

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

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

Настройки пользователя

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

Примеры

В этом примере для кнопки обычно задаётся контрастность с помощью свойства box-shadow. В режиме принудительных цветов значение box-shadow принудительно устанавливается в none, поэтому в примере используется медиавыражение forced-colors, чтобы задать рамку подходящего цвета (в данном случае ButtonText).

HTML

<button class="button">Press me!</button>

CSS

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• @media
• Стилизация для режима высокой контрастности Windows с использованием стандартов принудительных цветов.
• forced-color-adjust