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.

Cibler des types de média

Les types de média décrivent la catégorie générale d'un appareil. Bien que la plupart des sites web soient conçus afin d'être consultés via un écran, il est possible d'établir des styles qui seront utilisés pour l'impression ou pour les lecteurs d'écran. Par exemple, ce fragment de code CSS permettra de cibler les appareils d'impression :

@media print { ... }

Il est possible de cibler plusieurs types de média à la fois. Dans l'exemple qui suit, la règle @media utilise deux media queries afin de cibler les appareils avec écran et aussi les appareils d'impression :

@media screen, print { ... }

Vous pouvez consulter cette liste pour connaître l'ensemble des types existants. Ces types étant génériques, il en existe peu. Si on souhaite cibler un appareil plus finement, on pourra utiliser les caractéristiques média.

Cibler un appareil en fonction des caractéristiques du média

Les caractéristiques média décrivent les caractéristiques d'un agent utilisateur donné, d'un appareil de lecture/affichage ou de l'environnement. On peut par exemple appliquer des styles spécifiques pour les moniteurs larges, pour les ordinateurs qui disposent d'une souris ou qui sont utilisés dans un environnement à faible luminosité. Le fragment de code qui suit permet d'appliquer des styles si l'outil principal de saisie (par exemple une souris) permet de survoler les éléments :

@media (hover: hover) { ... }

La plupart des caractéristiques média sont des caractéristiques d'intervalle et peuvent être utilisées avec des préfixes min- ou max- afin d'exprimer des conditions de seuil (minimal ou maximal). La fragment de code CSS qui suit n'appliquera des styles que si la zone d'affichage du navigateur (le « viewport ») est plus étroit que 12 450 pixels :

@media (max-width: 12450px) { ... }

Si on crée une requête média sans indiquer de valeur, les styles qui lui sont rattachés seront appliqués tant que la caractéristique est non-nul. Par exemple, ce fragment de code permettra d'appliquer des styles pour tout appareil dont l'écran permet de représenter des couleurs :

@media (color) { ... }

Si une caractéristique ne s'applique pas à l'appareil sur lequel le navigateur est utilisé, les expressions avec cette caractéristique seront toujours évaluée à faux. Par exemple, avec la requête suivante, aucune des règles CSS associées ne sera utilisée car un appareil de lecture audio n'a aucun ratio largeur/hauteur :

@media speech and (aspect-ratio: 11/5) { ... }

Pour plus d'exemples sur les différentes caractéristiques média, consulter la page de référence de chaque caractéristique.

Créer des requêtes complexes

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" />

Voir aussi

Étiquettes et contributeurs liés au document

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