Caractéristique média CSS `inverted-colors`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

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

css

/* 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 :

none: Indique que les couleurs sont affichées normalement et qu'aucune inversion n'a eu lieu. Cette valeur est évaluée comme fausse.
inverted: Indique que tous les pixels de la zone affichée ont été inversés. Cette valeur est évaluée comme vraie.

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

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

css

p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eeeeee;
    color: red;
  }
}