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 führen oder die Sicht erschweren. 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 dies der Fall ist, 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. Das ist 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. Im folgenden Beispiel wird eine Möglichkeit veranschaulicht, wie eine Einstellung für eine reduzierte Transparenz verarbeitet werden kann. Das Overlay wird vollständig entfernt und derselbe Bildtext wird unter dem Bild statt darüber angezeigt.

Transparente Modals, Benachrichtigungen und Pop-ups

Eine weitere Möglichkeit, wie UI-Elemente Inhalte überlagern, was oft bedeutet, dass Elemente mit Transparenz vorhanden sind, sind Modalfenster, Benachrichtigungen und Pop-ups. 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. Das hat einige Vorteile: Das Bild wird nicht zugeschnitten und die Einstellung für hell oder dunkel kann im Endergebnis etwas stärker zum Ausdruck 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 ist eine fett formatierte Botschaft, die über ein sich wiederholendes Video oder ein animiertes Bild gelegt wird. Das folgende Beispiel enthält ein farbenfrohes, halbtransparentes Farbverlauf-Overlay und ein endlos 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.

Das lässt sich mit zwei CSS-Medienabfragen beheben: prefers-reduced-motion und „prefers-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 entwerfen 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 wurde nicht geprüft, ob die Nutzerpräferenzen reduziert sind, sondern ob keine Präferenz vorhanden ist.

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

Entwickler und Designer reduzieren die Nutzerfreundlichkeit oft auf der Grundlage dieser Präferenzen, indem sie Elemente entfernen. 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 Denkweise, 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 ergänzen.

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.