Медиафункция CSS `inverted-colors`

inverted-colors CSS медиафункция используется для проверки того, инвертировал ли пользовательский агент или операционная система все цвета.

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

Синтаксис

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

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

none

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

inverted

Указывает, что все пиксели в отображаемой области были инвертированы. Это ключевое слово принимает значение true.

Примеры

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

В этом примере показано действие обоих ключевых слов медиафункции 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: #eeeeee;
    color: red;
  }
}

Результат

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

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

См. также

• @media
• Модуль медиа-запросы CSS
• Использование медиа-запросов