prefers-contrast

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

Новое

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

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

Синтаксис

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

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

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

Примеры

В этом примере по умолчанию используется неприятный низкий контраст.

HTML

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

CSS

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

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

Результат

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

Спецификация
Media Queries Level 5 # prefers-contrast

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`prefers-contrast`	96	96	101	82	14.1	96	101	Нет	14.5	17.0	96

См. также

CSS forced-colors media query

© 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/prefers-contrast