Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

@media - Directive CSS

@media

Résumé des caractéristiques de la directive @media

Description rapide
Affectation de règles CSS en fonction du périphérique (smartphone, écran de bureau, etc...).
Statut
Standard
Module W3C
Media Queries
Références (W3C)
 🡇  
 🡅  
Statut du document:: CR (document proposé pour la recommandation)

Statut du document:: WD (document de travail)

Statut du document:: CR (document proposé pour la recommandation)

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.

    1. all : les règles s'appliquent à tous les périphériques. C'est la valeur par défaut.
    2. 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.
    3. 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.
    4. 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.

    1. tty : terminaux ne pouvant imprimer que des caractères de largeur fixe.
    2. tv : téléviseurs.
    3. projection : projecteurs vidéo.
    4. handled : terminaux de petite taille, pouvant être utilisé tenu à la main.
    5. braille : terminaux permettant la restitution en braille.
    6. embossed : terminaux d'impression en braille.
    7. aural : terminaux avec restitution sonore. Préférez le nouveau terme speech.

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 mot and doit être précisé, ou par un OU 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 des and et des or 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 et height 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 et height 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 et device-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 ou paysage. Les opérateurs < et > ne sont donc pas acceptés avec orientation.

    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 pour inline-block ce sera le débordement dans le sens des lignes.

    Les valeurs possibles pour overflow-block sont :

    1. none : le débordement est impossible. Le contenu excédentaire n'est pas affiché, comme par exemple sur un panneau d'affichage électronique.
    2. 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.
    3. paged : le contenu excédentaire est rejeté sur une nouvelle page. C'est le cas des imprimantes.

    Pour overflow-inline, les valeurs possibles sont :

    1. 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.
    2. 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 :

    1. fullscreen : plein écran.
    2. standalone
    3. minimal-ui
    4. 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 exemple dpi (Dot Per Inch 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 :

    1. 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.
    2. 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 :

    1. none : La mise à jour n'est plus possible après la première restitution. C'est le cas des imprimantes par exemple.
    2. slow : le rafraîchissement de l'écran est possible mais lent.
    3. : 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 :

    1. opaque : l'écran n'est pas transparent.
    2. additive : l'écran est transparent et superpose son affichage à la vision réelle. Le noir est restitué comme transparent.
    3. 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 :

    1. sRGB : le périphérique est capable de restituer à peu près toutes les couleurs de l'espace srgb, 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.
    2. p3 : espace de couleurs plus large que sRGB.
    3. rec2020 : espace de couleurs encore plas large que p3.

    color-gamut peut être vrai sur plusieurs valeurs. Par exemple si un écran supporte l'espace rec2020, il supportera également le p3 et le sRGB. Pour cette raison, il faudra prendre soin d'écrire les directives @media dans l'ordre croissant (en commençant par sRGB 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 :

    1. none : lorsque les couleurs sont affichées normalement.
    2. 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 que color-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 pour dynamic-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 que any-pointer prend en compte tous les périphériques de pointage lorsqu'il y en a plusieurs.

    Les valeurs possibles pour pointer et any-pointer sont :

    1. none : aucun périphérique de pointage n'est disponible.
    2. coarse : un périphérique est disponible mais il est imprécis, et ne permet pas de cliquer sur de petits éléments.
    3. 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 et any-hover sont :

    1. 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.
    2. 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 et any-hover sont :

    1. none : l'application qui affiche la page ne propose pas d'accessoires de navigation.
    2. 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 :

    1. 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.
    2. enabled : l'application qui affiche la page est capable d'exécuter du code et cette fonctionnalité est activée.
    3. 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.

La couleur change avec la largeur de l'écran
aspect-ratio > 1 :
Orientation :

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.

1
@media
2
Media queries
3
<   >
4
resolution
5
pointer
hover
Estimation de la prise en charge en pourcentage du parc actuel.
97%
100%
89%
89%
97%

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.

Directives.

Définit une requête-média personnalisée.