@media

La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) notamment grâce à l'interface CSSMediaRule.

Syntaxe

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.

Syntaxe formelle

@media <media-query-list> {
  <group-rule-body>
}


<media-query-list> = <media-query>#


<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?


<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>


<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>


<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )


<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>


<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Les caractéristiques média

{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}

Exemples

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

Accessibilité

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

Sécurité

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

Spécifications

Spécification Commentaires Retours
Media Queries Level 5
La définition de '@media' dans cette spécification.
Réintègre light-level, inverted-colors et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.
Ajout des caractéristiques média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast et prefers-color-scheme.
Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
CSS Conditional Rules Module Level 3
La définition de '@media' dans cette spécification.
Définition de la syntaxe de base pour la règle @media. Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
Media Queries Level 4
La définition de '@media' dans cette spécification.

Ajout des caractéristiques média scripting, pointer, hover, update, overflow-block et overflow-inline.
Dépréciation de l'ensemble des types de média à l'exception de screen, print, speech et all.
La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé or.

Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
Media Queries
La définition de '@media' dans cette spécification.
CSS Level 2 (Revision 1)
La définition de '@media' dans cette spécification.
Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi