forced-colors

Базовая линия 2022

Новое доступно

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

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

Синтаксис

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

Значения

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

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

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

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

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

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

box-shadow устанавливается в 'none'
text-shadow устанавливается в 'none'
background-image устанавливается в 'none' для значений, не являющихся URL
color-scheme устанавливается в 'свет тёмный'
scrollbar-color устанавливается в 'auto'

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

Примечание: Пользовательские агенты выбирают системные цвета на основе семантики исходных элементов, а не на основе добавленных ролей ARIA. Например, добавление role="button" к div не приведет к установке цвета элемента в ButtonText

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

Существует два случая, когда пользовательский агент не принудительно устанавливает значения для вышеперечисленных свойств — когда значение forced-color-adjust равно none для элемента или когда системный цвет задан автором.

Когда forced-color-adjust устанавливается в 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;
  }
}

Результат

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

Спецификация
Уровни запросов к среде 5 # forced-colors

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`forced-colors`	89	79	89	75	16	89	89	63	16	15.0	89

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors