La règle @@media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requê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é.
Note :
Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) grâce à l'interface CSSMediaRule.
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.
css
/* 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;}}}
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Les opérateurs logiquesnot, 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.
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.
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).
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.
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.
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.
Tip: you can click/tap on a cell for more information.
Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.