inverted-colors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das inverted-colors CSS-Medienmerkmal wird verwendet, um zu überprüfen, ob der User-Agent oder das zugrunde liegende Betriebssystem alle Farben invertiert hat.
Die Invertierung von Farben kann unangenehme Nebenwirkungen haben, wie beispielsweise, dass Schatten zu Hervorhebungen werden, was die Lesbarkeit der Inhalte verringern kann. Mit diesem Medienmerkmal können Sie erkennen, ob eine Invertierung 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 */
}
Das inverted-colors-Merkmal wird als einer der folgenden Schlüsselwortwerte angegeben:
Beispiele
Anwenden von Stilen, wenn eine Farbinvertierung erkannt wird
Dieses Beispiel zeigt die Auswirkungen beider inverted-colors-Medienmerkmalsschlüsselwortwerte und wenn das inverted-colors-Medienmerkmal 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 |
Browser-Kompatibilität
Loading…