prefers-contrast CSS-Media-Feature
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Mai 2022 browserübergreifend verfügbar.
Die prefers-contrast CSS Media-Feature wird verwendet, um zu erkennen, ob der Benutzer eine Darstellung der Webinhalte mit geringem oder hohem Kontrast angefordert hat.
Syntax
no-preference-
Zeigt an, dass der Benutzer keine Präferenz an das System bekanntgegeben hat. Dieser Schlüsselwortwert wird im booleschen Kontext als falsch bewertet.
more-
Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzeroberfläche mit einem höheren Kontrast bevorzugt.
less-
Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzeroberfläche mit einem niedrigeren Kontrast bevorzugt.
custom-
Zeigt an, dass der Benutzer dem System mitgeteilt hat, eine spezifische Farbpalette zu verwenden, und der durch diese Farben implizierte Kontrast weder
morenochlessentspricht. Dieser Wert wird der von Benutzern vonforced-colors: activeangegebenen Farbpalette entsprechen.
Benutzerpräferenzen
Verschiedene Betriebssysteme unterstützen solche Präferenzen und Benutzeragenten werden wahrscheinlich auf die Einstellungen des Betriebssystems zurückgreifen.
Beispiele
Dieses Beispiel enthält ein Feld mit einer gestrichelten outline, die standardmäßig gesetzt ist. Wenn die prefers-contrast: more Media-Query übereinstimmt, wird die angewendete Umrandung stattdessen mit einem kontrastreicheren solid-Stil versehen.
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
| Spezifikation |
|---|
| Media Queries Level 5 # prefers-contrast |
Browser-Kompatibilität
Siehe auch
- CSS forced-colors Media-Query