CSS bevorzugt-reduziert-transparenz

Optimieren und anpassen für Nutzer, die eine opake Benutzeroberfläche bevorzugen.

Adam Argyle

Ab Chrome 118 ist die neue Mediaabfragefunktion prefers-reduced-transparency aus CSS Media Queries 5 verfügbar. Nicht opake Oberflächen können bei verschiedenen Arten von Sehbehinderungen zu Kopfschmerzen oder visuellen Problemen führen. Aus diesem Grund haben Windows, macOS und iOS Systemeinstellungen, mit denen die Transparenz der Benutzeroberfläche reduziert oder entfernt werden kann.

Mit dieser neuen Medienabfrage im Browser kann die Benutzeroberfläche in CSS für Nutzer angepasst werden, die eine geringere Transparenz wünschen:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

Im vorherigen Codebeispiel enthält eine CSS-Variable den Wert „50%“ für die Deckkraft, der dann mit HSL verwendet wird, um einen halbtransparenten blauen Hintergrund zu erstellen. Die verschachtelte Medienabfrage prüft, ob der Nutzer eine reduzierte Transparenz bevorzugt. Wenn ja, wird die Deckkraftvariable auf 95% angepasst, was einem nahezu undurchsichtigen Deckkraftwert entspricht.

Diese Medienabfrage passt gut zu den anderen Medienabfragen für Präferenzen, mit denen Designer und Entwickler kreativ sein und gleichzeitig Anpassungen für Nutzer vornehmen können. Stellen Sie sich diese Media-Abfragen wie einen Sitz in einem Auto vor, der sich automatisch an den Nutzer anpasst. Wenn ein Nutzer Ihre Website besucht, wird sie automatisch an ihn angepasst, ohne dass er etwas tun muss. So cool.

Anwendungsfälle für die Verringerung der Transparenz

In den nächsten Abschnitten werden Situationen und Möglichkeiten vorgestellt, wie Sie die Transparenz sinnvoll reduzieren können.

Halbtransparente Untertitel auf Bildern

Es ist ziemlich üblich, ein Bild- oder Video-Thumbnail mit einer halbtransparenten Bildunterschrift oder Zusammenfassung zu überlagern. Das folgende Beispiel zeigt eine Möglichkeit, mit einer Präferenz für reduzierte Transparenz umzugehen. Das Overlay wird vollständig entfernt und derselbe Bildtext wird unter dem Bild statt darüber angezeigt.

Transparente Modal-Dialogfelder, Benachrichtigungen und Pop-ups

Eine weitere Möglichkeit, wie UI-Elemente Inhalte überlagern, was häufig bedeutet, dass Elemente mit Deckkraft vorhanden sind, sind modale Fenster, Benachrichtigungen und Pop-over. In diesen Fällen kann die Deckkraft erhöht werden, um die Nutzerpräferenz zu berücksichtigen und gleichzeitig eine dezente Farbgebung hinter dem Overlay zu ermöglichen.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Adaptives Milchglas

Ein weiterer beliebter Stil für Bild-Overlays ist Milchglas. Im folgenden Beispiel ist das Bild hinter der Bildunterschrift eine Spiegelung des Produktbilds. Dies hat einige Vorteile: Das Bild wird nicht zugeschnitten und die helle oder dunkle Einstellung kann im Endergebnis noch etwas stärker zur Geltung kommen.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

Hero-Header

Ein gängiges Startseitenelement hat eine fett formatierte Botschaft, die über eine Videoschleife oder ein animiertes Bild eingeblendet wird. Das folgende Beispiel hat ein farbenfrohes, halbtransparentes Farbverlauf-Overlay und ein unendlich animiertes Hintergrundbild. Das kann zwar viele Blicke auf sich ziehen, aber auch Probleme verursachen, da der Kontrast aufgrund von Transparenz und Bewegung, die nicht kontrolliert werden können, gering ist.

Dieses Problem lässt sich mit zwei CSS-Medienabfragen beheben: prefers-reduced-motion und bevorzugtes-reduced-transparency. Innerhalb der Media-Abfrage für reduzierte Bewegungen können Sie die endlose Animation nur anwenden, wenn der Nutzer „keine Präferenz“ für reduzierte Bewegungen hat. Dadurch wird dem Code signalisiert, dass für diesen Nutzer Bewegungen zulässig sind.

Außerdem können Sie mit der Medienabfrage mit reduzierter Transparenz die Deckkraft so verringern, dass die Overlay-Farbe fast 100 % beträgt. Jetzt kann die Nachricht ohne Ablenkungen durch Bewegungen oder einen problematischen Kontrast leicht gelesen werden.

Wenn Sie all diese Elemente kombinieren, können Sie eine kreative Benutzeroberfläche erstellen und gleichzeitig dafür sorgen, dass die Zielgruppe sie lesen und die Botschaft verstehen kann.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

Additiv versus subtraktive Perspektiven auf Nutzerpräferenzen

Im vorherigen Beispiel wurden diese Nutzereinstellungen nicht auf ihre reduzierte Präferenz geprüft, sondern auf die Abwesenheit einer Präferenz.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Entwickler und Designer „nutzen“ häufig ein „Fallback“ für die User Experience auf der Grundlage dieser Präferenzen in subtraktiver Denkweise. In den Medienabfragen wird dies durch eine Prüfung auf „reduzieren“ angezeigt, wodurch etwas aus der Benutzeroberfläche entfernt wird. Das Beispiel zeigt eine additive Mentalität, bei der Bewegung und Transparenz hinzugefügt werden, wenn der Nutzer damit einverstanden ist.

Dieser Ansatz hilft Ihnen, über eine solide Baseline nachzudenken, die für sich genommen robust ist. Wenn der Nutzer damit einverstanden ist, können Sie die Erfahrung erweitern.

Devtools

In den Chrome-Entwicklertools können Sie diese Einstellung für reduzierte Transparenz und mehr auf dem Tab Rendering emulieren. Im folgenden Video wird gezeigt, wie Sie die Mediaabfragen „prefers-color-scheme“ und „prefers-reduced-transparency“ aktivieren und deaktivieren, um die helle, dunkle, transparente und die Variante mit reduzierter Transparenz der Milchglaskarte zu präsentieren.