@media

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

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 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 9Samsung 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 9Samsung Internet Android Support complet 4.0
aspect-ratio media featureChrome Support complet 3Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 10Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 4.2Samsung Internet Android Support complet 1.0
calc() expressionsChrome Support complet 66Edge Support complet 79Firefox 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 9.0
color media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
color-gamut media featureChrome Support complet 58Edge Support complet 79Firefox 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 featureChrome Support complet 29Edge Support complet 79Firefox Aucun support NonIE Aucun support NonOpera Support complet 16Safari Support complet 8WebView Android Support complet ≤37Chrome 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 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari 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 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari 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 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
display-mode media featureChrome Support complet 45Edge Support complet 79Firefox 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
forced-colors media feature
Expérimentale
Chrome Support complet 79
Notes Désactivée
Support complet 79
Notes Désactivée
Notes See bug 970285.
Désactivée From version 79: this feature is behind the #forced-colors preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Support complet 79Firefox Support complet 81
Désactivée
Support complet 81
Désactivée
Désactivée From version 81: this feature is behind the layout.css.forced-colors.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 970285.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 970285.
Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 970285.
grid media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 10Opera Support complet 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari 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 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari 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 9Samsung Internet Android Support complet 5.0
inverted-colors media featureChrome 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
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 Support complet 1.0
Media query value supportChrome Support complet 66Edge Support complet 79Firefox Support complet 59IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Support complet 66Chrome Android Support complet 66Firefox Android Support complet 59Opera Android Support complet 47Safari iOS Aucun support NonSamsung Internet Android Support complet 9.0
monochrome media featureChrome Support complet 1Edge Support complet 79Firefox Support complet 2IE Aucun support NonOpera Support complet 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Nested media queriesChrome Support complet 26Edge Support complet 12Firefox Support complet 11IE Aucun support NonOpera Support complet 12.1Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 26Firefox Android Support complet 14Opera Android Support complet 12.1Safari iOS Support complet 7Samsung Internet Android Support complet 1.5
orientation media featureChrome Support complet 3Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet 10.6Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 4.2Samsung Internet Android Support complet 1.0
overflow-block media featureChrome 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 featureChrome 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 9Samsung Internet Android Support complet 5.0
prefers-color-scheme media featureChrome Support complet 76Edge Support complet 79Firefox Support complet 67IE Aucun support NonOpera Support complet 62Safari Support complet 12.1WebView Android Support complet 76Chrome Android Support complet 76Firefox Android Aucun support NonOpera Android Support complet 54Safari iOS Support complet 13Samsung Internet Android Support complet 12.0
prefers-contrast media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 80
Désactivée
Support complet 80
Désactivée
Désactivée From version 80: this feature is behind the layout.css.prefers-contrast.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 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 Aucun support Non
prefers-reduced-data media feature
Expérimentale
Chrome Support complet 85
Notes Désactivée
Support complet 85
Notes Désactivée
Notes See bug 1051189.
Désactivée From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Support complet 85
Notes Désactivée
Support complet 85
Notes Désactivée
Notes See bug 1051189.
Désactivée From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1051189.
Chrome Android Support complet 85
Notes Désactivée
Support complet 85
Notes Désactivée
Notes See bug 1051189.
Désactivée From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
prefers-reduced-motion media featureChrome Support complet 74Edge Support complet 79Firefox Support complet 63IE Aucun support NonOpera Support complet 62Safari Support complet 10.1WebView Android Support complet 74Chrome Android Support complet 74Firefox Android Support complet 64Opera Android Support complet 53Safari iOS Support complet 10.3Samsung Internet Android Support complet 11.0
prefers-reduced-transparency 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 Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
resolution media featureChrome Support complet 29Edge 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 16
Support complet 16
Aucun support 10 — 15
Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 78087.
WebView Android Support complet ≤37Chrome Android Support complet 29Firefox Android Support complet 8
Support complet 8
Support partiel 4
Notes
Notes Supports <integer> values only.
Opera Android Support complet 16
Support complet 16
Aucun support 10.1 — 14
Safari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 78087.
Samsung Internet Android Support complet 2.0
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 Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
scripting media featureChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Firefox 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 Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
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 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 Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
width media featureChrome Support complet 1Edge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet 10Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari 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 15 — 23Safari Support complet 4WebView Android Aucun support ≤37 — ≤37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support 14 — 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 15Safari Support complet 3WebView Android Support complet ≤37Chrome 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 14Safari 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 15Safari Support complet 3WebView Android Support complet ≤37Chrome 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 14Safari 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 15Safari Support complet 3WebView Android Support complet ≤37Chrome 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 14Safari 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 15 — 23Safari Support complet 4WebView Android Aucun support ≤37 — ≤37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support 14 — 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 Aucun support 12 — 79Firefox 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 15 — 23Safari Support complet 4WebView Android Aucun support ≤37 — ≤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 14 — 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 15 — 23Safari Support complet 4WebView Android Aucun support ≤37 — ≤37Chrome Android Aucun support 18 — 36Firefox Android Aucun support NonOpera Android Aucun support 14 — 24Safari iOS Support complet 3.2Samsung Internet Android Aucun support 1.0 — 3.0

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.
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