La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) notamment grâce à l'interface CSSMediaRule.

Syntaxe

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

/* Au niveau le plus haut du code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Imbriquée dans une autre règle-@ conditionnelle */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

Syntaxe formelle

@media <media-query-list> {
  <group-rule-body>
}


<media-query-list> = <media-query>#


<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?


<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>


<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>


<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )


<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>


<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Les caractéristiques média

Caractéristiques média (media features)

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

Nom Résumé Notes
width La largeur de la zone d'affichage (viewport)
height La hauteur de la zone d'affichage
aspect-ratio Le rapport largeur/hauteur de la zone d'affichage
orientation L'orientation la zone d'affichage
resolution La densité de pixel pour l'appareil d'affichage
scan Le processus de scan de l'appareil d'affichage
grid Le type d'écran de l'appareil : matriciel ou grille ?
update La fréquence de modification du contenu par l'appareil d'affichage Ajoutée avec le niveau 4 du module de spécification Media Queries.
overflow-block La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de bloc Ajoutée avec le niveau 4 du module de spécification Media Queries.
overflow-inline La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne Ajoutée avec le niveau 4 du module de spécification Media Queries.
color Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
color-gamut Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage Ajoutée avec le niveau 4 du module de spécification Media Queries.
color-index Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
display-mode Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifeste Définie dans la spécification pour les manifestes des applications web.
monochrome Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
inverted-colors L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation Reportée au niveau 5 du module de spécification Media Queries.
pointer La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision Ajoutée avec le niveau 4 du module de spécification Media Queries.
hover La capacité du mécanisme de saisie principal à survoler les éléments Ajoutée avec le niveau 4 du module de spécification Media Queries.
any-pointer La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision Ajoutée avec le niveau 4 du module de spécification Media Queries.
any-hover La capacité d'un des mécanismes de saisie à survoler les éléments Ajoutée avec le niveau 4 du module de spécification Media Queries.
light-level Le niveau de luminosité de l'environnement Ajoutée avec le niveau 5 du module de spécification Media Queries.
prefers-reduced-motion L'utilisateur préfère que la quantité de mouvement sur la page soit réduite. Ajoutée avec le niveau 5 du module de spécification Media Queries.
prefers-reduced-transparency L'utilisateur préfère que la transparence utilisée sur la page soit réduite. Ajoutée avec le niveau 5 du module de spécification Media Queries.
prefers-contrast L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches. Ajoutée avec le niveau 5 du module de spécification Media Queries.
prefers-color-scheme L'utilisateur préfère utiliser un thème clair ou un thème sombre. Ajoutée avec le niveau 5 du module de spécification Media Queries.
forced-colors Détecte si l'agent utilisateur restreint la palette de couleurs. Ajoutée avec le niveau 5 du module de spécification Media Queries.
scripting La disponibilité des fonctions de script (JavaScript par exemple) Reportée au niveau 5 du module de spécification Media Queries.
device-width La largeur de la surface de rendu pour l'appareil d'affichage Dépréciée par le niveau 4 du module de spécification Media Queries.
device-height La hauteur de la surface de rendu pour l'appareil d'affichage Dépréciée par le niveau 4 du module de spécification Media Queries.
device-aspect-ratio Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichage Dépréciée par le niveau 4 du module de spécification Media Queries.

Exemples

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :

@media (height > 600px) {
  body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
  body { line-height: 1.4; }
}

Pour plus d'exemples, voir Utiliser les requêtes média.

Accessibilité

Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (<length>).

Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

Sécurité

Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.

Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

Spécifications

Spécification Commentaires Retours
Media Queries Level 5
La définition de '@media' dans cette spécification.
Réintègre light-level, inverted-colors et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.
Ajout des caractéristiques média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast et prefers-color-scheme.
Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
CSS Conditional Rules Module Level 3
La définition de '@media' dans cette spécification.
Définition de la syntaxe de base pour la règle @media. Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
Media Queries Level 4
La définition de '@media' dans cette spécification.

Ajout des caractéristiques média scripting, pointer, hover, update, overflow-block et overflow-inline.
Dépréciation de l'ensemble des types de média à l'exception de screen, print, speech et all.
La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé or.

Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
Media Queries
La définition de '@media' dans cette spécification.
CSS Level 2 (Revision 1)
La définition de '@media' dans cette spécification.
Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
@mediaChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.1Samsung Internet Android Support complet 1.0
any-hover media featureChrome Support complet 41Edge Support complet 16Firefox Support complet 64IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android Support complet 5.0
any-pointer media featureChrome Support complet 41Edge Support complet 12Firefox Support complet 64IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Support complet 3Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet 4.1WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4.2Samsung Internet Android Support complet 1.0
calc() expressionsChrome Support complet 66Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Support complet 53Safari Support complet 12WebView Android Support complet 66Chrome Android Support complet 66Firefox Android Support complet 59Opera Android Support complet 47Safari iOS Support complet 12Samsung Internet Android Support complet Oui
color media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
color-gamut media featureChrome Support complet 58Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 45Safari Support complet 10WebView Android Support complet 58Chrome Android Support complet 58Firefox Android Aucun support NonOpera Android Support complet 43Safari iOS Support complet 10Samsung Internet Android Support complet 7.0
color-index media feature
Non-standard
Chrome Support complet 29Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 16Safari Support complet 8WebView Android Support complet OuiChrome Android Support complet 29Firefox Android Aucun support NonOpera Android Support complet 16Safari iOS Support complet 8Samsung Internet Android Support complet 2.0
device-aspect-ratio media feature
ObsolèteNon-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
device-height media feature
ObsolèteNon-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
device-width media feature
ObsolèteNon-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
display-mode media featureChrome Support complet 45Edge Aucun support NonFirefox Support complet 47
Notes
Support complet 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE Aucun support NonOpera Support complet 32Safari Support complet 13WebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 47
Notes
Support complet 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android Support complet 32Safari iOS Support complet 13Samsung Internet Android Support complet 5.0
grid media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 10Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
height media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
hover media featureChrome Support complet 38
Notes
Support complet 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Support complet 12Firefox Support complet 64IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 38
Notes
Support complet 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android Support complet 50Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
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
light-level media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
Media feature expressionsChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.1Samsung Internet Android ?
Media query value supportChrome Support complet 66Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet 66Firefox Android Aucun support NonOpera Android Support complet 47Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
monochrome media featureChrome Support complet 1Edge Aucun support NonFirefox Support complet 2IE Aucun support NonOpera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
orientation media featureChrome Support complet 3Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 4.1WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4.2Samsung Internet Android Support complet 1.0
overflow-block media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
overflow-inline media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
pointer media featureChrome Support complet 41Edge Support complet 12Firefox Support complet 64IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 50Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
prefers-color-scheme media feature
Expérimentale
Chrome Support complet 76Edge Aucun support NonFirefox Support complet 67IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Support complet 76Chrome Android Support complet 76Firefox Android Support complet 67Opera Android Aucun support NonSafari iOS Support complet 13Samsung Internet Android ?
prefers-reduced-motion media feature
Expérimentale
Chrome Support complet 74Edge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari Support complet 10.1WebView Android Support complet 74Chrome Android Support complet 74Firefox Android Support complet 64Opera Android Aucun support NonSafari iOS Support complet 10.3Samsung Internet Android ?
resolution media featureChrome Support complet 27Edge Support complet 12Firefox Support complet 8
Support complet 8
Support partiel 3.5
Notes
Notes Supports <integer> values only.
IE Support complet 9Opera Support complet OuiSafari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet 27Firefox Android Support complet 8
Support complet 8
Support partiel 4
Notes
Notes Supports <integer> values only.
Opera Android Support complet OuiSafari iOS Support complet 7Samsung Internet Android Support complet 1.5
scan media featureChrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExpérimentaleNon-standard
Chrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1166581.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1166581.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
speech media typeChrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 9.2Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 10.1Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
update media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
-moz-device-pixel-ratio media feature
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 4IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 4Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
-webkit-animation media feature
ObsolèteNon-standard
Chrome Aucun support 2 — 36Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support ? — 23Safari Support complet 4WebView Android Aucun support ? — 37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support ? — 24Safari iOS Support complet 3.2Samsung Internet Android Aucun support 1.0 — 3.0
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet 18Firefox Android Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
-webkit-transform-2d media feature
Non-standard
Chrome Aucun support 2 — 36Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support ? — 23Safari Support complet 4WebView Android Aucun support ? — 37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support ? — 24Safari iOS Support complet 3.2Samsung Internet Android Aucun support 1.0 — 3.0
-webkit-transform-3d media feature
Non-standard
Chrome Aucun support 2 — 36Edge Support complet 12Firefox Support complet 49
Support complet 49
Support complet 46
Désactivée
Désactivée From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support ? — 23Safari Support complet 4WebView Android Aucun support ? — 37Chrome Android Aucun support 18 — 36Firefox Android Support complet 49
Support complet 49
Support complet 46
Désactivée
Désactivée From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support ? — 24Safari iOS Support complet 3.2Samsung Internet Android Aucun support 1.0 — 3.0
-webkit-transition media feature
ObsolèteNon-standard
Chrome Aucun support 2 — 36Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support ? — 23Safari Support complet 4WebView Android Aucun support ? — 37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support ? — 24Safari iOS Support complet 3.2Samsung Internet Android Aucun support 1.0 — 3.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,