`inverted-colors` CSS-Media-Feature

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das inverted-colors CSS Media-Feature wird verwendet, um zu testen, ob der User Agent oder das zugrunde liegende Betriebssystem alle Farben invertiert hat.

Die Inversion von Farben kann unangenehme Nebeneffekte haben, wie z.B. dass Schatten zu Hervorhebungen werden, was die Lesbarkeit der Inhalte verringern kann. Mit diesem Media-Feature können Sie erkennen, ob eine Inversion stattfindet, und die Inhalte entsprechend gestalten, während Sie die Benutzerpräferenz berücksichtigen.

Syntax

css

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

Das inverted-colors Feature wird als einer der folgenden Schlüsselwortwerte angegeben:

none: Gibt an, dass die Farben normal angezeigt werden und keine Inversion der Farben stattgefunden hat. Dieser Schlüsselwortwert wird als falsch bewertet.
inverted: Gibt an, dass alle Pixel im angezeigten Bereich invertiert wurden. Dieser Schlüsselwortwert wird als wahr bewertet.

Beispiele

Anwenden von Stilen, wenn Farbinversion erkannt wird

Dieses Beispiel zeigt die Effekte der beiden Schlüsselwortwerte des inverted-colors Media-Features und wenn das inverted-colors Media-Feature nicht unterstützt wird.

HTML

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

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;
  }
}