inverted-colors

CSS медиа функция inverted-colors может использоваться для проверки, инвертирует ли user agent или ОС цвета.

Синтаксис

Функция inverted-colors указана в качестве значения ключевого слова, выбранного из списка ниже.

none

Цвета отображаются нормально.

inverted
Все пиксели в отображаемой области были инвертированы.

Примеры

HTML

<p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p>
<p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p>

CSS

p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

Result

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

Specification Status Comment
Media Queries Level 4
Определение 'inverted-colors' в этой спецификации.
Кандидат в рекомендации Отложено до Media Queries Level 5.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
inverted-colors media feature
ЭкспериментальнаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 9.1WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Полная поддержка 10Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.