Optimierung und Anpassung für Nutzer, die eine undurchsichtige Benutzeroberfläche bevorzugen
Ab Chrome 118 ist die neue Medienabfragefunktion prefers-reduced-transparency von CSS Media Queries 5 verfügbar. Nicht undurchsichtige Oberflächen können Kopfschmerzen verursachen oder bei verschiedenen Arten von Sehbehinderungen eine visuelle Herausforderung darstellen. Aus diesem Grund gibt es Systemeinstellungen für Windows, macOS und iOS, mit denen die Transparenz der Benutzeroberfläche reduziert oder entfernt werden kann.
Mit dieser neuen Medienabfrage im Browser kann CSS die Benutzeroberfläche für Nutzer anpassen, die sich eine reduzierte 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 einen Deckkraftwert bei 50%. Dieser wird dann mit HSL verwendet, um einen halbtransparenten blauen Hintergrund zu erstellen. Die verschachtelte Medienabfrage prüft, ob eine Nutzereinstellung eine reduzierte Transparenz aufweist. Ist dies der Fall, wird die Variable für die Deckkraft auf 95% gesetzt, einen nahezu undurchsichtigen Deckkraftwert.
Diese Medienabfrage passt gut zu den anderen bevorzugten Medienabfragen, die es Designern und Entwicklern ermöglichen, kreativ zu sein und gleichzeitig Anpassungen für Nutzer vornehmen. Sie können sich diese Medienabfragen wie einen Stuhl in einem Auto vorstellen, der die Position automatisch an den Nutzer anpasst. Wenn ein Nutzer Ihre Website besucht, passt sie sich automatisch an ihn an, ohne dass er danach fragt. Cool!
Anwendungsfälle zur Reduzierung der Transparenz
In den nächsten Abschnitten geht es um die Momente und Möglichkeiten, die Transparenz auf sinnvolle Weise zu reduzieren.
Halbtransparente Untertitel für Bilder
Es ist ziemlich üblich, ein Bild oder ein Video-Thumbnail mit einem halbtransparenten Untertitel oder einer Zusammenfassung zu überlagern. Das folgende Beispiel zeigt eine Möglichkeit, mit einer Präferenz für reduzierte Transparenz umzugehen. Das Overlay wurde vollständig entfernt. Unter dem Bild werden dieselben Untertitel wie überlagert angezeigt.
Transparente Dialoge, Benachrichtigungen und Pop-overs
Eine weitere Möglichkeit, wie UI-Elemente Inhalte überlagern, was oft bedeutet, dass Deckkraftelemente vorhanden sind, sind Modales, Benachrichtigungen und Popovers. In diesen Fällen kann eine höhere Deckkraft die Nutzerpräferenz respektieren und gleichzeitig dafür sorgen, dass etwas mehr Farbe von der Rückseite des Overlays durchscheint.
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
Adaptives Milchglas
Ein weiterer beliebter Bild-Overlay-Stil ist Milchglas. Im folgenden Beispiel spiegelt das Bild hinter der Bildunterschrift das Produktbild wider. Dies hat einige Vorteile: Das Bild wird nicht zugeschnitten und die helle oder dunkle Präferenz kann im Endergebnis 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 fette Nachricht, die über eine Videoschleife oder ein animiertes Bild eingeblendet wird. Das folgende Beispiel hat ein farbenfrohes, halbtransparentes Farbverlaufs-Overlay und ein unendlich animiertes Hintergrundbild. Dies mag zwar viele Aufmerksamkeit auf sich ziehen, führt bei vielen aber auch zu Problemen, da der Kontrast bei der Transparenz und die Bewegung nicht kontrollierbar sind.
Dies kann mit zwei CSS-Medienabfragen behoben werden: prefers-Reduced-motion und „prefers-dued-transparency“. Innerhalb der Medienabfrage mit reduzierten Bewegungen können Sie die unendliche Animation nur dann anwenden, wenn der Nutzer die reduzierte Bewegung nicht bevorzugt, was dem Code signalisiert, dass dieser Nutzer Bewegung hat.
Außerdem können Sie mit der Medienabfrage mit verringerter Transparenz die Deckkraft verringern, sodass die Overlay-Farbe fast 100 % beträgt. Die Botschaft kann jetzt leicht gelesen werden, ohne durch Bewegungen und Kontraste abzulenken.
Wenn Sie alles zusammenfügen, können Sie einen kreativen Look für die Benutzeroberfläche erstellen und gleichzeitig dafür sorgen, dass die Zielgruppe die Botschaft lesen und 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%)
);
}
}
Additive vs. subtraktive Perspektiven auf die Präferenzen der Nutzenden
Im vorherigen Beispiel wurden diese Nutzereinstellungen nicht auf ihre reduzierte Präferenz geprüft. Stattdessen wird auf keine Präferenz geprüft.
@media (prefers-reduced-transparency: no-preference) {
…
}
Entwickelnde und Designschaffende „Fallback“ auf die User Experience basierend auf diesen Präferenzen in einer subtraktiven Denkweise. Dies zeigt sich in den Medienabfragen als Prüfung auf „reduzieren“. Dabei wird etwas aus der UI entfernt. 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 gesunde Grunderfahrung nachzudenken, die auch allein solide ist. Fügen Sie dann, wenn es für die Nutzenden in Ordnung ist, zur Erfahrung hinzu.
Entwicklertools
Die Chrome-Entwicklertools können diese Einstellung auf dem Tab „Rendering“ emulieren, um z. B. weniger Transparenz zu erzielen. Im folgenden Video sehen Sie, wie Sie zwischen den Medienabfragen „prefers-color-scheme“ und „präsentiert-reduzierte-transparenz“ wechseln können, um die hellen, dunklen, transparenten und reduzierten Varianten der Milchglaskarte zu präsentieren.