prefers-reduced-transparency
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das prefers-reduced-transparency CSS Medienmerkmal wird verwendet, um festzustellen, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die transparenten oder durchscheinenden Schichteffekte auf dem Gerät zu reduzieren. Das Einschalten einer solchen Einstellung kann helfen, den Kontrast und die Lesbarkeit für einige Benutzer zu verbessern.
Syntax
no-preference-
Gibt an, dass ein Benutzer keine Präferenz auf dem Gerät festgelegt hat. Dieser Schlüsselwortwert wird im booleschen Kontext als falsch ausgewertet.
reduce-
Gibt an, dass ein Benutzer die Einstellung auf seinem Gerät aktiviert hat, um die Menge der transparenten oder durchscheinenden Schichteffekte zu minimieren.
Benutzerpräferenzen
Verschiedene Betriebssysteme bieten eine Präferenz zur Reduzierung der Transparenz, und Benutzeragenten verlassen sich wahrscheinlich auf diese Systemeinstellungen. Sie können sich auch auf weniger explizite Signale auf Plattformen verlassen, die keine spezifische Einstellung anbieten.
- In Windows 10/11: Einstellungen > Personalisierung > Farben > Transparenzeffekte.
- In macOS: Systemeinstellungen > Bedienungshilfen > Anzeige > Transparenz reduzieren.
- In iOS: Einstellungen > Bedienungshilfen > Anzeige & Textgröße > Transparenz reduzieren.
Beispiele
Dieses Beispiel hat standardmäßig ein durchscheinendes Feld. Wenn die Einstellung zur Reduzierung von Transparenz in den Bedienungshilfen Ihres Geräts aktiviert ist, wird das durchscheinende Feld undurchsichtiger.
HTML
<div class="translucent">translucent box</div>
CSS
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # prefers-reduced-transparency |
Browser-Kompatibilität
Siehe auch
- CSS prefers-reduced-motion Medienabfrage
- Verwendung von Medienabfragen