prefers-contrast
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Mai 2022.
Das prefers-contrast CSS Media-Feature wird verwendet, um zu erkennen, ob der Nutzer die Darstellung des Webinhalts mit einem niedrigeren oder höheren Kontrast angefordert hat.
Syntax
no-preference-
Zeigt an, dass der Nutzer keine Vorlieben dem System mitgeteilt hat. Dieser Schlüsselwortwert wird im booleschen Kontext als falsch bewertet.
more-
Zeigt an, dass der Nutzer das System darüber informiert hat, dass sie eine Oberfläche mit einem höheren Kontrastniveau bevorzugen.
less-
Zeigt an, dass der Nutzer das System darüber informiert hat, dass sie eine Oberfläche mit einem niedrigeren Kontrastniveau bevorzugen.
custom-
Zeigt an, dass der Nutzer das System gebeten hat, einen spezifischen Satz von Farben zu verwenden, und der durch diese Farben implizierte Kontrast weder
morenochlessentspricht. Dieser Wert wird mit der von Benutzern vonforced-colors: activeangegebenen Farbpalette übereinstimmen.
Nutzervorlieben
Verschiedene Betriebssysteme unterstützen solche Vorlieben und Benutzeragenten werden voraussichtlich auf die vom Betriebssystem bereitgestellten Einstellungen zurückgreifen.
Beispiele
Dieses Beispiel enthält ein Kästchen mit einer standardmäßig gesetzten gestrichelten outline. Wenn die prefers-contrast: more Media Query zutrifft, erhält die angewandte Umrandung stattdessen einen höher kontrastierten solid Stil.
HTML
<div class="contrast">low contrast box</div>
CSS
.contrast {
margin: 5px;
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
Siehe auch
- CSS forced-colors Media Query