inverted-colors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La caractéristique média CSS inverted-colors permet de tester si l'agent utilisateur ou le système d'exploitation sous-jacent a inversé toutes les couleurs.
L'inversion des couleurs peut avoir des effets indésirables, comme la transformation des ombres en zones claires, ce qui peut réduire la lisibilité du contenu. Grâce à cette caractéristique média, il est possible de détecter si une inversion est en cours et d'adapter la présentation du contenu tout en respectant la préférence de l'utilisateur·ice.
Syntaxe
/* Valeur par mot-clé */
@media (inverted-colors: inverted) {
/* styles appliqués si une inversion des couleurs est détectée */
}
La caractéristique inverted-colors se définit comme l'une des valeurs mot-clé suivantes :
Exemples
Appliquer des styles si une inversion des couleurs est détectée
Cet exemple montre les effets des deux valeurs mot-clé de la caractéristique média inverted-colors ainsi que le cas où la caractéristique n'est pas prise en charge.
HTML
<p>
Si vous utilisez les couleurs inversées, ce texte devrait être bleu sur blanc
(l'inverse de jaune sur noir). Sinon, il devrait être rouge sur gris clair.
</p>
<p>
Si le texte est gris, cela indique que votre navigateur ne prend pas en charge
la caractéristique média `inverted-colors`.
</p>
CSS
p {
color: gray;
}
@media (inverted-colors: inverted) {
p {
background: black;
color: yellow;
}
}
@media (inverted-colors: none) {
p {
background: #eeeeee;
color: red;
}
}
Résultat
Spécifications
| Specification |
|---|
| Media Queries Level 5 # inverted |
Compatibilité des navigateurs
Loading…
See also
@media- Le module des requêtes média CSS
- Utiliser les requêtes média