Larègle @CSS@media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieursrequêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.

Exemple interactif

abbr {  color: #860304;  font-weight: bold;  transition: color 0.5s ease;}@media (hover: hover) {  abbr:hover {    color: #001ca8;    transition-duration: 0.5s;  }}@media not all and (hover: hover) {  abbr::after {    content: " (" attr(title) ")";  }}

<p>  La  <abbr title="Administration nationale de l'aéronautique et de l'espace">    NASA  </abbr>  est une agence gouvernementale américaine responsable des sciences et des  technologies liées à l'air et à l'espace.</p>

Syntaxe

/* 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;    }  }}

La règle@media peut être placée au niveau le plus haut du code ou imbriquée dans une autre règle @ conditionnelle.

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

Description

Une<media-query-list> de requête média inclut des<media-type>, des<media-feature> et desopérateurs logiques.

Types de média

Les types de média décrivent la catégorie générale d'un appareil. Sauf quand on utilise les opérateursnot ouonly, 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. Voirla 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.

Caractéristiques média

Une<media feature> décrit une caractéristique spécifique de l'agent utilisateur, du périphérique de sortie ou de l'environnement.Les expressions de caractéristique média testent leur présence, leur valeur ou une plage de valeurs, et sont entièrement optionnelles. Chaque expression de caractéristique média doit être entourée de parenthèses.

any-hover

Un des mécanismes d'entrée disponibles permet-il à l'utilisateur·ice de survoler des éléments ?

any-pointer

Un des mécanismes d'entrée disponibles est-il un dispositif de pointage, et si oui, avec quelle précision ?

aspect-ratio

Rapport largeur/hauteur (rapport d'aspect) de la zone d'affichage (viewport en anglais).

color

Nombre de bits par composant couleur du périphérique de sortie, ou zéro si le périphérique n'est pas en couleur.

color-gamut

Plage approximative de couleurs prises en charge par l'agent utilisateur et le périphérique de sortie.

color-index

Nombre d'entrées dans la table de correspondance des couleurs du périphérique de sortie, ou zéro si le périphérique n'utilise pas une telle table.

device-aspect-ratio

Rapport largeur/hauteur du périphérique de sortie. Déprécié dans Media Queries niveau 4.

device-height

Hauteur de la surface de rendu du périphérique de sortie. Déprécié dans Media Queries niveau 4.

device-posture

Détecte la posture actuelle du périphérique, c'est-à-dire si la zone d'affichage est à plat ou pliée. Défini dans l'API Device Posture.

device-width

Largeur de la surface de rendu du périphérique de sortie. Déprécié dans Media Queries niveau 4.

display-mode

Mode dans lequel une application s'affiche : par exemple,plein écran oumode image dans l'image.Ajouté dans Media Queries niveau 5.

dynamic-range

Combinaison de la luminosité, du contraste et de la profondeur de couleur prise en charge par l'agent utilisateur et le périphérique de sortie. Ajouté dans Media Queries niveau 5.

forced-colors

Détecte si l'agent utilisateur restreint la palette de couleurs.Ajouté dans Media Queries niveau 5.

grid

Le périphérique utilise-t-il un écran en grille ou en bitmap ?

height

Hauteur de la zone d'affichage (viewport en anglais).

horizontal-viewport-segments

Détecte si le périphérique possède un nombre spécifié de segments de zone d'affichage disposés horizontalement.

hover

Le mécanisme d'entrée principal permet-il à l'utilisateur·ice de survoler des éléments ?

inverted-colors

L'agent utilisateur ou le système d'exploitation inverse-t-il les couleurs ?Ajouté dans Media Queries niveau 5.

monochrome

Nombre de bits par pixel dans la mémoire tampon monochrome du périphérique de sortie, ou zéro si le périphérique n'est pas monochrome.

orientation

Orientation de la zone d'affichage (viewport en anglais).

overflow-block

Comment le périphérique de sortie gère-t-il le contenu qui déborde de la zone d'affichage selon l'axe du bloc ?

overflow-inline

Le contenu qui déborde de la zone d'affichage selon l'axe en ligne peut-il être défilé ?

pointer

Le mécanisme d'entrée principal est-il un dispositif de pointage, et si oui, avec quelle précision ?

prefers-color-scheme

Détecte si l'utilisateur·ice préfère un thème clair ou sombre.Ajouté dans Media Queries niveau 5.

prefers-contrast

Détecte si l'utilisateur·ice a demandé au système d'augmenter ou de diminuer le contraste entre les couleurs adjacentes.Ajouté dans Media Queries niveau 5.

prefers-reduced-data

Détecte si l'utilisateur·ice a demandé un contenu web qui consomme moins de données.

prefers-reduced-motion

L'utilisateur·ice préfère moins d'animations sur la page.Ajouté dans Media Queries niveau 5.

prefers-reduced-transparency

Détecte si l'utilisateur·ice a activé un réglage sur son appareil pour réduire les effets de transparence ou de translucidité utilisés sur l'appareil.

resolution

Densité de pixels du périphérique de sortie.

scan

Le rendu de l'affichage est-il progressif ou entrelacé ?

scripting

Détecte si le scripting (JavaScript) est disponible.Ajouté dans Media Queries niveau 5.

shape

Détecte la forme du périphérique pour distinguer les écrans rectangulaires et ronds.

update

Fréquence à laquelle le périphérique de sortie peut modifier l'apparence du contenu.

vertical-viewport-segments

Détecte si le périphérique possède un nombre spécifié de segments de zone d'affichage disposés verticalement. Ajouté dans Media Queries niveau 5.

video-dynamic-range

Combinaison de la luminosité, du contraste et de la profondeur de couleur prise en charge par le plan vidéo de l'agent utilisateur et du périphérique de sortie. Ajouté dans Media Queries niveau 5.

width

Largeur de la zone d'affichage (viewport en anglais), y compris la largeur de la barre de défilement.

-moz-device-pixel-ratio

Nombre de pixels du périphérique par pixel CSS. Utilisez plutôt la caractéristiqueresolution avec l'unitédppx.

-webkit-animation

Le navigateur prend en charge l'animation CSSanimation préfixée-webkit. Utilisez plutôt la requête de fonctionnalité@supports (animation).

-webkit-device-pixel-ratio

Nombre de pixels du périphérique par pixel CSS. Utilisez plutôt la caractéristiqueresolution avec l'unitédppx.

-webkit-transform-2d

Le navigateur prend en charge la transformation CSS 2Dtransform préfixée-webkit. Utilisez plutôt la requête de fonctionnalité@supports (transform).

-webkit-transform-3d

Le navigateur prend en charge la transformation CSS 3Dtransform préfixée-webkit. Utilisez plutôt la requête de fonctionnalité@supports (transform).

-webkit-transition

Le navigateur prend en charge la transition CSStransition préfixée-webkit. Utilisez plutôt la requête de fonctionnalité@supports (transition).

Opérateurs logiques

Les opérateurs logiquesnot,and, etonly 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 vailletrue si chacun des tests individuels vauttrue. 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, renvoyanttrue si la requête devait renvoyerfalse. 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érateurnot est utilisé, ilest 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 utiliseronly, les anciens navigateurs interpréteraient la requêtescreen and (max-width: 500px) commescreen, en ignorant le reste et en appliquant donc le style à tous les écrans. Si l'opérateuronly est utilisé, ilest 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 vauttrue, l'ensemble de l'instruction renverratrue. Autrement dit, la virgule agit comme un opérateur logiqueor.

or

Équivalent à l'opérateur,. Ajouté dans Media Queries Level 4.

Indications client de l'agent utilisateur

Certaines requêtes média disposent d'indications client de l'agent utilisateur correspondantes.Ce sont des en-têtes HTTP qui demandent un contenu pré-optimisé pour une exigence média particulière.Elles incluentSec-CH-Prefers-Color-Scheme etSec-CH-Prefers-Reduced-Motion.

Syntaxe formelle

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

Accessibilité

Pour une meilleure accessibilité, notamment pour les personnes qui ajustent la taille du texte d'un site, il convient d'utiliser l'unitéem lorsqu'une valeur de type<length> est nécessaire pourles requêtes média.

Les unitésem etpx sont toutes les deux valides, maisem s'adapte mieux si l'utilisateur·ice modifie la taille du texte du navigateur.

Il est également pertinent de prendre en compte les requêtes média ou lesindications du client pour améliorer l'expérience utilisateur·ice. Par exemple, la requête médiaprefers-reduced-motion ou l'en-tête HTTP équivalentSec-CH-Prefers-Reduced-Motion peuvent servir à limiter les animations ou les déplacements selon les préférences de l'utilisateur·ice.

Sécurité

Les requêtes média fournissent des informations sur les capacités de l'appareil utilisé pour la navigation. Ces informations peuvent être détournées afin de construire une empreinte permettant d'identifier l'appareil ou de le catégoriser de façon non désirée.

Pour cette raison, un navigateur peut choisir de modifier les valeurs renvoyées afin de limiter ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renvoient leurs valeurs par défaut afin d'éviter leur utilisation pour le pistage.

Exemples

Tester les types de média print et screen

@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, voirUtiliser les requêtes média.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le modulede requête média CSS
• Utiliser les requêtes média
• L'interface APICSSMediaRule
• La règle@custom-media
• Extensions CSS préfixées pour Firefox (-moz-)
• Extensions CSS préfixées pour WebKit (-webkit-)