Requêtes média CSS (media queries)

Les requêtes média CSS, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de styles CSS en fonction de différents paramètres ou caractéristiques de l'appareil.

Par exemple, on pourra appliquer différentes mises en forme selon la taille de la zone d'affichage pour que la disposition soit correcte selon les tailles d'écran des appareils.

Par exemple, on pourra utiliser une police de caractères plus petite pour les appareils avec des petits écrans, augmenter l'espace entre les paragraphes si la page est vue en mode portrait, ou encore augmenter la taille des boutons sur les écrans tactiles.

Un ordinateur portable et un smartphone, chacun avec une taille de zone d'affichage différente, où le contenu est agencé différemment grâce aux media queries.

C'est la règle @ @media qui est utilisée en CSS pour appliquer de façon conditionnelle un fragment d'une feuille de styles selon le résultat d'une requête média. Si on souhaite appliquer de façon conditionnelle une feuille de styles entière, on utilisera @import.

Lorsqu'on conçoit des composants HTML réutilisables, on peut également utiliser les requêtes de conteneur qui permettent d'appliquer des mises en forme selon la taille de l'élément englobant plutôt que par rapport à la zone d'affichage ou aux caractéristiques de l'appareil.

Les requêtes média en HTML

En HTML, on peut appliquer des requêtes média à différents éléments :

  • Dans l'attribut media de l'élément <link>, qui définit le média auquel une ressource liée (généralement du CSS) s'applique.
  • Dans l'attribut media de l'élément <source>, qui définit le média sur lequel la source s'applique (uniquement valide à l'intérieur d'éléments <picture>).
  • Dans l'attribut media de l'élément <style>, qui définit le média auquel le style s'applique.

Les requêtes média en JavaScript

En JavaScript, on peut utiliser la méthode Window.matchMedia() pour tester une requête média par rapport à la fenêtre courante. On peut également utiliser MediaQueryList.addListener() pour réagir aux changements d'états d'une requête média. Grâce à cette méthode, votre site ou application peut réagir aux modifications de configuration, d'orientation ou d'état.

Pour en savoir plus sur les tests des requêtes média dans des programmes, voir l'article Tester les requêtes média.

Référence

Règles @

Guides

Utiliser les requêtes média

Cet article présente les requêtes média, leur syntaxe, les opérateurs et caractéristiques média utilisées pour les construire.

Tester les requêtes média

Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié·e lorsque les résultats d'une requête média évoluent (par exemple lorsque la personne tourne son appareil ou redimensionne la fenêtre de son navigateur).

Utiliser des requêtes média pour l'accessibilité

Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.

Spécifications

Specification
Media Queries Level 3
Media Queries Level 4
Media Queries Level 5

Voir aussi