@media - Directive CSS
Résumé des caractéristiques de la directive @media
Description de la directive @media
.
@media
est une directive existant depuis longtemps dans le langage CSS. Elle a cependant été considérablement
enrichie avec les requêtes-média (les media-queries).
Il est maintenant possible d'appliquer des styles en fonction de la nature et des possibilités du terminal.
Dans sa définition initiale, @media
permettait seulement d'associer des règles CSS à un périphérique particulier.
En utilisant cette directive, il est donc possible de définir des mises en page spécifiques à chaque type de
périphérique : écran, imprimante, smartphone, etc.
Depuis CSS3 la directive @media
a été enrichie et permet maintenant de cibler un périphérique
de façon beaucoup plus précise, en fonction de ses dimensions ou de sa capacité à restituer les couleurs par exemple.
Il est possible également de distinguer un écran de smartphone d'un écran de bureau.
On parle alors de media-query
.
Ciblage du périphérique de sortie.
Voici à quoi ressemble une feuille de styles utilisant des directives @media
pour appliquer des mises en forme
différentes sur l'écran et à l'impression.
Notez le niveau d'accolades supplémentaire.
/* Règles à appliquer si la page est visionnée sur un écran */
@media screen {
.menu {
background-color:lightblue;
width:200px;
}
...
}
/* Règles à appliquer si la page est imprimée */
@media print {
.menu {
display:none;
}
...
}
Remarque : il est possible aussi de créer une feuille de styles séparées pour chaque média, et de préciser ensuite le type de périphérique dans la balise link du code HTML :
link href="feuille1.css" media="screen" rel="stylesheet" type="text/css"
link href="feuille2.css" media="print" rel="stylesheet" type="text/css"
Spécification de critères supplémentaires : les requêtes-média (media-queries).
En plus du type de périphérique, de nombreuses caractéristiques peuvent être précisées : les dimensions, le nombre de couleurs restituables, la présence d'une souris, etc. On peut par exemple écrire un directive pour cibler les terminaux avec un écran supérieur à 900 pixels de large.
@media screen and (width > 900px) { ... styles ... }
Dans leur première version, les requêtes-média n'acceptaient pas les signes inférieur et supérieur ( < >
), ceci
afin d'éviter des conflits éventuels avec la syntaxe du HTML.
Les conditions s'écrivaient avec les préfixes min-
ou max-
avant le nom de la valeur.
On écrivait par exemple min-width:900px
au lieu de width > 900px
.
Mais cette notation n'était pas claire et était la cause de nombreuses confusions.
Heureusement il est maintenant possible d'utiliser <
et >
dans la syntaxe des media-queries.
D'autre part, pour rester compatible avec les navigateurs anciens, ne reconnaissant que le périphérique
mais pas les requêtes-media, on précisait toujours screen and...
avant le critère.
Ainsi pour spécifier un écran de plus de 900 pixels de large, on écrivait :
@media screen and (min-width:900px) { ... }
Cette syntaxe est toujours valide et reste recommandée pour assurer la compatibilité avec des navigateurs pas trop récents. Mais si la compatibilité n'est pas exigée, on peut maintenant écrire :
@media (width > 900px) { ... }
Syntaxes pour le ciblage du type de périphérique.
- @media all { ... } @media screen { ... } @media print { ... } @media speech { ... }
Ces syntaxes correspondent à la définition initiale de la directive
@media
. Elles permettent simplement de spécifier un type de périphérique.all
: les règles s'appliquent à tous les périphériques. C'est la valeur par défaut.screen
: désigne les écrans. Les règles entre les accolades s'appliquent lorsque les pages sont visionnées sur un ordinateur de bureau, sur un téléphone, une tablette, etc.print
: désigne les imprimantes. Les règles entre les accolades s'appliquent lorsque les pages sont imprimées ou affichées en aperçu avant impression.speech
: désigne les lecteurs avec synthèse vocale. Les règles entre les accolades s'appliquent à la restitution sonore des pages.
- @media tty { ... } ✗ @media tv { ... } ✗ @media projection { ... } ✗ @media handled { ... } ✗ @media braille { ... } ✗ @media embossed { ... } ✗ @media aural { ... } ✗
Ces désignations de périphériques sont maintenant obsolètes. Ne les utilisez plus.
tty
: terminaux ne pouvant imprimer que des caractères de largeur fixe.tv
: téléviseurs.projection
: projecteurs vidéo.handled
: terminaux de petite taille, pouvant être utilisé tenu à la main.braille
: terminaux permettant la restitution en braille.embossed
: terminaux d'impression en braille.aural
: terminaux avec restitution sonore. Préférez le nouveau termespeech
.
Syntaxes générales des requêtes-média.
- @media (width >= 900px) { ... } @media (min-width:900px) { ... } @media screen and (min-width:900px) { ... }
Critères de comparaison.
Toutes ces syntaxes sont équivalentes et ciblent les périphériques dont la définition en largeur est supérieure ou égale à 900 pixels. La première syntaxe, la plus récemment définie, est la plus lisible. Elle est maintenant bien reconnue et peut être utilisée sans gros risque de compatibilité avec les navigateurs actuels. Reportez-vous cependant à tableau de compatibilité figurant au bas de cette page.
On remarque que toutes les valeurs sont suivies d'une unité, qui sont les unités habituelles en CSS (voir les unités CSS de dimension). On évitera cependant d'utiliser les unités relatives, qui n'ont pas beaucoup de sens dans ce contexte, mais qui sont néanmoins acceptées par la syntaxe. Elles sont alors déterminées par rapport aux valeurs initiales.
- @media (900px <= width <= 1200px) { ... } @media (min-width:900px) and (max-width:1200px) { ... }
Fourchette de valeurs.
Les deux syntaxes ci-dessus sont équivalentes, et ciblent les périphériques dont la définition horizontale est comprise entre 900 pixels et 1200 pixels, bornes incluses. La première syntaxe est naturellement beaucoup plus claire puisqu'il est possible de définir une fourchette en une seule écriture.
- @media (width >= 1200px) and (height >= 900px) { ... } @media (width >= 1200px), (height >= 900px) { ... }
Combinaison de plusieurs requêtes-média.
Les requêtes multiples peuvent être associées par un
ET
logique. dans ce cas le motand
doit être précisé, ou par unOU
logique, qui se traduit par une virgule entre les critères. Dans tous les cas, chacun des critères doit se trouver entre parenthèses.Le mot
or
peut être utilisé à la place de la virgule, mais en cas d'une syntaxe mixte faisant intervenir desand
et desor
il faudra obligatoirement préciser l'ordre de traitement en utilisant des parenthèses. L'écriture sera donc finalement peu lisible.@media (height<900px) and (width<900px) or (width>1000px) est incorrect @media (height<900px) and ((width<900px) or (width>1000px)) est correct
- @media not (width >= 1200px) { ... } @media not (width >= 1200px), (height >= 900px) { ... }
Inversion d'une condition.
Le mot
not
est l'opérateur de négation habituel. Notre premier exemple cible les périphérique dont la définition horizontale est inférieure à 1200 pixels.Dans le deuxième exemple, il faut noter que la négation ne s'applique que à la première requête. Il cible donc les périphériques dont la définition horizontale est inférieure à 1200 pixels et également ceux dont la définition verticale est supérieure à 900 pixels (la négation ne s'applique pas sur cette deuxième requête).
- @media only print and (monochrome) { ... }
Le mot-clé
only
.Le mot
only
avait été défini pour assurer la compatibilité avec les anciens navigateurs, qui ne reconnaissent que le type de média (print
) et pas la requête-média qui suit ((monochrome)
).Par exemple, avec la syntaxe suivante, les anciens navigateurs risquent d'appliquer à tord les styles à toutes les imprimantes, même celles qui ne sont pas monochromes.
@media print and (monochrome) { ... }
Le mot
only
, ajouté avant le type de périphérique, est interprété par les anciens navigateurs comme un périphérique inconnu et empêche l'application à tord des styles à toutes les imprimantes.
only
est neutre pour les navigateurs plus modernes qui traient les requêtes-média.Cependant, cette précaution est maintenant inutile compte-tenu du fait que pratiquement tous les navigateurs traient les requêtes-média.
Requêtes-média pour évaluer les possibilités de restitution.
- @media (width < 21cm) { ... } @media {height < 29.7cm) { ... } @media (device-width < 21cm) { ... } ✗ @media {device-height < 29.7cm) { ... } ✗
Les deux requêtes-média
width
etheight
correspondent à la largeur et à la hauteur du viewport s'il s'agit d'un périphérique à défilement continu comme un écran, ou aux dimensions de la boîte de page s'il s'agit d'un périphérique paginé comme une imprimante.width
etheight
peuvent être comparées à n'importe quelle valeur suivie d'une unité de dimension (voir les unités CSS de dimension). Notre exemple utilise des centimètres, ce qui est courant pour caractériser une imprimante ; pour un écran on utilisera plutôt des pixels.Les valeurs négatives sont acceptées par la syntaxe, mais rendent toujours le résultat FAUX.
Les anciens termes
device-width
etdevice-height
ne doivent plus être utilisés. - @media (aspect-ratio > 1) { ... } @media (device-aspect-ratio > 1) { ... } ✗
La ratio est calculé par la formule : largeur divisé par hauteur. Cette information permet de déterminer l'orientation (voir ci-après) et la forme de l'écran. En particulier, un ratio de
1
indique un écran carré.Le terme
device-aspect-ratio
est obsolète et ne doit plus être utilisé, bien que certains navigateurs le reconnaissent encore pour des raisons de compatibilité. - @media (orientation: portrait) { ... }
orientation
ne peut prendre que deux valeurs :portrait
oupaysage
. Les opérateurs<
et>
ne sont donc pas acceptés avecorientation
.L'orientation est déterminée sur
paysage
dès la largeur est supérieure ou égale à la hauteur. Un écran carré, comme celui d'une montre, aura donc une orientation en paysage.Sur un terminal mobile comme un téléphone,
orientation
permet de déterminer si l'appareil est tenu verticalement ou horizontalement. - @media (overflow-block: none) { ... } @media (overflow-inline: none) { ... }
Ces deux requêtes-média ciblent les périphériques en fonction de leur comportement en cas de débordement du contenu. Pour
overflow-block
il s'agit d'un débordement dans le sens des blocs, c'est à dire le sens vertical pour les langues latines), et pourinline-block
ce sera le débordement dans le sens des lignes.Les valeurs possibles pour
overflow-block
sont :none
: le débordement est impossible. Le contenu excédentaire n'est pas affiché, comme par exemple sur un panneau d'affichage électronique.scroll
: le contenu excédentaire est affiché en dehors de la zone visible ; le lecteur peut le consulter en faisant défiler. C'est le cas des écrans.paged
: le contenu excédentaire est rejeté sur une nouvelle page. C'est le cas des imprimantes.
Pour
overflow-inline
, les valeurs possibles sont :none
: le contenu excédentaire n'est pas affiché, et il n'y a pas de moyen pour l'utilisateur de le faire apparaître.scroll
: le lecteur peut faire apparaître le contenu excédentaire en faisant défiler l'écran (présence de barres de défilement par exemple.
- @media (horizontal-viewport-segments: 2) { ... } @media (vertical-viewport-segments: 2) { ... }
- @media (display-mode: fullscreen) { ... }
Cette requête-média permet de cibler les applications en fonction de leur mode d'affichage.
Les valeurs possibles sont :fullscreen
: plein écran.standalone
minimal-ui
browser
- @media (resolution > 300dppx) { ... }
La requête-média
resolution
cible les périphériques en fonction de la résolution de l'écran, c'est à dire le nombre de pixels sur une distance donnée. La plupart du temps la résolution d'un écran est la même horizontalement et verticalement ; si ce n'est pas le cas, c'est la résolution verticale qui est prise en compte.La valeur comparée à
resolution
doit être suivie d'une unité de résolution comme par exempledpi
(D
otP
erI
nch ou Points par pouce). Voir les unités CSS de résolution.La valeur
infinite
peut être utilisée, elle correspond aux périphériques qui ne sont pas pixelisés, comme par exemple les traceurs. - @media (scan: interlace) { ... }
Cette requête-média cible les périphériques en fonction du type de balayage de l'écran. Elle permet de distinguer les écrans cathodiques des écrans à LCD modernes. Cependant les écrans cathodiques sont devenus très rares à l'heure actuelle. Certaines polices de caractères sont mal restituées sur les écrans entrelacés, en particulier les polices avec empattements.
Les valeurs possibles sont :
interlace
: les écrans cathodiques fonctionnent sur ce principe, qui permet de diminuer le scintillement, donc la fatigue visuelle. Cela consiste à tracer les lignes paires lors d'un premier balayage, et les lignes impaires lors du balayage suivant.progressive
: tous les écrans actuels (LCD) fonctionnent sur ce principe.
- @media (grid) { ... }
Cette syntaxe détecte si l'écran reconstitue les caractères à partir d'une matrice de points de dimensions fixes. Plus aucun écran ne fonctionne comme ça.
- @media (update: slow) { ... }
Cette requête-média cible les écrans en fonction de leur capacité à mettre à jour le contenu après le premier affichage. Très utile pour décider si les animations peuvent être activées ou non. De même les réactions aux actions de l'utilisateur (pseudo-classe
:hover
) risquent d'être mal rendues sur un écran trop lent.Les valeurs acceptées sont :
none
: La mise à jour n'est plus possible après la première restitution. C'est le cas des imprimantes par exemple.slow
: le rafraîchissement de l'écran est possible mais lent.: le rafraîchissement de l'écran est suffisamment rapide pour restituer les animations.
- @media (environment-blending: opaque) { ... }
Littéralement cette requête-média permet de tester comment l'affichage se mélange avec l'environnement réel. Par exemple, les écrans d'aide à la conduite dans une voiture sont transparents et superposent leur affichage à la vision de l'environnement.
Les valeurs acceptées sont :
opaque
: l'écran n'est pas transparent.additive
: l'écran est transparent et superpose son affichage à la vision réelle. Le noir est restitué comme transparent.subtractive
: l'écran "soustrait" son affichage de la vision réelle : c'est le blanc qui est sans effet car rendu comme transparent. Ce type d'affichage correspond par exemple à un afficheur intégré à un miroir.
Requêtes-média concernant la gestion des couleurs.
- @media (color) { ... } @media (color > 24) { ... }
Cette requête-média permet d'évaluer la capacité du périphérique à restituer les couleurs. La première syntaxe détermine seulement si le périphérique est en couleurs ou non. La deuxième permet de tester le nombre de bits réservés à chaque couleur. Si le périphérique est monochrome, le nombre de bits est
0
.Si la première syntaxe est intéressante pour distinguer par exemple une imprimante en couleurs d'une imprimante noir et blanc, la deuxième ne donne pas une information très précise sur la gestion des couleurs du périphérique. Il sera sans doute plus intéressant d'utiliser
color-gamut
(voir plus loin). - @media (monochrome) { ... } @media (monochrome >= 4) { ... }
La première syntaxe cible les périphériques monochromes. La deuxième est plus précise : elle cible les périphériques monochromes qui gèrent le gris avec au minimum 4 bits par pixels (8 niveaux de gris).
- @media (color-index > 128) { ... }
Cette requête-média permet de cibler les périphériques qui gèrent des couleurs indexées. La valeur indiquée correspond au nombre de couleurs dans l'index. Si le périphérique ne gère pas les couleurs par un index, la valeur est
0
. - @media (color-gamut: p3) { ... }
Cette syntaxe cible les périphériques capables de restituer l'espace de couleurs
p3
. Reportez-vous si nécessaire à cette présentation des espaces de couleurs sur la page@color-profile
.color-gamut
permet d'envoyer les images qui correspondent le mieux aux capacités du périphérique.Les principales valeurs acceptées sont :
sRGB
: le périphérique est capable de restituer à peu près toutes les couleurs de l'espacesrgb
, ce qui à l'heure actuelle, devrait être toujours le cas, cet espace de couleurs étant le moins exigeant, sauf bien sûr s'il s'agit d'un périphérique monochrome.p3
: espace de couleurs plus large quesRGB
.rec2020
: espace de couleurs encore plas large quep3
.
color-gamut
peut être vrai sur plusieurs valeurs. Par exemple si un écran supporte l'espacerec2020
, il supportera également lep3
et lesRGB
. Pour cette raison, il faudra prendre soin d'écrire les directives@media
dans l'ordre croissant (en commençant parsRGB
et en terminant par l'espace le plus étendu). - @media (dynamic-range: hight) { ... }
- @media (inverted-colors: inverted) { ... }
Une inversion des couleurs peut se produire par exemple lorsque l'utilisateur bascule son terminal en mode nuit.
inverted-colors
ne réagit pas lorsque l'inversion est due à une règle de la feuille de styles.Les valeurs possibles pour
inverted-colors
sont :none
: lorsque les couleurs sont affichées normalement.inverted
: les couleurs s'affichent inversées (les tons clairs sont sombres, et vice-versa).
Si l'inversion des couleurs améliore la lisibilité du texte dans certaines conditions, elle pose un problème avec les images et les vidéos car ces éléments se retrouvent eux aussi affichés en négatif. Pour compenser ce problème, les navigateurs comportent en principe le code ci-dessous dans leur feuille de styles intégrée :
@media (inverted-colors) { img, video { filter: invert(100%); } }
- @media (video-color-gamut: srgb) { ... }
La requête-média
video-color-gamut
a le même rôle quecolor-gamut
mais s'applique aux vidéos. Les valeurs possibles sont également les mêmes :srgb
,p3
, etc. - @media (video-dynamic-range: hight) { ... }
Les valeurs et le rôle de
video-dynamic-range
sont les mêmes que pourdynamic-range
mais s'appliquent plus spécialement aux vidéos.
Requêtes-média pour la détection du pointeur.
- @media (pointer: fine) { ... } @media (any-pointer: fine) { ... }
Ces deux syntaxes permettent de tester la présence d'un pointeur du genre souris, trackball, etc.
pointer
ne considère que le pointeur principal, tandis queany-pointer
prend en compte tous les périphériques de pointage lorsqu'il y en a plusieurs.Les valeurs possibles pour
pointer
etany-pointer
sont :none
: aucun périphérique de pointage n'est disponible.coarse
: un périphérique est disponible mais il est imprécis, et ne permet pas de cliquer sur de petits éléments.fine
: un périphérique de pointage précis est disponible.
Voici un exemple de code qui garanti une taille minimale pour les boutons lorsque le périphérique de pointage est imprécis :
@media (pointer:coarse) { input[type='button'], button { min-with: 100px; min-height:50px; } }
- @media (hover: none) { ... } @media (any-hover: none) { ... }
Ces deux syntaxes permettent de tester la possibilité pour le terminal de détecter le survol d'un élément. Une souris classique par exemple permet de survoler un élément sans le cliquer. Par contre sur un écran de téléphone portable, il n'est pas possible de détecter le doigt avant qu'il ne touche l'écran. Cette requête-média permet de décider s'il est pertinent d'utiliser la pseudo-classe
:hover
.Les valeurs possibles pour
hover
etany-hover
sont :none
: la détection du survol n'est pas possible. C'est le cas si le périphérique est un téléphone portable par exemple.hover
: le survol est détectable. Ce sera le cas de tous les terminaux comportant une souris ou un périphérique comparable.
- @media (nav-controls: none) { ... }
Cette requête-média permet de détecter si le navigateur propose des accessoires de navigation visuels, comme par exemple un bouton pour revenir sur la page précédente. Les raccourcis clavier ne sont pas concernés. Sur un téléphone portable, les gestes ayant un rôle particulier ne sont pas concernés non plus (comme de glisser vers la gauche pour revenir sur la page précédente).
nav-controls
est intéressant dans le cas où une page web nécessite impérativement des boutons pour naviguer entre les pages, et que cette page peut être incrustée dans une application qui n'est pas un navigateur et qui ne propose pas forcément ces accessoires de navigation.Les valeurs possibles pour
hover
etany-hover
sont :none
: l'application qui affiche la page ne propose pas d'accessoires de navigation.back
: l'application qui affiche la page propose au moins un bouton de retour sur la page précédente.
Exemple : faire disparaître le bouton de retour prévu sur la page, lorsque le navigateur propse son propre bouton de retour :
@media (nav-controls: back) { #bouton-retour {display:none;} }
Possibilité d'exécuter du code.
- @media (scripting: enabled) { ... }
La requête-média
scripting
teste si le navigateur qui affiche le document est capable d'exécuter du code (la plupart du temps en javascript).Les valeurs possibles pour
scripting
sont :none
: l'application qui affiche la page n'est pas capable d'exécuter du code ou bien cette fonctionnalité a été désactivée par l'utilisateur.enabled
: l'application qui affiche la page est capable d'exécuter du code et cette fonctionnalité est activée.initial-only
: l'application peut exécuter du code au chargement de la page mais pas par la suite. C'est le cas par exemple d'une imprimante.
Exemples.
Les exemples ci-après vous permettent de tester les requêtes-média en faisant varier les paramètres d'affichage :
par exemple en changeant la largeur de la fenêtre du navigateur.
Le premier exemple utilise plusieurs requêtes-média avec width
pour change la couleur du fond.
Les deuxième et troisième exemples détectent l'orientation de l'écran.
Sur un ordinateur de bureau, on peut facilement simuler un changement d'orientation en réduisant la largeur de la fenêtre du navigateur.
Il y a deux requêtes-média qui permettent de détecter l'orientation de l'écran : aspect-ratio
et orientation
.
aspect-ratio > 1
: Prise en charge par les navigateurs (compatibilité).
La première colonne du tableau ci-dessous concerne l'utilisation de @media
pour cibler un type de périphérique
(écran, imprimante...). Cette utilisation est bien prise en charge par tous les navigateurs actuels.
C'est également le cas pour le traitement des requêtes-média (2ème colonne).
La troisième colonne concerne les syntaxes simplifiées qui font appel aux opérateur <
et >
au lieu des syntaxe avec min-...
et max-...
.
Les colonnes suivantes concernent des requêtes-média particulières comme resolution
, pointer
ou
hover
.
@media
resolution
pointer
hover
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que @media
.
Les spécifications CSS éditées par le W3C sont organisées en modules. @media
fait partie du Media Queries (Media Queries). Les définitions suivantes sont également décrites dans ce même module.