@media

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

/* Au niveau le plus haut du code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Imbriquée dans une autre règle-@ conditionnelle */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

Les types de média décrivent la catégorie générale d'un appareil. Sauf quand on utilise les opérateurs not ou only, le type de média est optionnel et correspond à all par défaut.

all

Applicable à tous les appareils.

print

Destiné pour le contenu paginé et les documents visualisés sur un écran en aperçu d'impression. Voir la page sur les médias paginés pour plus d'informations sur les aspects de formatage spécifiques à ces formats.

screen

Destiné principalement aux écrans.

Les caractéristiques de média (media features en anglais) décrivent des caractéristiques spécifiques de l'agent utilisateur, de l'appareil ou de l'environnement. Les expressions de caractéristique de média testent la présence ou la valeur de ces caractéristiques et sont optionnelles. Chaque expression de caractéristique de média doit être entourée de parenthèses.

any-hover

Indique si le mécanisme d'entrée permet de survoler les éléments. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

any-pointer

Indique si un dispositif de pointage est disponible et, le cas échéant, sa précision. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

aspect-ratio

Le facteur de forme largeur/hauteur de la zone d'affichage (viewport)

color

Le nombre de bits pour chaque composante de couleur sur l'appareil de sortie, ou zéro si l'appareil n'a pas de couleur.

color-gamut

L'intervalle de couleurs approximatif pris en charge par l'agent utilisateur et l'appareil de sortie. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

color-index

Le nombre d'éléments dans le tableau des couleurs de l'appareil de sortie, ou zéro si l'appareil ne dispose pas d'un tel tableau.

device-aspect-ratio Obsolète

Le facteur de forme largeur/hauteur de l'appareil de sortie. Dépréciée avec le module de spécification sur les requêtes média de niveau 4.

device-height Obsolète

La hauteur de la surface de rendu de l'appareil de sortie. Dépréciée avec le module de spécification sur les requêtes média de niveau 4.

device-width Obsolète

La largeur de la surface de rendu de l'appareil de sortie. Dépréciée avec le module de spécification sur les requêtes média de niveau 4.

display-mode

Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifeste de l'application. Définie par la spécification du manifeste des applications web.

dynamic-range

Une combinaison de la luminosité, du taux de contraste et de la profondeur de couleur pris en charge par l'agent utilisateur et l'appareil de sortie. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

forced-colors

Indique si l'agent utilisateur restreint la palette de couleur utilisée. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

grid

Indique si l'appareil utilise un écran matriciel ou avec une grille.

height

La hauteur de la zone d'affichage (viewport).

hover

Indique si le mécanisme de saisie primaire permet de survoler les éléments. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

inverted-colors

Indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

monochrome

Le nombre de bits par pixel pour le tampon d'affichage de l'appareil de sortie s'il est monochrome, zéro sinon.

orientation

L'orientation de la zone d'affichage (viewport).

overflow-block

Indique s'il est possible de faire défiler le contenu qui dépasse de la zone d'affichage sur l'axe de bloc. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

overflow-inline

Indique s'il est possible de faire défiler le contenu qui dépasse de la zone d'affichage sur l'axe en ligne. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

pointer

Indique si le mécanisme de saisie principal est un appareil de pointage et, le cas échéant, sa précision. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

prefers-color-scheme

Indique si la personne préfère utiliser un thème clair ou un thème sombre. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

prefers-contrast

Détecte si la personne a demandé une augmentation ou une réduction du contraste entre les couleurs adjacentes. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

prefers-reduced-motion

Indique la préférence de la personne pour utiliser moins de mouvement sur la page. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

resolution

La densité de pixel de l'appareil de sortie.

scripting

Indique la disponibilité d'un moteur de script (par exemple JavaScript). Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

update

Indique la fréquence à laquelle l'appareil de sortie peut modifier l'apparence du contenu. Ajoutée dans le module de spécification sur les requêtes média de niveau 4.

video-dynamic-range

Une combinaison de la luminosité, du taux de contraste et de la profondeur de couleur pris en charge par l'agent utilisateur et l'appareil de sortie. Ajoutée dans le module de spécification sur les requêtes média de niveau 5.

width

La largeur de la zone d'affichage (viewport) en incluant la largeur de la barre de défilement.

Les opérateurs logiques not, and, et only peuvent être utilisés pour composer une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en une seule règle en les séparant avec des virgules.

and

Cet opérateur permet de combiner plusieurs tests de caractéristiques afin que le résultat du test vaille true si chacun des tests individuels vaut true. Il permet également de joindre des tests de caractéristiques média et des tests de type de média.

not

Cet opérateur donne la négation d'une requête média, renvoyant true si la requête devait renvoyer false. Si cet opérateur est présent dans une liste de requêtes séparées par des virgules, la négation portera uniquement sur la requête sur laquelle l'opérateur est appliqué. Si l'opérateur not est utilisé, il est nécessaire d'indiquer un type de média.

Note : Dans la spécification de niveau 3, le mot-clé not permet uniquement de prendre la négation d'une requête média entière (et pas d'une caractéristique seule).

only

Applique la mise en forme uniquement si toute la requête correspond. Ce mot-clé est utile pour empêcher les anciens navigateurs d'appliquer les styles en question. Sans utiliser only, les anciens navigateurs interpréteraient la requête screen and (max-width: 500px) comme screen, en ignorant le reste et en appliquant donc le style à tous les écrans. Si l'opérateur only est utilisé, il est nécessaire d'indiquer un type de média.

, (virgule)

Les virgules sont utilisées pour combiner plusieurs requêtes média en une seule règle. Chaque requête d'une liste de requêtes séparées par des virgules est traitée séparément des autres. Ainsi, si une des requêtes de la liste vaut true, l'ensemble de l'instruction renverra true. Autrement dit, la virgule agit comme un opérateur logique or.

Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (valeur de type <length>).

Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.

Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

@media = 
  @media <media-query-list> { <rule-list> }  

@media print {
  body {
    font-size: 10pt;
  }
}
@media screen {
  body {
    font-size: 13px;
  }
}
@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    line-height: 1.4;
  }
}

Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Pour plus d'exemples, voir Utiliser les requêtes média.

• Utiliser les requêtes média
• L'interface CSSOM CSSMediaRule qui est associée avec cette règle @.