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.

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

Formal syntax

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

Les types de média

all
Peut être appliqué quel que soit l'appareil.
print
Destiné aux œuvres paginées et aux documents qui sont vus sur des écrans pour l'aperçu avant impression. Se référer aux pages sur les médias paginés et au tutoriel médias pour les problématiques liées aux médias paginés.
screen
Destiné aux écrans d'ordinateur en couleurs.
speech
Destiné aux synthétiseurs vocaux. CSS2 possédait un type de média similaire : aural.
Note : CSS2.1 et Media Queries 3 définissaient d'autres types de média (tty, tv, projection, handheld, braille, embossed, aural) qui ont été dépréciés avec la spécification Media Queries 4, ces types ne doivent plus être utilisés.

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 qu'un document interagisse mieux 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.

Spécifications

Spécification État Commentaires
Compatibility Standard
La définition de 'CSS Media Queries' dans cette spécification.
Standard évolutif Standardisation des caractéristiques  -webkit-device-pixel-ratio et -webkit-transform-3d.
CSS Conditional Rules Module Level 3
La définition de '@media' dans cette spécification.
Candidat au statut de recommandation Définition de la syntaxe basique de @media.
Media Queries Level 5
La définition de '@media' dans cette spécification.
Brouillon de l'éditeur Restaure light-level, inverted-colors et les requêtes média personnalisées qui avaient été supprimées de la spécification de niveau 4.
Ajout des caractéristiques prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, et prefers-color-scheme.
Media Queries Level 4
La définition de '@media' dans cette spécification.
Candidat au statut de recommandation

Ajout des caractéristiques  scripting, pointer, hover, light-level, update, overflow-block, et overflow-inline.
Dépréciation de de tous les types de mdéia à l'exception de screen, print, speech et all.

La syntaxe est désormais plus flexible grâce à l'ajout de mot-clé (par exemple : or).

Media Queries
La définition de '@media' dans cette spécification.
Recommendation Aucune modification.
CSS Level 2 (Revision 1)
La définition de '@media' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
@mediaChrome 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 ?
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 41Edge Mobile Aucun support NonFirefox 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 41Edge Mobile Support complet 12Firefox Android Support complet 64Opera 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 Support complet OuiSamsung Internet Android Support complet Oui
calc() expressionsChrome Support complet 66Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Support complet 66Chrome Android Support complet 66Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color media featureChrome Support complet OuiEdge ? Firefox Support complet 2IE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera 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
Non-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 2IE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Support complet 2IE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome Support complet OuiEdge ? Firefox Support complet 2IE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 4Opera 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 Aucun support Non
grid media featureChrome Support complet OuiEdge ? Firefox Support complet 2IE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox Support complet 2IE Support complet 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung 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 ?
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 ?
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 ?
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 ?
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 66Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 53Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
monochrome media featureChrome Support complet OuiEdge ? Firefox Support complet 2IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Support complet OuiEdge ? Firefox Support complet 2IE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
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 NonEdge Mobile 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 NonEdge Mobile 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 ? 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-color-scheme media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 67IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 67Opera Android Aucun support NonSafari iOS Aucun support NonSamsung 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 74Edge Mobile Aucun support NonFirefox Android Support complet 64Opera 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 ?
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
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 2IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera 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 Aucun support NonIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera 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 1.3WebView 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 1.3WebView 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 1.3WebView 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

Étiquettes et contributeurs liés au document

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