inverted-colors

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Ключевое слово inverted-colors CSS media feature используется для проверки, инвертированы ли все цвета в user agent или в базовой операционной системе.

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

Синтаксис

/* Keyword value */
@media (inverted-colors: inverted) {
  /* styles to apply if inversion of colors is detected */
}

Функция inverted-colors задается одним из следующих ключевых слов:

none: Указывает, что цвета отображаются нормально, и инверсия цветов не произошла. Это ключевое слово оценивается как ложь.
inverted: Указывает, что все пиксели в отображаемой области были инвертированы. Это ключевое слово оценивается как истина.

Примеры

Применение стилей при обнаружении инверсии цветов

Этот пример демонстрирует действие обоих ключевых слов медиа-функции inverted-colors и случай, когда медиа-функция inverted-colors не поддерживается.

HTML

<p>
  If color inversion is detected, this text will appear blue on white (the
  inverse of yellow on black) along with a line over the text. If no color
  inversion is happening, the text will appear red on light gray without the
  line over the text.
</p>
<p>
  If the text is gray and no overline is present, it means your browser doesn't
  support the
  <code>inverted-colors</code> media feature.
</p>

CSS

p {
  color: gray;
}

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

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

Результат

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

Спецификация
Media Queries Level 5 # inverted

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

	Рабочие столы					Мобильные устройства
	Хром	Кром	Файрфокс	Опера	Сафари	Хром Android	Файрфокс для Android	Опера Android	Сафари на IOS	Samsung Internet	WebView Android
`inverted-colors`	Нет	Нет	114	Нет	9.1	Нет	Нет	Нет	10	Нет	Нет

См. также

© 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/inverted-colors