Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) @media est utilisée afin d'appliquer les styles de façon conditionnelle.

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut media de l'élément <source> qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML <picture>.

De plus, la méthode du DOM Window.matchMedia() peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode MediaQueryList.addListener() afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

Référence

Règles @

Guides

Manipuler les requêtes média
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
Tester les requêtes média
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
Utiliser des requêtes média pour l'accessibilité
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.

Spécifications

Spécification État Commentaires
Unknown Statut inconnu  
CSS Conditional Rules Module Level 3 Candidat au statut de recommandation  
Media Queries Level 4 Candidat au statut de recommandation  
Media Queries Recommendation  
CSS Level 2 (Revision 1) Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 6Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9Safari iOS Support complet 3.1Samsung 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 ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 9Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Media feature expressionsChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 9Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9Safari iOS Support complet 3.1Samsung Internet Android ?
any-hover media featureChrome Support complet 41Edge Support complet 16Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Edge Mobile Support complet 16Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
Opera 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 Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Edge Mobile Support complet 12Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Support complet 4Edge ? Firefox Support complet 3.5IE Support complet 9Opera Support complet 53Safari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
color media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome Support complet 58Edge ? Firefox Aucun support NonIE Aucun support NonOpera Support complet 45Safari Support complet OuiWebView Android ? Chrome Android Support complet 58Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 45Safari iOS ? Samsung Internet Android ?
color-index media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Aucun support NonIE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
device-aspect-ratio media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome Support complet 46Edge 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 ? Opera ? Safari ? WebView Android ? Chrome Android Support complet 46Edge Mobile Aucun support NonFirefox 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 ? Safari iOS ? Samsung Internet Android ?
grid media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox ? IE Support complet 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inverted-colors media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Support complet OuiWebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android ?
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 ? Chrome Android Support complet 50Edge Mobile Support complet 12Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
light-level media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
monochrome media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-inline media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer media featureChrome Support complet 41Edge Support complet 12Firefox Support complet 64IE ? Opera Support complet 28Safari Support complet 9WebView Android ? Chrome Android Support complet 50Edge Mobile Support complet 12Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
prefers-reduced-motion media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari Support complet 10.1WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet 10.3Samsung Internet Android ?
resolution media featureChrome Support complet 29Edge ? Firefox Support complet 8
Support complet 8
Support partiel 3.5
Notes
Notes Supports <integer> values only.
IE ? Opera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox 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 ? 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.
Edge Mobile ? 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 ?
update media feature
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
ObsolèteNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 49
Notes Désactivée
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 ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 49
Notes Désactivée
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 ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox 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 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 ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox 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 ? Opera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
ObsolèteNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE ? Opera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

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

  • La règle-@ @supports afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, zakaila
Dernière mise à jour par : SphinxKnight,