Optimisez et ajustez votre stratégie pour les utilisateurs qui préfèrent une interface utilisateur opaque.
À partir de Chrome 118, la nouvelle fonctionnalité de requêtes média prefers-reduced-transparency de CSS Media Query 5 est disponible. Les interfaces non opaques peuvent causer des maux de tête ou poser des problèmes visuels pour divers types de déficiences visuelles. C'est pourquoi Windows, macOS et iOS disposent de préférences système qui peuvent 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 pour les utilisateurs souhaitant une transparence réduite:
.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é sur 50%, qui est ensuite utilisée avec HSL pour créer un arrière-plan bleu semi-transparent. La requête média imbriquée recherche une préférence utilisateur pour une transparence réduite. Lorsqu'elle est définie sur "true", elle ajuste la variable d'opacité sur 95%, une valeur d'opacité presque opaque.
Cette requête média s'accorde bien avec les autres requêtes média de préférence, qui permettent aux concepteurs et aux développeurs d'être créatifs tout en s'adaptant pour les utilisateurs. Vous pouvez considérer ces requêtes média comme une chaise dans une voiture, qui ajuste automatiquement la position en fonction de l'utilisateur. Lorsqu'un utilisateur visite votre site Web, il s'ajuste automatiquement sans qu'il le demande. Super !
Cas d'utilisation pour réduire la transparence
Les sections suivantes décrivent les moments et les opportunités permettant de réduire la transparence de manière significative.
Légendes semi-transparentes sur les images
Il est assez courant de superposer une miniature d'image ou de vidéo avec un résumé ou une légende semi-transparente. L'exemple suivant illustre une façon de gérer une préférence de transparence réduite. La superposition est entièrement supprimée et le même contenu de légende s'affiche sous l'image au lieu d'être superposé.
Fenêtres modales, notifications et pop-overs transparentes
Les éléments d'interface utilisateur se superposent au contenu (ce qui signifie souvent que des éléments d'opacité sont présents) est l'utilisation de fenêtres modales, de notifications et de fenêtres pop-up. Dans ce cas, l'amélioration de l'opacité peut respecter les préférences de l'utilisateur tout en permettant à une légère quantité de couleur de l'arrière de la superposition d'apparaître.
.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 de superposition d'image populaire. Dans l'exemple suivant, l'image derrière la légende est le reflet de l'image du produit. Cela présente deux avantages: l'image n'est pas recadrée, et les préférences concernant le thème clair ou sombre peuvent apparaî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 de page d'accueil courant comporte un message en gras superposé à une vidéo en boucle ou à une image animée. L'exemple suivant présente une superposition de dégradé semi-transparent coloré et une image de fond animée à l'infini. Bien que cela puisse attirer de nombreux yeux, cela créera également des problèmes pour beaucoup, en raison du faible contraste avec la transparence et les mouvements qui ne peuvent pas être contrôlés.
Ce problème peut être résolu à l'aide de deux requêtes média CSS : prefers-reduced-motion et préfèrent-reduced-transparency. Dans la requête de média à mouvement réduit, vous ne pouvez appliquer l'animation infinie que si l'utilisateur n'a aucune préférence pour le mouvement réduit, ce qui indique au code qu'il peut avoir des mouvements.
De plus, avec la requête média à transparence réduite, vous pouvez réduire l'opacité afin que la couleur de la superposition atteigne presque 100%. Le message peut désormais être lu facilement sans distraction du mouvement ni contraste problématique.
Assemblez le tout et vous pouvez déployer un visuel d'interface utilisateur de création tout en vous assurant que l'audience 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 des utilisateurs
L'exemple précédent ne vérifie pas l'absence de préférences utilisateur dans ces préférences utilisateur, mais leur réduction.
@media (prefers-reduced-transparency: no-preference) {
…
}
Les développeurs et les concepteurs "se servent souvent" de l'expérience utilisateur en fonction de ces préférences, dans un état d'esprit soustractif. Cela se manifeste dans les requêtes multimédias sous la forme d'une recherche de "réduction". Un élément de l'interface utilisateur est alors supprimé. L'exemple montre une mentalité additive, dans laquelle le mouvement et la transparence sont ajoutés si l'utilisateur accepte.
Cette approche vous aide à réfléchir à une expérience de référence saine et robuste. Si l'utilisateur le souhaite, ajoutez-le à l'expérience.
Outils de développement
Les outils pour les développeurs Chrome peuvent émuler cette préférence pour une transparence réduite (et plus encore) dans l'onglet Rendu. Dans la vidéo suivante, découvrez comment activer/désactiver les requêtes multimédias "Preferreds-color-scheme" et "Preferreds-reduced-transparency" pour présenter les variantes claires, sombres, transparentes et à transparence réduite de la carte en verre dépoli.