Media queries

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 caractéristiques 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).

À moins que vous n'utilisiez les opérateurs 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-width: 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 dans 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 virgules 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

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

Caractéristiques médias

La plupart des caractéristiques 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 caractéristique média est utilisée sans préciser de valeur, l'expression sera considérée comme vraie si la valeur de cette caractéristique est différente de zéro.

color

Valeur : <color>
Média : visuel
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.

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 : <integer>
Média : visuel
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="https://foo.bar.com/stylesheet.css" />

aspect-ratio

Valeur : <ratio>
Média : visuel, tactile
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 : <ratio>
Média : visuel, tactile
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 : <length>
Média : visuel, tactile
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 long, vous pouvez utiliser ceci :

<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="https://toto.truc.com/stylesheet.css" />

device-width

Valeur : <length>
Média : visuel, tactile
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.

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)" href="https://toto.truc.com/stylesheet.css"/>

grid

Valeur : <integer>
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) { ... }

height

Valeur : <length>
Média : visuel, tactile
Accepte les préfixes min/max : oui

La caractéristique 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).

monochrome

Valeur : <integer>
Média : visuel
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 : visuel
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 : <resolution>
Média : bitmap
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 : progressive | interlace
Média : TV
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 : <length>
Média : visuel, tactile
Accepte les préfixes min/max : oui

La caractéristique 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).

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="https://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) { ... }

Caractéristiques média spécifiques à Mozilla

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

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(mac-graphite-theme).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(maemo-classic).

Valeur : <number>
Média : visuel
Accepte les préfixes min/max : non

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

Valeur : windows-xp | windows-vista | windows-win7 | windows-win8
Média : visuel
Accepte les préfixes min/max : non

Indique quelle version du système d’exploitation est actuellement utilisée. Implémenté pour l’instant seulement sur Windows. Les valeurs possibles sont :

• windows-xp
• windows-vista
• windows-win7
• windows-win8

Ceci est fournit pour les thèmes d'applications et autres codes chrome, afin qu'il puisse s'adapter à la version actuelle du système d’exploitation.

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(scrollbar-end-backward).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(scrollbar-end-forward).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(scrollbar-start-backward).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(scrollbar-start-forward).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(scrollbar-thumb-proportional).

Valeur : <integer>
Média : visuel
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.

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

Vous pouvez utiliser 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.

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(windows-classic).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(windows-compositor).

Valeur : <integer>
Média : visuel
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 :-moz-system-metric(windows-default-theme).

Value: <integer>
Media: visuel
Accepts min/max prefixes: no

Si l'utilisateur utilise le thème Windows Glass , la valeur est 1; Sinon elle est 0. Existe seulement pour Windows 7 et plus récent.

Valeur : aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Média : visuel
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

[1] Le type de média grid n'est pas prise en charge.

[2] Prend en charge les valeurs <integer>.

[3] Prend en charge les valeurs <number> comme indiqué par la spécification.

[4] Le type de média tv n'est pas pris en charge.

[5] Cf. WebKit bug 22494.

[6] Pour des raisons de compatibilité web, cette fonctionnalité préfixée a été implémentée avec Gecko 46.0 (Firefox 46 / Thunderbird 46 / SeaMonkey 2.43) et était disponible via la préférence, désactivée par défaut, layout.css.prefixes.webkit (cf. bug 1239799). Depuis Gecko 49.0 (Firefox 49 / Thunderbird 49 / SeaMonkey 2.46), layout.css.prefixes.webkit est activée par défaut.

[7] Implémentés comme synonymes de min--moz-device-pixel-ratio et max--moz-device-pixel-ratio pour des raisons de compatibilité web (cf. bug 1176968) via les préférences layout.css.prefixes.webkit et layout.css.prefixes.device-pixel-ratio-webkit dans Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42). Depuis Gecko 49.0 (Firefox 49 / Thunderbird 49 / SeaMonkey 2.46) layout.css.prefixes.webkit vaut true par défaut.

Voir aussi

• La spécification des requêtes de média CSS3
• Types de médias
• Utilisation des requêtes de média depuis du code