prefers-reduced-transparency
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La caractéristique média CSS prefers-reduced-transparency permet de détecter si un·e utilisateur·ice a activé un réglage sur son appareil pour réduire les effets de calques transparents ou translucides. Activer ce réglage peut améliorer le contraste et la lisibilité pour certain·e·s utilisateur·ice·s.
Syntaxe
no-preference-
Indique qu'aucune préférence n'a été exprimée sur l'appareil. Cette valeur-clé est évaluée à faux dans un contexte booléen.
reduce-
Indique qu'un·e utilisateur·ice a activé le réglage sur son appareil pour minimiser la quantité d'effets de calques transparents ou translucides.
Préférences utilisateurs
Différents systèmes d'exploitation proposent une préférence pour la réduction de la transparence, et les agents utilisateur·ice·s s'appuient généralement sur ces réglages système. Sur les plateformes qui ne proposent pas de réglage spécifique, les navigateurs peuvent également se baser sur des signaux moins explicites.
- Sous Windows 10/11 : Paramètres > Personnalisation > Couleurs > Effets de transparence.
- Sous macOS : Préférences Système > Accessibilité > Affichage > Réduire la transparence.
- Sous iOS : Réglages > Accessibilité > Affichage et taille du texte > Réduire la transparence.
Exemples
Cet exemple affiche une boîte translucide par défaut. Si le réglage pour réduire la transparence est activé dans les préférences d'accessibilité de votre appareil, la boîte devient plus opaque.
HTML
<div class="translucent">translucent box</div>
CSS
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Spécifications
| Specification |
|---|
| Media Queries Level 5 # prefers-reduced-transparency |
Compatibilité des navigateurs
Loading…
Voir aussi
- Requête média CSS
prefers-reduced-motion - Utiliser les requêtes média