CSS preferences-reduced-transparency

Optimisez et ajustez votre stratégie pour les utilisateurs qui préfèrent une interface utilisateur opaque.

Adam Argyle

Dans Chrome 118, la nouvelle fonctionnalité de requête média prefers-reduced-transparency de CSS Media Query 5 est disponibles. Les interfaces non opaques peuvent causer des maux de tête ou être un problème visuel pour différents types de déficiences visuelles. C'est pourquoi Windows, macOS et iOS ont des préférences système. pouvant réduire ou supprimer la transparence de l'interface utilisateur.

Grâce à cette nouvelle requête média dans le navigateur, le CSS peut adapter l'interface aux utilisateurs spécifiant un désir de réduction de la transparence:

.example {
  --opacity: .5;

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

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

Dans l'exemple de code précédent, une variable CSS contient une valeur d'opacité égale à 50%. qui est ensuite utilisé avec TSL pour créer un arrière-plan bleu semi-transparent. La les vérifications de requête média imbriquées pour une préférence utilisateur pour transparence réduite et, si la valeur est "true", ajuste la variable d'opacité sur 95%, valeur d'opacité presque opaque.

Cette requête média s'accorde bien avec les autres requêtes média de préférence, permettent aux concepteurs et aux développeurs d’être créatifs tout en s’adaptant aux utilisateurs. Vous pouvez considérer ces requêtes média comme une chaise dans une voiture qui, il ajuste la position à l'utilisateur ; lorsqu'un utilisateur visite votre site Web, s'ajuste automatiquement sans qu'il le demande. Trop cool.

Cas d'utilisation pour réduire la transparence

Dans les sections suivantes, nous allons nous pencher sur les moments et les opportunités pour réduire la transparence de manière significative.

Légendes semi-transparentes sur les images

Il est assez courant de superposer une image ou une miniature de vidéo un sous-titre ou un résumé semi-transparent. L'exemple suivant illustre une façon pour gérer une préférence pour une transparence réduite. La superposition est entièrement et le même contenu de légende s'affiche sous l'image au lieu en superposition.

Modales transparentes, notifications et pop-ups

Une autre façon dont les éléments de l'interface se superposent au contenu, ce qui signifie souvent des éléments de l'opacité sont présentes, est avec les modales, les notifications et les pop-ups. Dans ces cas, l'amélioration de l'opacité peut respecter les préférences de l'utilisateur tout en autorisant de couleur subtile derrière la superposition pour la mettre en évidence.

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

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

Verre dépoli adaptatif

Le verre dépoli est un autre style courant de superposition d'image. Dans l'exemple suivant, l'image derrière la légende est un reflet de l'image du produit. Ce présente quelques avantages: l'image n'est pas recadrée et l'image claire ou sombre la préférence peut transparaître un peu plus dans le résultat final.

.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%;
  }
}

En-tête principal

Un élément courant de la page d'accueil comporte un message en gras superposé à une vidéo en boucle ou une image animée. L'exemple suivant présente un dégradé semi-transparent coloré et une image de fond animée à l'infini. Bien que cela puisse attirer beaucoup d'yeux, cela posera également des problèmes pour beaucoup, en raison du faible contraste avec la transparence et le mouvement qui ne peuvent pas être contrôlés.

Ce problème peut être résolu à l'aide de deux requêtes média CSS: préfère-moyen-réduit et Preferreds-reduced-transparency. Dans la requête média à mouvement réduit, vous pouvez appliquer l'animation infinie uniquement si l'utilisateur a défini l'option "sans préférence" ; pour des tarifs réduits mouvement, signalant au code qu’il est acceptable que cet utilisateur puisse avoir du mouvement.

De plus, avec la requête média à transparence réduite, vous pouvez réduire l'opacité afin que la couleur de superposition soit proche de 100%. Désormais, le message peut être lu facilement sans distraction du mouvement ni contraste problématique.

Regroupez toutes ces étapes pour déployer l'interface d'une création tout en vous assurant le public cible peut le lire et comprendre le message.

.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%)
    );
  }
}

Perspectives additives ou soustractives sur les préférences utilisateur

Dans l'exemple précédent, les utilisateurs n'ont pas vérifié si les préférences de l'utilisateur de préférence, il vérifie qu'il n'y a pas de préférence.

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

Les développeurs et les concepteurs font souvent des "recours" l'expérience utilisateur en fonction de préférences, avec un esprit soustrayant. Cela se manifeste dans les requêtes média sous la forme une vérification de « réduction », ce qui entraîne la suppression d'un élément de l'interface utilisateur. La l'exemple montre une mentalité additive, où le mouvement et la transparence sont ajoutés si l'utilisateur est d'accord.

Cette approche vous aide à penser à une expérience de référence saine, robustes par elles-mêmes. Ensuite, si l'utilisateur est d'accord, enrichissez l'expérience.

Outils de développement

Les outils pour les développeurs Chrome peuvent émuler cette préférence afin de réduire la transparence (et autres) dans l'onglet Affichage. Dans la vidéo suivante, Découvrez comment activer ou désactiver les préférences "prefers-color-scheme" et "prefers-reduced-transparency" des requêtes média pour afficher les nuances claires, sombres, transparentes et réduites de la transparence de la carte en verre dépoli.