CSS bevorzugt-reduziert-transparenz

Optimiere und richte sie für Nutzer ein, die eine undurchsichtige Benutzeroberfläche bevorzugen.

Adam Argyle

Ab Chrome 118 die neue Funktion für Medienabfragen prefers-reduced-transparency aus CSS Media Queries 5 ist verfügbar. Nicht undurchsichtige Oberflächen können Kopfschmerzen bereiten oder die verschiedenen Arten von Sehschwächen. Deshalb gibt es Systemeinstellungen unter 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 an die Nutzer anpassen der den Wunsch nach reduzierter Transparenz äußert:

.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%. das anschließend mit HSL verwendet wird, um einen halbtransparenten blauen Hintergrund zu erzeugen. Die Eine verschachtelte Medienabfrage sucht nach einer Nutzereinstellung für mit reduzierter Transparenz. Bei "true" wird die Deckkraftvariable auf 95% gesetzt. einen fast intransparenten Wert.

Diese Medienabfrage passt gut zu den anderen bevorzugten Medienabfragen, die ermöglichen es Designschaffenden und Entwickelnden, kreativ zu sein und sich gleichzeitig an die Nutzenden anzupassen. Sie können sich diese Medienanfragen wie einen Stuhl im Auto vorstellen, der automatisch die Position an die Nutzenden anpasst; Wenn ein Nutzer Ihre Website besucht, passt sich automatisch an, ohne dass sie danach fragen. So cool.

Anwendungsfälle für weniger Transparenz

In den nächsten Abschnitten geht es darum, die Transparenz sinnvoll reduziert.

Halbtransparente Untertitel auf Bildern

Es ist durchaus üblich, ein Bild- oder Video-Thumbnail mit einem halbtransparenten Untertiteln oder einer Zusammenfassung. Das folgende Beispiel zeigt eine Möglichkeit, um mit einer Präferenz für reduzierte Transparenz umzugehen. Das Overlay ist vollständig und unter dem Bild werden dieselben Untertitel angezeigt, eingeblendet.

Transparente Modale, Benachrichtigungen und Pop-over

Eine weitere Möglichkeit, wie UI-Elemente Inhalte überlagern. Das bedeutet oft, wird bei modalen Benachrichtigungen, Benachrichtigungen und Pop-overs eingeblendet. In diesen Fällen Durch das Erhöhen der Deckkraft werden die Nutzerpräferenzen berücksichtigt und gleichzeitig eine Feine Farbe hinter dem Overlay zum Durchscheinen.

.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 Das Bild hinter dem Untertitel spiegelt das Produktbild wider. Dieses hat zwei Vorteile: Das Bild ist nicht zugeschnitten und das helle oder dunkle Bild wird nicht zugeschnitten. Präferenz kann im Endergebnis etwas stärker hervorgehen.

.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 Botschaft, die über ein sich wiederholendes Video oder animiertes Bild. Das folgende Beispiel hat einen farbigen, halbtransparenten Farbverlauf -Overlay und ein unendlich animiertes Hintergrundbild. Dies kann zwar wird es aufgrund des geringen Kontrasts Transparenz und Bewegungen, die sich nicht steuern lassen.

Dies kann mit zwei CSS-Medienabfragen behoben werden: bevorzugt-geminderte-Bewegungen und bevorzugt-verringerte-Transparenz. In der Medienabfrage mit reduzierter Bewegung können Sie Unendliche Animation nur anwenden, wenn der Nutzer keine Vorgabe hat für reduzierte Bewegung und signalisiert dem Code, dass es in Ordnung ist, wenn sich die Nutzenden bewegen dürfen.

Außerdem können Sie mit der Medienabfrage mit geringerer Transparenz die sodass die Overlay-Farbe fast 100 % beträgt. Jetzt kann die Nachricht einfach gelesen werden. ohne Ablenkung durch Bewegung oder problematischen Kontrast.

Kombinieren Sie alles zusammen, können Sie ein Creative-UI-Design bereitstellen und gleichzeitig sicherstellen, die Zielgruppe sie lesen und die Botschaft erhalten 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 und subtraktive Perspektiven auf die Präferenzen der Nutzenden

Im vorherigen Beispiel wurden diese Nutzereinstellungen nicht auf ihre reduzierten sucht er stattdessen nach „Keine Präferenz“.

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

Entwickler und Designer nutzen oft ein Fallback die User Experience, die auf diesen in einer subtraktiven Mentalität. Dies wird in den Medienabfragen als die Option „Reduzieren“, An dieser Stelle wird etwas aus der Benutzeroberfläche entfernt. Die Das Beispiel zeigt eine additive Mentalität, bei der Bewegung und Transparenz hinzugefügt werden, wenn dass die Nutzenden damit einverstanden sind.

Dieser Ansatz hilft Ihnen, über ein gesundes Baseline-Erlebnis nachzudenken, das selbst stabil zu machen. Wenn es für den Nutzer in Ordnung ist, kannst du ihn ergänzen.

Entwicklertools

Die Chrome-Entwicklertools können diese Einstellung emulieren, um die Transparenz zu verringern weitere) auf dem Tab Rendering. Im folgenden Video Hier erfahren Sie, wie Sie zwischen „prefers-color-scheme“ und „prefers-reduced-transparency“ wechseln, Medienabfragen, um das helle, dunkle, transparente und reduzierte Transparenz zu präsentieren die verschiedenen Varianten der Milchglaskarte.