Media queries

  • Raccourci de la révision : CSS/Media_queries
  • Titre de la révision : Media queries
  • ID de la révision : 390633
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.

Syntaxe

Les requêtes de média sont formées d'un type de média, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant des fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Le résultat de la requête est vrai si le type de média indiqué correspond au type de périphérique sur lequel le document est affiché et que toutes les expressions dans la requête sont vraies.

<!-- Media Query CSS dans un élément link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- Media Query CSS dans une feuille de style -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Lorsqu'une media query est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles normales de la cascade. Les feuilles de styles ayant des media queries dans leur balisage <link> seront téléchargées, même si leur media query est fausse (elle ne seront toutefois pas appliquées).

A moins que vous n'utilisiez les opérateur not ou only, le type de média est optionnel et le type all est supposé.

Opérateurs logiques

Il est possible de composer des requêtes complexes à l'aide d'opérateurs logiques comme not (non), and (et) et only (uniquement). L'opérateur and est utilisé pour combiner plusieurs particularités médias en une seule media query, nécessitant que chacune des particularités soit vraie pour que la requête entière soit vraie. L'opérateur not est utilisé pour former la négation d'une requête entière. L'opérateur only est utilisé pour appliquer un style seulement si la requête est vraie, ce qui est utile pour empêcher des navigateurs plus anciens d'appliquer un ensemble de styles. Les opérateurs not et only nécessitent un type de média afin d'être évalués, le type all n'est pas supposé.

En outre, plusieurs requêtes peuvent être combinées dans une liste séparée par des virgules. Si au moins une des requêtes de la liste est vraie, la feuille de style associée sera appliquée. C'est l'équivalent d'une opération logique « ou ».

and

Le mot-clé and est utilisé pour combiner plusieurs particularités médias ensemble, ainsi que combiner les particularités médias avec les types de médias. Une  media query basique, une particularité avec le type de média all supposé, peut ressembler à ceci :

@media (min-dwidth: 700px) {…}

Si toutefois, vous souhaitez que ceci s'applique seulement si l'écran est en orientation paysage, vous pouvez utiliser l'opérateur and pour lier les particularités ensemble.

@media (min-width: 700px) and (orientation: landscape) {…} 

Désormais, la media query ci-dessus ne sera vraie que si la largeur d'affichage est de 700 pixels ou plus et si l'écran est en orientation paysage. Si, toutefois, vous souhaiteriez que ceci ne s'applique que si l'écran est de type média tv, vous pouvez lier ces particularités au type media.

@media tv and (min-width: 700px) and (orientation: landscape) {…}

Désormais, la requête ne s'applique plus que lorsque le type média est tv, la largeur supérieure ou égale à 700 pixels et l'orientation en paysage.

Listes separées par des virgules

Les listes séparées par des virgules se comportent comme l'opérateur logique or quand utilisé dans une media query. Quand vous utilisez une liste de media queries séparées par des virgules, si une des media queries est vrai, les styles ou la feuille de style seront appliqués. Chaque media query dant une liste séparées par des virgules est traitée individuellement, et tout opérateur appliqué à une media query n'aura aucun effet sur les autres. Ceci veut dire qu'une liste de media queries séparées par des vigules peut cibler différentes types de média, de particularités et d'états.

Par exemple, si vous souhaitez appliquer un ensemble de styles si le périphérique a au minimum une largeur de 700 pixels ou si un périphérique mobile est en mode paysage, vous pouvez écrire la règle suivante :

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Avec cette déclaration, si nous sommes sur un périphérique screen avec une largeur de viewport de 800 pixels, la déclaration media retournera vrai car la première partie, interprétée comme @media all and (min-width: 700px) sera appliqué à notre périphérique, bien que notre périphérique screen ne passera pas la vérification sur le type média handheld de la deuxième media query. De la même façon, si nous sommes sur un périphérique handheld tenu en mode paysage avec une largeur de viewport de 500 pixels, bien que la première media query sera fausse à cause de la largeur du viewport, la deuxième media query sera vrai, et ainsi la déclaration media sera validée.

not

Le mot-clé not inverse le résultat de la requête ; par exemple, « all and (not color) » est vrai pour les périphériques monochromes quel que soit le type de média.

not inversera seulement la media query à laquelle il est appliqué. Il ne s'appliquera pas à l'ensemble des media queries d'une liste séparée par des virgules.

Le mot-clé not ne peut pas être utilisé pour inverser une particularité media. Il est seulement utilisable sur une media query entière. Par exemple, not n'est pris en compte qu'à la fin dans cette media query :

@media not all and (monochrome) { ... }

Ceci veut dire que la media query est interprétée comme :

@media not (all and (monochrome)) { ... }

... et non pas comme :

@media (not all) and (monochrome) { ... }

Un autre exemple. Observez la media query suivante :

@media not screen and (color), print and (color)

Elle est interprétée comme :

@media (not (screen and (color))), print and (color)

only

Le mot-clé only empêche les vieux navigateurs ne supportant pas les media queries, d'afficher les styles définis :

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Pseudo-BNF (pour ceux qui aiment ce genre de choses)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.

Note : les parenthèses sont obligatoires autour des expressions ; leur oubli provoquera une erreur.

Fonctionnalités de médias

La plupart des fonctionnalités de média peuvent être précédées de « min- » ou « max- » pour exprimer des contraintes « plus grand ou égal à » ou « plus petit ou égal à ».  Ceci permet d'éviter les symboles « < » et « > » qui provoqueraient des conflits avec HTML et XML. Si une fonctionnalité de média est utilisée sans préciser de valeur, l'expression sera considérée comme vraie si la valeur de cette fonctionnalité est différente de zéro.

Note : Si une fonctionnalité de média ne s'applique pas au périphérique sur lequel le navigateur s'affiche, les expressions contenant ce média seront toujours fausses. Par exemple, une requête sur le rapport hauteur/largeur d'un dispositif audio sera toujours fausse.

color

Valeur : {{ Xref_csscolorvalue() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre de bits par composante de couleur sur le périphérique de sortie. S'il ne s'agit pas d'un périphérique couleur, cette valeur vaut zéro.

Note : Si les composantes de couleur ont un nombre de bits différent par couleur, le plus petit nombre est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge et 6 bits pour le vert, il sera considéré comme utilisant 5 bits par composante de couleur. Si le périphérique utilise des couleurs indexées, le nombre minimum de bits par composante de couleur dans la table des couleurs sera utilisé.

Exemples

Pour appliquer une feuille de style sur tous les périphériques couleur :

@media all and (color) { ... }

Pour appliquer une feuille de style sur les périphériques avec au moins 4 bits par composante de couleur :

@media all and (min-color: 4) { ... }

color-index

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre d'entrées dans la table de couleurs indexées pour le périphérique de sortie.

Exemples

Pour indiquer qu'une feuille de style doit s'appliquer à tous les périphériques dont les couleurs sont indexées, vous pouvez utiliser :

@media all and (color-index) { ... }

Pour appliquer une feuille de style aux périphériques dont les couleurs sont indexées avec au moins 256 couleurs :

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

Valeur : {{ xref_cssratio() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit le format d'image de la zone d'affichage du périphérique de sortie. Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (« / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.

Exemple

L'instruction suivante sélectionne une feuille de style spéciale à utiliser lorsque la zone d'affichage est au moins aussi large qu'elle est haute.

@media screen and (min-aspect-ratio: 1/1) { ... }

Ceci sélectionnera le style lorsque le format d'image est 1:1 ou supérieur.

device-aspect-ratio

Valeur : {{ xref_cssratio() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit le format d'image du périphérique de sortie. Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (caractère « / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.

Exemple

La requête suivante sélectionne une feuille de style spéciale pour les écrans larges.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

La feuille de style sera utilisée lorsque le format d'affichage est 16:9 ou 16:10.

device-height

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit la hauteur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.

Exemple

Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran de moins de 800 pixels de large, vous pouvez utiliser ceci :

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

device-width

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit la largeur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.

grid

Valeur : {{ xref_cssinteger() }}
Média : tous
Accepte les préfixes min/max : non

Détermine si le périphérique de sortie est un périphérique en grille ou bitmap. Si le périphérique est basé sur une grille (comme un terminal ou un affichage de téléphone avec une seule police), la valeur est 1. Sinon elle vaut zéro.

Exemple

Pour appliquer un style aux périphériques portables avec un écran de 15 caractères ou plus étroit :

@media handheld and (grid) and (max-width: 15em) { ... }
Note : l'unité « em » a une signification particulière pour ce type de périphérique ; comme la largeur exacte d'un « em » ne peut pas être déterminée, 1em est supposé être la largeur d'une cellule de la grille horizontalement et la hauteur d'une cellule verticalement.

height

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

La fonctionnalité de média height décrit la hauteur de la surface de rendu du périphérique de sortie (comme la hauteur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).

Note : Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média width et height.

monochrome

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre de bits par pixels sur un périphérique monochrome (échelle de gris). Si le périphérique n'est pas monochrome, la valeur est zéro.

Exemples

Pour appliquer une feuille de style à tous les périphériques monochromes :

@media all and (monochrome) { ... }

Pour appliquer une feuille de style aux périphériques monochromes avec au moins 8 bits par pixel :

@media all and (min-monochrome: 8) { ... }

orientation

Valeurs : landscape | portrait
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Indique si l'appareil est en mode paysage (l'écran est plus large que haut) ou en mode portrait (l'écran est plus haut que large).

Exemple

Pour appliquer une feuille de style uniquement en mode portrait :

@media all and (orientation: portrait) { ... }

resolution

Valeur : {{ Xref_cssresolution() }}
Média : {{ Xref_cssbitmap() }}
Accepte les préfixes min/max : oui

Indique la résolution (densité de pixels) du périphérique de sortie. La résolution peut être spécifiée soit en points par pouce (dpi) ou en points par centimètre (dpcm).

Exemple

Pour appliquer une feuille de style à des périphériques avec une résolution d'au moins 300 points par pouce :

@media print and (min-resolution: 300dpi) { ... }

scan

Valeur : progressiveinterlace
Média : {{ Xref_csstv() }}
Accepte les préfixes min/max : non

Décrit le processus de balayage des périphériques de sortie de type télévision.

Exemple

Pour appliquer une feuille de style uniquement aux télévisions à balayage progressif :

@media tv and (scan: progressive) { ... }

width

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

La fonctionnalité de média width décrit la largeur de la surface de rendu du périphérique de sortie (comme la largeur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).

Note : Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média width et height.

Exemples

Pour spécifier une feuille de style pour les périphériques portables ou dont l'écran est plus large que 20em, vous pouvez utiliser cette feuille de style :

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Cette requête spécifie une feuille de style à appliquer aux médias imprimés plus larges que 8,5 pouces :

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

Cette requête spécifie une feuille de style utilisable lorsque la zone d'affichage est large de 500 à 800 pixels :

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Fonctionnalités de médias spécifiques à Mozilla

{{ gecko_minversion_header("1.9.2") }}

Mozilla offre un certain nombre de fonctionnalités de médias spécifiques à Gecko. Certaines d'entre-elles pourront être proposées comme fonctionnalités officielles.

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'appareil permet les images dans les menus, la valeur est 1 ; sinon, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'utilisateur à configurer son appareil pour utiliser l'apparence "Graphite" sur Mac OS X, la valeur est 1. Si l'utilisateur utilise l'apparence standard bleu, ou s'il n'est pas sur Mac OS X, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'utilisateur utilise Maemo avec son thème initial, la valeur est 1 ; si il utilise le nouveau thème Fremantle, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

Valeur : {{ xref_cssnumber() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Donne le nombre de pixels de l'appareil, par pixel CSS.

N'utilisez pas cette fonctionnalité.

Utilisez plutôt la fonctionnalité resolution avec l'unité dppx.

-moz-device-pixel-ratio peut être utilisé pour des questions de compatibilité avec des versions de Firefox antérieures à la version 16 ; et -webkit-device-pixel-ratio pour les navigateurs basés sur Webkit ne supportant pas dppx.

Exemple :

@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
       (min--moz-device-pixel-ratio: 2),    /* Anciens navigateurs Firefox (avant Firefox 16) */
       (min-resolution: 2dppx),             /* La méthode standard */
       (min-resolution: 192dpi)             /* Si non support de dppx */

Voir cette article du CSSWG sur les bonnes pratiques de compatibilité avec resolution et dppx.

Note : Cette fonctionnalité de média est aussi implémentée par Webkit sous -webkit-device-pixel-ratio. Les préfixes min et max tels qu'implémentés par Gecko sont nommés min--moz-device-pixel-ratio et max--moz-device-pixel-ratio ; les mêmes préfixes implémentés par Webkit sont nommés -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio.

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche arrière à la fin des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche avant à la fin des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche arrière au début des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche avant au début des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'interface utilisateur de l'appareil affiche des barres de défilement proportionnelles (c'est à dire, basées sur le pourcentage du document actuellement visible), la valeur est 1. Sinon elle est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'appareil supporte les évènements tactiles (pour un écran tactile), la valeur est 1. Sinon elle est 0.

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(touch-enabled)") }}.

Vous pouvez utilisr ceci pour rendre les boutons légèrement plus gros. Si l'utilisateur utilise un appareil à écran tactile, des boutons plus gros seront plus facile à toucher.

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'utilisateur utilise Windows sans thème (dans le mode classique, au lieu d'utilise uxtheme), la valeur est 1 ; sinon elle est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(windows-classic)") }}.

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'utilisateur utilise Windows avec le composeur DWN, la valeur est 1 ; sinon la valeur est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(windows-compositor)") }}.

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

Valeur : {{ xref_cssinteger() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Si l'utilisateur utilise actuellement un des thèmes par défaut de Windows (Luna, Royale, Zune, ou Aero (inclus Vista Basic, Vista Advanced, et Aero Glass), la valeur est 1. Sinon elle est 0.

Correspond à la pseudo-classe CSS {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

Valeur : aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Indique quel thème de Windows est actuellement utilisé. Seulement disponible sur Windows.

Ceci est fournit pour les thèmes d'applications et autres codes chrome, afin qu'il puisse s'adapter correctement au thème courant de Windows.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base {{ CompatChrome("21") }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatIE("9.0") }} {{ CompatOpera("9") }} {{ CompatSafari("4") }}
grid {{ CompatUnknown() }} {{ CompatNo() }} (le type de media grid n'est pas pris en charge) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
resolution {{ CompatUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} supporte les valeurs {{ xref_cssinteger() }} ;
{{ CompatGeckoDesktop("8.0") }} supporte les valeurs {{ xref_cssnumber() }}, comme défini dans la spec.
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scan {{ CompatUnknown() }} {{ CompatNo() }} (Le type de média tv n'est pas pris en charge) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

Voir également

Source de la révision

<p>Une <strong>media query</strong> (ou <strong>requête média</strong><strong>)</strong> consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>Les requêtes de média sont formées d'un <a class="internal" href="/fr/docs/CSS/@media" title="fr/CSS/@media">type de média</a>, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant des fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Le résultat de la requête est vrai si le type de média indiqué correspond au type de périphérique sur lequel le document est affiché <strong>et</strong> que toutes les expressions dans la requête sont vraies.</p>
<pre class="brush: html">
&lt;!-- Media Query CSS dans un élément link --&gt;
&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;

&lt;!-- Media Query CSS dans une feuille de style --&gt;
&lt;style&gt;
@media (max-width: 600px) {
&nbsp; .facet_sidebar {
&nbsp;&nbsp;&nbsp; display: none;
&nbsp; }
}
&lt;/style&gt;</pre>
<p>Lorsqu'une media query est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles normales de la cascade. Les feuilles de styles ayant des media queries dans leur balisage &lt;link&gt; <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">seront téléchargées</a>, même si leur media query est fausse (elle ne seront toutefois pas appliquées).</p>
<p>A moins que vous n'utilisiez les opérateur <code>not</code> ou <code>only</code>, le type de média est optionnel et le type <code>all</code> est supposé.</p>
<h3 id="Op.C3.A9rateurs_logiques">Opérateurs logiques</h3>
<p>Il est possible de composer des requêtes complexes à l'aide d'opérateurs logiques comme <code>not</code> <em>(non)</em>, <code>and</code> <em>(et)</em> et <code>only</code> <em>(uniquement)</em>. L'opérateur <code>and</code> est utilisé pour combiner plusieurs particularités médias en une seule media query, nécessitant que chacune des particularités soit vraie pour que la requête entière soit vraie. L'opérateur <code>not</code> est utilisé pour former la négation d'une requête entière. L'opérateur <code>only</code> est utilisé pour appliquer un style seulement si la requête est vraie, ce qui est utile pour empêcher des navigateurs plus anciens d'appliquer un ensemble de styles. Les opérateurs <code>not</code> et <code>only</code> nécessitent un type de média afin d'être évalués, le type <code>all</code> n'est pas supposé.</p>
<p>En outre, plusieurs requêtes peuvent être combinées dans une liste séparée par des virgules. Si au moins une des requêtes de la liste est vraie, la feuille de style associée sera appliquée.&nbsp;C'est l'équivalent d'une opération logique «&nbsp;<em>ou</em>&nbsp;».</p>
<h4 id="and"><code>and</code></h4>
<p>Le mot-clé <code>and</code> est utilisé pour combiner plusieurs particularités médias ensemble, ainsi que combiner les particularités médias avec les types de médias. Une&nbsp; media query basique, une particularité avec le type de média <code>all</code> supposé, peut ressembler à ceci :</p>
<pre class="brush: css">
@media (min-dwidth: 700px) {…}</pre>
<p>Si toutefois, vous souhaitez que ceci s'applique seulement si l'écran est en orientation paysage, vous pouvez utiliser l'opérateur <code>and</code> pour lier les particularités ensemble.</p>
<pre class="brush: css">
@media (min-width: 700px) and (orientation: landscape) {…} </pre>
<p>Désormais, la media query ci-dessus ne sera vraie que si la largeur d'affichage est de 700 pixels ou plus et si l'écran est en orientation paysage. Si, toutefois, vous souhaiteriez que ceci ne s'applique que si l'écran est de type média <code>tv</code>, vous pouvez lier ces particularités au type media.</p>
<pre class="brush: css">
@media tv and (min-width: 700px) and (orientation: landscape) {…}</pre>
<p>Désormais, la requête ne s'applique plus que lorsque le type média est <code>tv</code>, la largeur supérieure ou égale à 700 pixels et l'orientation en paysage.</p>
<h4 id="Listes_separ.C3.A9es_par_des_virgules">Listes separées par des virgules</h4>
<p>Les listes séparées par des virgules se comportent comme l'opérateur logique <code>or</code> quand utilisé dans une media query. Quand vous utilisez une liste de media queries séparées par des virgules, si une des media queries est vrai, les styles ou la feuille de style seront appliqués. Chaque media query dant une liste séparées par des virgules est traitée individuellement, et tout opérateur appliqué à une media query n'aura aucun effet sur les autres. Ceci veut dire qu'une liste de media queries séparées par des vigules peut cibler différentes types de média, de particularités et d'états.</p>
<p>Par exemple, si vous souhaitez appliquer un ensemble de styles si le périphérique a au minimum une largeur de 700 pixels ou si un périphérique mobile est en mode paysage, vous pouvez écrire la règle suivante :</p>
<pre class="brush: css">
@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
<p>Avec cette déclaration, si nous sommes sur un périphérique <code>screen</code> avec une largeur de viewport de 800 pixels, la déclaration media retournera vrai car la première partie, interprétée comme <code>@media all and (min-width: 700px)</code> sera appliqué à notre périphérique, bien que notre périphérique <code>screen</code> ne passera pas la vérification sur le type média <code>handheld</code> de la deuxième media query. De la même façon, si nous sommes sur un périphérique <code>handheld</code> tenu en mode paysage avec une largeur de viewport de 500 pixels, bien que la première media query sera fausse à cause de la largeur du viewport, la deuxième media query sera vrai, et ainsi la déclaration media sera validée.</p>
<h4 id="not"><code>not</code></h4>
<p>Le mot-clé <code>not</code> inverse le résultat de la requête ; par exemple, « <span style="font-family: monospace;">all</span><code> and (not color)</code> » est vrai pour les périphériques monochromes quel que soit le type de média.</p>
<p><code>not</code> inversera seulement la media query à laquelle il est appliqué. Il ne s'appliquera pas à l'ensemble des media queries d'une liste séparée par des virgules.</p>
<p>Le mot-clé <code>not</code> ne peut pas être utilisé pour inverser une particularité media. Il est seulement utilisable sur une media query entière. Par exemple, <code>not</code> n'est pris en compte qu'à la fin dans cette media query :</p>
<pre class="brush: css">
@media not all and (monochrome) { ... }</pre>
<p>Ceci veut dire que la media query est interprétée comme :</p>
<pre class="brush: css">
@media not (all and (monochrome)) { ... }
</pre>
<p>... et non pas comme :</p>
<pre class="brush: css">
@media (not all) and (monochrome) { ... }</pre>
<p>Un autre exemple. Observez la media query suivante :</p>
<pre class="brush: css">
@media not screen and (color), print and (color)
</pre>
<p>Elle est interprétée comme :</p>
<pre class="brush: css">
@media (not (screen and (color))), print and (color)</pre>
<h4 id="only"><code>only</code></h4>
<p>Le mot-clé <code>only</code> empêche les vieux navigateurs ne supportant pas les media queries, d'afficher les styles définis :</p>
<pre class="brush: html">
&lt;link rel="stylesheet"&nbsp;media="only screen and (color)" href="example.css" /&gt;
</pre>
<h3 id="Pseudo-BNF_(pour_ceux_qui_aiment_ce_genre_de_choses)">Pseudo-BNF (pour ceux qui aiment ce genre de choses)</h3>
<pre>
media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
 &nbsp;| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid</pre>
<p>Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.</p>
<div class="note">
  <strong>Note :</strong> les parenthèses sont obligatoires autour des expressions&nbsp;; leur oubli provoquera une erreur.</div>
<h2 id="Fonctionnalit.C3.A9s_de_m.C3.A9dias">Fonctionnalités de médias</h2>
<p>La plupart des fonctionnalités de média peuvent être précédées de « min- » ou « max- » pour exprimer des contraintes «&nbsp;<em>plus grand ou égal à</em>&nbsp;» ou «&nbsp;<em>plus petit ou égal à</em>&nbsp;».&nbsp; Ceci permet d'éviter les symboles «&nbsp;&lt;&nbsp;» et «&nbsp;&gt;&nbsp;» qui provoqueraient des conflits avec HTML et XML.&nbsp;Si une fonctionnalité de média est utilisée sans préciser de valeur, l'expression sera considérée comme vraie si la valeur de cette fonctionnalité est différente de zéro.</p>
<div class="note">
  <strong>Note :</strong> Si une fonctionnalité de média ne s'applique pas au périphérique sur lequel le navigateur s'affiche, les expressions contenant ce média seront toujours fausses.&nbsp;Par exemple, une requête sur le rapport hauteur/largeur d'un dispositif audio sera toujours fausse.</div>
<h3 id="color"><code>color</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csscolorvalue() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre de bits par composante de couleur sur le périphérique de sortie.&nbsp;S'il ne s'agit pas d'un périphérique couleur, cette valeur vaut zéro.</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Si les composantes de couleur ont un nombre de bits différent par couleur, le plus petit nombre est utilisé.&nbsp;Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge et 6 bits pour le vert, il sera considéré comme utilisant 5 bits par composante de couleur. Si le périphérique utilise des couleurs indexées, le nombre minimum de bits par composante de couleur dans la table des couleurs sera utilisé.</div>
<h4 id="Exemples">Exemples</h4>
<p>Pour appliquer une feuille de style sur tous les périphériques couleur&nbsp;:</p>
<pre class="brush: css">
@media all and (color) { ... }
</pre>
<p>Pour appliquer une feuille de style sur les périphériques avec au moins 4 bits par composante de couleur&nbsp;:</p>
<pre class="brush: css">
@media all and (min-color: 4) { ... }
</pre>
<h3 id="color-index"><code>color-index</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre d'entrées dans la table de couleurs indexées pour le périphérique de sortie.</p>
<h4 id="Exemples">Exemples</h4>
<p>Pour indiquer qu'une feuille de style doit s'appliquer à tous les périphériques dont les couleurs sont indexées, vous pouvez utiliser :</p>
<pre class="brush: css">
@media all and (color-index) { ... }
</pre>
<p>Pour appliquer une feuille de style aux périphériques dont les couleurs sont indexées avec au moins 256 couleurs&nbsp;:</p>
<pre class="brush: css">
&lt;link rel="stylesheet" media="all and (min-color-index:&nbsp;256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>
<h3 id="aspect-ratio"><code>aspect-ratio</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ xref_cssratio() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit le format d'image de la zone d'affichage du périphérique de sortie.&nbsp;Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (« / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.</p>
<h4 id="Exemple">Exemple</h4>
<p>L'instruction suivante sélectionne une feuille de style spéciale à utiliser lorsque la zone d'affichage est au moins aussi large qu'elle est haute.</p>
<pre class="brush: css">
@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
<p>Ceci sélectionnera le style lorsque le format d'image est 1:1 ou supérieur.</p>
<h3 id="device-aspect-ratio"><code>device-aspect-ratio</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ xref_cssratio() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit le format d'image du périphérique de sortie.&nbsp;Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (caractère «&nbsp;/&nbsp;»). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.</p>
<h4 id="Exemple">Exemple</h4>
<p>La requête suivante sélectionne une feuille de style spéciale pour les écrans larges.</p>
<pre class="brush: css">
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
<p>La feuille de style sera utilisée lorsque le format d'affichage est 16:9 ou 16:10.</p>
<h3 id="device-height"><code>device-height</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit la hauteur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran de moins de 800 pixels de large, vous pouvez utiliser ceci :</p>
<pre class="brush: css">
&lt;link rel="stylesheet"&nbsp;media="screen and (max-device-width: 799px)" /&gt;
</pre>
<h3 id="device-width"><code>device-width</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit la largeur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.</p>
<h3 id="grid"><code>grid</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> tous<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Détermine si le périphérique de sortie est un périphérique en grille ou bitmap. Si le périphérique est basé sur une grille (comme un terminal ou un affichage de téléphone avec une seule police), la valeur est 1.&nbsp;Sinon elle vaut zéro.</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer un style aux périphériques portables avec un écran de 15 caractères ou plus étroit :</p>
<pre class="brush: css">
@media handheld and (grid) and (max-width: 15em) { ... }
</pre>
<div class="note">
  <strong>Note&nbsp;:</strong> l'unité «&nbsp;em&nbsp;» a une signification particulière pour ce type de périphérique&nbsp;; comme la largeur exacte d'un «&nbsp;em&nbsp;» ne peut pas être déterminée, 1em est supposé être la largeur d'une cellule de la grille horizontalement et la hauteur d'une cellule verticalement.</div>
<h3 id="height"><code>height</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>La fonctionnalité de média <code>height</code> décrit la hauteur de la surface de rendu du périphérique de sortie (comme la hauteur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média <code>width</code> et <code>height</code>.</div>
<h3 id="monochrome"><code>monochrome</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre de bits par pixels sur un périphérique monochrome (échelle de gris).&nbsp;Si le périphérique n'est pas monochrome, la valeur est zéro.</p>
<h4 id="Exemples">Exemples</h4>
<p>Pour appliquer une feuille de style à tous les périphériques monochromes :</p>
<pre class="brush: css">
@media all and (monochrome) { ... }
</pre>
<p>Pour appliquer une feuille de style aux périphériques monochromes avec au moins 8 bits par pixel :</p>
<pre class="brush: css">
@media all and (min-monochrome: 8) { ... }
</pre>
<h3 id="orientation"><code>orientation</code></h3>
<p><strong>Valeurs :</strong> <code>landscape</code> | <code>portrait</code><br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Indique si l'appareil est en mode paysage (l'écran est plus large que haut) ou en mode portrait (l'écran est plus haut que large).</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style uniquement en mode portrait :</p>
<pre class="brush: css">
@media all and (orientation:&nbsp;portrait) { ... }</pre>
<h3 id="resolution"><code>resolution</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_cssresolution() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssbitmap() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique la résolution (densité de pixels) du périphérique de sortie.&nbsp;La résolution peut être spécifiée soit en points par pouce (<em>dpi</em>) ou en points par centimètre (<em>dpcm</em>).</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style à des périphériques avec une résolution d'au moins 300 points par pouce :</p>
<pre class="brush: css">
@media print and (min-resolution: 300dpi) { ... }
</pre>
<h3 id="scan"><code>scan</code></h3>
<p><strong>Valeur&nbsp;:</strong> <code>progressive</code> |&nbsp;<code>interlace</code><br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_csstv() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Décrit le processus de balayage des périphériques de sortie de type télévision.</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style uniquement aux télévisions à balayage progressif :</p>
<pre class="brush: css">
@media tv and (scan: progressive) { ... }
</pre>
<h3 id="width"><code>width</code></h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>La fonctionnalité de média <code>width</code> décrit la largeur de la surface de rendu du périphérique de sortie (comme la largeur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média <code>width</code> et <code>height</code>.</div>
<h4 id="Exemples">Exemples</h4>
<p>Pour spécifier une feuille de style pour les périphériques portables ou dont l'écran est plus large que 20em, vous pouvez utiliser cette feuille de style :</p>
<pre class="brush: css">
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>
<p>Cette requête spécifie une feuille de style à appliquer aux médias imprimés plus larges que 8,5 pouces :</p>
<pre class="brush: html">
&lt;link rel="stylesheet" media="print and (min-width:&nbsp;8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>
<p>Cette requête spécifie une feuille de style utilisable lorsque la zone d'affichage est large de 500 à 800 pixels :</p>
<pre class="brush: css">
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>
<h2 id="Fonctionnalit.C3.A9s_de_m.C3.A9dias_sp.C3.A9cifiques_.C3.A0_Mozilla">Fonctionnalités de médias spécifiques à Mozilla</h2>
<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>Mozilla offre un certain nombre de fonctionnalités de médias spécifiques à Gecko. Certaines d'entre-elles pourront être proposées comme fonctionnalités officielles.</p>
<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'appareil permet les images dans les menus, la valeur est 1 ; sinon, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'utilisateur à configurer son appareil pour utiliser l'apparence "Graphite" sur Mac OS X, la valeur est 1. Si l'utilisateur utilise l'apparence standard bleu, ou s'il n'est pas sur Mac OS X, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'utilisateur utilise Maemo avec son thème initial, la valeur est 1 ; si il utilise le nouveau thème Fremantle, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssnumber() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Donne le nombre de pixels de l'appareil, par pixel CSS.</p>
<div class="geckoVersionNote">
  <p><strong>N'utilisez pas cette fonctionnalité.</strong></p>
  <p>Utilisez plutôt la fonctionnalité <code>resolution</code> avec l'unité <code>dppx</code>.</p>
  <p><code>-moz-device-pixel-ratio</code> peut être utilisé pour des questions de compatibilité avec des versions de Firefox antérieures à la version 16 ; et <code>-webkit-device-pixel-ratio </code>pour les navigateurs basés sur Webkit ne supportant pas dppx.</p>
  <p>Exemple :</p>
  <p><code>@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (min--moz-device-pixel-ratio: 2),&nbsp;&nbsp;&nbsp; /* Anciens navigateurs Firefox (avant Firefox 16) */<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (min-resolution: 2dppx),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* La méthode standard */<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (min-resolution: 192dpi)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* Si non support de dppx */</code></p>
  <p>Voir cette <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">article du CSSWG</a> sur les bonnes pratiques de compatibilité avec <code>resolution</code> et <code>dppx</code>.</p>
</div>
<div class="note">
  <p><strong>Note :</strong> Cette fonctionnalité de média est aussi implémentée par Webkit sous <code>-webkit-device-pixel-ratio</code>. Les préfixes min et max tels qu'implémentés par Gecko sont nommés <code>min--moz-device-pixel-ratio </code>et <code>max--moz-device-pixel-ratio</code> ; les mêmes préfixes implémentés par Webkit sont nommés <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</p>
</div>
<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche arrière à la fin des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche avant à la fin des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche arrière au début des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'interface utilisateur de l'appareil affiche un bouton avec avec une flêche avant au début des barres de défilement, la valeur est 1 ; sinon, la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'interface utilisateur de l'appareil affiche des barres de défilement proportionnelles (c'est à dire, basées sur le pourcentage du document actuellement visible), la valeur est 1. Sinon elle est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'appareil supporte les évènements tactiles (pour un écran tactile), la valeur est 1. Sinon elle est 0.</p>
<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(touch-enabled)") }}.</p>
<p>Vous pouvez utilisr ceci pour rendre les boutons légèrement plus gros. Si l'utilisateur utilise un appareil à écran tactile, des boutons plus gros seront plus facile à toucher.</p>
<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'utilisateur utilise Windows sans thème (dans le mode classique, au lieu d'utilise uxtheme), la valeur est 1 ; sinon elle est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(windows-classic)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'utilisateur utilise Windows avec le composeur DWN, la valeur est 1 ; sinon la valeur est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(windows-compositor)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
<p><strong>Valeur :</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Si l'utilisateur utilise actuellement un des thèmes par défaut de Windows (Luna, Royale, Zune, ou Aero (inclus Vista Basic, Vista Advanced, et Aero Glass), la valeur est 1. Sinon elle est 0.</p>
<p>Correspond à la <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> CSS {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.</p>
<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
<p><strong>Valeur :</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Indique quel thème de Windows est actuellement utilisé. Seulement disponible sur Windows.</p>
<p>Ceci est fournit pour les thèmes d'applications et autres codes chrome, afin qu'il puisse s'adapter correctement au thème courant de Windows.</p>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatChrome("21") }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>{{ CompatIE("9.0") }}</td>
        <td>{{ CompatOpera("9") }}</td>
        <td>{{ CompatSafari("4") }}</td>
      </tr>
      <tr>
        <td><code>grid</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }} (le type de media <code>grid</code> n'est pas pris en charge)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>resolution</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }} supporte les valeurs {{ xref_cssinteger() }} ;<br />
          {{ CompatGeckoDesktop("8.0") }} supporte les valeurs {{ xref_cssnumber() }}, comme défini dans la spec.</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>scan</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}&nbsp;(Le type de média<code> tv</code> n'est pas pris en charge)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
  <li><a class="internal" href="/en/CSS/@media" title="En/CSS/@media">Media types</a></li>
</ul>
Revenir à cette révision