inverted-colors est une caractéristique média CSS (cf. @media) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.

Syntaxe

Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

none
Les couleurs sont affichées normalement.
inverted
Les couleurs des pixels de la zone affichée ont été inversées.

Exemples

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: #eee;
    color: red;
  }
}

Résultat

Spécifications

Spécification État Commentaires
Media Queries Level 5
La définition de 'inverted-colors' dans cette spécification.
Brouillon de l'éditeur
Media Queries Level 4
La définition de 'inverted-colors' dans cette spécification.
Candidat au statut de recommandation Repoussée à la spécification de niveau 5 pour les requêtes média.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
inverted-colors media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Support complet 9.1WebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet 10Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,