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 Medienfunktion 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 zum Beispiel, dass Schatten zu Hervorhebungen werden, was die Lesbarkeit des Inhalts verringern kann. Mit dieser Medienfunktion können Sie erkennen, ob eine Inversion stattfindet, und den Inhalt entsprechend der Benutzerpräferenz gestalten.
Syntax
/* Keyword value */
@media (inverted-colors: inverted) {
/* styles to apply if inversion of colors is detected */
}
Die inverted-colors-Funktion wird als einer der folgenden Schlüsselwort-Werte angegeben:
Beispiele
Anwenden von Stilen, wenn die Farbinversion erkannt wird
Dieses Beispiel demonstriert die Auswirkungen der Schlüsselwortwerte der inverted-colors-Medienfunktion und wenn die inverted-colors-Medienfunktion 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…