Media queries

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

all

Correspond pour tous les appareils.

print

Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les médias paginés.

screen

Correspond aux appareils dotés d'un écran.

speech

Correspond aux outils de synthèse vocale.

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.

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

and

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

not

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

only

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

, (virgule)

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

@media print { ... }

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

@media screen, print { ... }

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

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

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

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

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

@media (color) { ... }

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

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

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

@media (min-width: 30em) and (orientation: landscape) { ... }

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

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

La requête précédente est donc équivalente à :

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

Mais elle n'est pas équivalente à :

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

De même :

@media not screen and (color), print and (color) { ... }

sera évaluée comme :

@media (not (screen and (color))), print and (color) { ... }

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes*.*

@media only screen and (color) { ... }

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

@media (max-width: 30em) { ... }

Avec les requêtes média de niveau 4, on peut écrire :

@media (width <= 30em) { ... }

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

@media (min-width: 30em) and (max-width: 50em) { ... }

Avec les requêtes média de niveau 4, on peut écrire :

@media (30em <= width <= 50em ) { ... }

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

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

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

@media (not (color)) or (hover) { ... }

• Tester des requêtes média en script
• Utiliser les animations CSS entre les requêtes média (en anglais)
• Les caractéristiques média spécifiques à Mozilla
• Les caractéristiques média spécifiques à WebKit