Медиавыражение CSS `prefers-contrast`

Медиавыражение CSS prefers-contrast CSS медиавыражение используется для определения того, запросил ли пользователь отображение веб-контента с более низкой или более высокой контрастностью.

Синтаксис

no-preference

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

more

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

less

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

custom

Указывает, что пользователь сообщил системе о необходимости использовать определённый набор цветов, а контрастность, создаваемая этими цветами, не соответствует ни more, ни less. Это значение будет соответствовать цветовой палитре, заданной пользователями forced-colors: active.

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

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

Примеры

В этом примере показан блок, для которого по умолчанию задана пунктирная outline. Когда медиазапрос prefers-contrast: more срабатывает, вместо неё применяется solid стиль обводки с более высокой контрастностью.

HTML

<div class="contrast">low contrast box</div>

CSS

.contrast {
  margin: 5px;
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

Результат

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

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

См. также

• Медиазапрос CSS forced-colors