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. |
Совместимость с браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.