prefers-contrast
Baseline 2022
Newly available
Since May 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die prefers-contrast
CSS Medienfunktion wird verwendet, um zu erkennen, ob der Benutzer eine Darstellung des Webinhalts mit geringerem oder höherem Kontrast angefordert hat.
Syntax
no-preference
-
Gibt an, dass der Benutzer keine Präferenz an das System übermittelt hat. Dieser Schlüsselwortwert wird im booleschen Kontext als false bewertet.
more
-
Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzerschnittstelle mit einem höheren Kontrast bevorzugt.
less
-
Gibt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzerschnittstelle mit einem geringeren Kontrast bevorzugt.
custom
-
Gibt an, dass der Benutzer dem System mitgeteilt hat, dass eine spezifische Farbpalette verwendet werden soll und der durch diese Farben implizierte Kontrast weder
more
nochless
entspricht. Dieser Wert wird mit der von Benutzern angeforderten Farbpalette übereinstimmen, dieforced-colors: active
verwenden.
Benutzerpräferenzen
Verschiedene Betriebssysteme unterstützen solche Präferenzen, und Benutzeragenten werden wahrscheinlich auf die vom Betriebssystem bereitgestellten Einstellungen zurückgreifen.
Beispiele
Dieses Beispiel hat standardmäßig einen störend niedrigen Kontrast.
HTML
<div class="contrast">low contrast box</div>
CSS
.contrast {
width: 100px;
height: 100px;
outline: 2px dashed black;
}
@media (prefers-contrast: more) {
.contrast {
outline: 2px solid black;
}
}
Ergebnis
Spezifikationen
Specification |
---|
Media Queries Level 5 # prefers-contrast |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS forced-colors Medienabfrage