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 :

CSS - Directive @media

@media est une directive existant depuis longtemps dans le langage CSS. Elle a cependant été considérablement enrichie avec les media-queries. Il est maintenant possible d'appliquer des mises en formes particulières en fonction de la nature et des possibilités du terminal.

Description de la directive @media.

@media associe 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 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 par exemple. Il est possible de distinguer un écran de smartphone d'un écran de bureau. On parle alors de media-query.

Table des matières.

Sélection des périphériques.

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 pour chaque média, et de préciser ensuite le média dans la balise link :

link href="feuille1.css" media="screen" rel="stylesheet" type="text/css" link href="feuille2.css" media="print" rel="stylesheet" type="text/css"

Types de périphériques.

  • @media all { }

    Valeur par défaut. Les règles s'appliquent à tous les périphériques.

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

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

  • @media 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 handheld { } @media braille { } @media embossed { } @media aural { }

    Ces désignations de périphériques sont maintenant obsolètes. Ne les utilisez plus.

    tty : terminal ne pouvant imprimer que en espacement fixe.
    tv : téléviseur.
    projection : projecteur vidéo.
    handheld : terminal de petite taille, pouvant être utilisé tenu à la main.
    braille : terminal permettant la lecture en braille.
    embossed : impression en braille.
    aural : restitution sonore. Préférez le nouveau terme speech.

Critères supplémentaires (media-queries).

En plus du 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 ainsi écrire un directive pour cibler les terminaux avec un écran supérieur à 900 pixels de large.

Dans sa première version, les média-queries 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.

D'autre part, pour rester compatible avec les navigateurs anciens, ne reconnaissant que le périphérique mais pas les critères, 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 est recommandée pour assurer la compatibilité avec des navigateurs pas trop récents. Cependant une syntaxe beaucoup plus lisible est maintenant standardisée. On ne précise plus obligatoirement le nom du périphérique, et les caractères < <= > >= sont autorisés.

@media (width >= 900px) { }

Il est même possible de définir une fourchette en une seule écriture. Mais cette syntaxe semble encore mal gérée. Il est sans doute un peu tôt pour l'utiliser (janvier 2020).

@media ( 900px <= width <= 1200px) { }

En résumé, voici quatre syntaxes équivalentes, classées de la plus compatible à la plus moderne :

@media screen and (min-width:900px) and (max-width:1200px) { } @media (min-width:900px) and (max-width:1200px) { } @media (width >= 900px) and (width <= 1200px) { } @media ( 900px <= width <= 1200px) { }

Syntaxes des media-queries.

  • @media ( width >= 900px) { } @media ( device-width >= 900px) { }

    Largeur de l'écran du périphérique, comparée à une valeur exprimée dans une unités de dimensions en CSS.

    width désigne la largeur de l'écran réellement utilisable pour le contenu, après avoir déduit par exemple les barres de défilement, tandis que device-width désigne la largeur de l'écran physique. device-width est maintenant obsolète.

  • @media ( height >= 600px) { } @media ( device-height >= 600px) { }

    Hauteur de l'écran du périphérique, comparée à une valeur exprimées dans une unités de dimensions en CSS.

    height désigne la hauteur de l'écran réellement utilisable pour le contenu, après déduction par exemple les barres de défilement, tandis que device-height désigne la hauteur de l'écran physique. device-height est maintenant obsolète.

  • @media (aspect-ratio > 2/3) { } @media (device-aspect-ratio > 2/3) { }

    Le rapport entre la largeur et la hauteur de l'écran ou du viewport, comparé à un ratio défini. Cela caractérise la forme de l'écran : proche du carré, ou au contraire très allongé.

    aspect-ratio fait référence au ratio de la partie de l'écran réellement utilisable pour le contenu, après déduction des barres de défilement et autres accessoires, tandis que device-aspect-ratio désigne le ratio de l'écran physique. device-aspect-ratio est maintenant obsolète.

  • @media (orientation:portrait) { }

    Critère sur l'orientation de l'écran ou du viewport. Les valeurs peuvent être :

    1. portrait : la hauteur de l'écran est plus grande que la largeur.
    2. landscape : la largeur de l'écran est supérieure à sa hauteur.
  • @media (color > 8) { }

    Critère sur le nombre de bits par couleur. Sur un terminal noir et blanc, le nombre de bits par couleur est zéro.

  • @media (color-index > 256) { }

    Critère sur le nombre de couleurs gérées par le périphérique.

  • @media (color-gamut:srgb) { }

    Critère sur l'espace de couleur géré par le périphérique (gamut). Les valeurs possibles sont :

    1. srgb.
    2. p3.
    3. rec2020.
  • @media (monochrome > 2) { }

    Critère portant sur le nombre de bits pour chaque pixel dans le cas d'un terminal monochrome. Si le terminal est en couleurs, monochrome a la valeur 0.

  • @media (resolution > 300dppx) { }

    Critère portant sur la résolution comparée à une valeur exprimée avec une unités de résolution en CSS.

  • @media (update:slow) { }

    Critère portant sur la capacité du terminal à redessiner l'apparence d'un élément si ce dernier est modifié. Les valeurs possibles sont :

    1. none : ce sera bien sûr le cas des imprimantes.
    2. slow : le terminal peut redessiner un élément mais pas aussi rapidement que lors de la restitution initiale.
    3. fast : le terminal peut redessiner un élément rapidement.
  • @media (pointer:none) { } @media (any-pointer:none) { }

    Critères testant si un périphérique de pointage (souris, stylet...) est disponible, et permettant d'évaluer sa précision.

    Les valeurs possibles sont :

    pointer ne teste que le périphérique principal.

    1. none : aucun périphérique de pointage n'est disponible.
    2. coarse : indique la présence d'un périphérique de pointage mais imprécis, comme un écran tactile, un capteur de mouvement, etc.
    3. fine : indique la présence d'une souris, d'un stylet, etc.

    any-pointer teste tous les périphériques présents et ne renvoie none que si aucun périphérique n'est disponible.

  • @media (hover:none) { } @media (any-hover:none) { }

    Critères testant si un périphérique de pointage (souris, stylet...) est capable de survoler un élément sur l'écran (sans l'activer). Une souris peut survoler un élément sans l'activer (si on ne clique pas). Par contre un écran tactile ne le peut pas.

    Les valeurs possibles sont :

    1. none : le périphérique de pointage ne peut pas survoler.
    2. hover : le périphérique de pointage permet le survol. L'absence de valeur dans le critère est équivalente.

    hover ne teste que le périphérique principal.

    any-hover teste tous les périphériques présents et ne renvoie none que si aucun de ces périphériques n'est capable de survoler.

  • @media (overflow-block:none) { }

    Critère portant sur le comportement du périphérique en cas de débordement dans le sens des blocs (le sens vertical pour les langues européennes).

    Les valeurs possibles 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.
    4. optional-paged : Le contenu excédentaire peut être soit consulté par défilement, soit rejeté sur une nouvelle page.
  • @media (overflow-inline:none) { }

    Critère portant sur le comportement du périphérique en cas de débordement dans le sens des lignes (pour les langues européennes cela correspond au sens horizontal).

    Les valeurs possibles sont :

    1. none : le débordement est impossible. Le contenu excédentaire n'est pas affiché.
    2. scroll : le contenu excédentaire est affiché en dehors de la zone visible, et le lecteur peut le consulter en faisant défiler.
  • @media (scan:interlace) { }

    Critère portant sur le type de balayage du terminal.

    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 (LED) sont sur ce principe.

Exemples.

Le simulateur vous permet de tester les media-queries en faisant varier les paramètres d'affichage : par exemple en changeant la largeur de la fenêtre du navigateur, sur un ordinateur de bureau, ou en changeant l'orientation sur un terminal mobile.

En cliquant sur les cadres, vous pouvez afficher les media-queries et les règles CSS utilisées.

La couleur change avec la largeur de l'écran
Orientation :

Voir aussi...

Structuration du code - Directives.

  • @apply : Applique un groupe de propriétés préalablement définies.
  • @import : Importation d'une feuille de styles.
  • @supports : Teste la compatibilité du navigateur.