inverted-colors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die inverted-colors CSS Media-Eigenschaft 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 Schatten, die zu Hervorhebungen werden, was die Lesbarkeit der Inhalte reduzieren kann. Mit dieser Media-Eigenschaft können Sie erkennen, ob eine Inversion stattfindet, und die Inhalte entsprechend gestalten, während Sie die Benutzerpräferenz respektieren.
Syntax
/* Keyword value */
@media (inverted-colors: inverted) {
/* styles to apply if inversion of colors is detected */
}
Die inverted-colors-Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
Beispiele
Anwenden von Stilen, wenn eine Farbinversion festgestellt wird
Dieses Beispiel zeigt die Auswirkungen beider inverted-colors Media-Eigenschafts-Schlüsselwortwerte und wenn die inverted-colors Media-Eigenschaft nicht unterstützt wird.
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;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # inverted |