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 transluzenten Schichteffekte auf dem Gerät zu reduzieren. Das Aktivieren einer solchen Einstellung kann den Kontrast und die Lesbarkeit für einige Benutzer verbessern.

Syntax

no-preference: Gibt an, dass ein Benutzer keine Präferenz auf dem Gerät bekannt gemacht 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 transluzenten Schichteffekte zu minimieren.

Benutzerpräferenzen

Verschiedene Betriebssysteme bieten eine Präferenz zur Reduzierung der Transparenz, und Benutzeragenten werden voraussichtlich auf diese Systemeinstellungen zurückgreifen. Sie können sich auch auf weniger explizite Signale auf Plattformen stützen, die keine spezifische Einstellung bieten.

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 transluzentes Kästchen. Wenn die Einstellung zur Reduzierung der Transparenz in den Bedienungshilfeneinstellungen auf Ihrem Gerät aktiviert ist, wird das transluzente Kästchen opaker.

HTML

html

<div class="translucent">translucent box</div>

CSS

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden