@media print en CSS : des pages qui s'impriment enfin proprement

Quand un visiteur clique sur "Imprimer" depuis votre site, le navigateur produit par défaut une copie presque identique de l'écran : menu de navigation, boutons, fond coloré, tout y passe, souvent au prix d'un gaspillage de papier et d'encre. La media query @media print permet de reprendre la main sur ce rendu et de définir une feuille de style dédiée, pensée uniquement pour le papier.

Que vous conceviez une facture, un article de blog imprimable ou une simple confirmation de commande, cette section du CSS mérite d'être traitée comme une expérience à part entière, avec ses propres règles de lisibilité et ses propres priorités.

Définition

@media print est une media query CSS qui cible spécifiquement le média "print", c'est à dire tout rendu destiné à l'impression papier ou à la génération d'un PDF via la fonction "Imprimer" du navigateur. Les règles placées à l'intérieur de ce bloc ne s'appliquent jamais à l'écran : elles restent dormantes tant que l'utilisateur ne déclenche pas une impression ou un aperçu avant impression.

@media print {
  nav,
  footer,
  .sidebar,
  .cta-button {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
}

Cette media query fait partie de la même famille que Media query, qui sert habituellement à adapter une page à la largeur de l'écran. Ici, ce n'est plus la taille qui compte, mais le média de sortie lui même.

Pourquoi une feuille de style dédiée à l'impression

Un écran et une feuille de papier n'ont presque rien en commun. L'écran affiche du contenu en couleur, avec un défilement infini, des interactions au survol et une largeur variable. Le papier, lui, est fixe, souvent en noir et blanc pour les imprimantes personnelles, et il coûte de l'encre à chaque pixel coloré. Sans intervention, un site moderne imprime des menus inutiles, des boutons qui ne servent à rien sur une page morte, et parfois des fonds sombres qui vident une cartouche d'encre en quelques secondes.

En définissant des styles spécifiques au sein de @media print, vous reprenez le contrôle sur ce qui compte réellement pour un lecteur qui a du papier entre les mains : le texte, les images essentielles, et éventuellement les informations de contact ou de référence.

Les cas d'usage classiques

Trois réflexes reviennent presque systématiquement dans une feuille de style d'impression sérieuse.

Le premier consiste à masquer tout ce qui n'a de sens qu'à l'écran : la barre de navigation, les boutons d'action, les widgets de partage social, les publicités, ou encore un chat en direct. Ces éléments n'apportent rien sur une page imprimée, et se coupent parfois au milieu d'une page, ce qui produit un rendu franchement disgracieux.

Le second réflexe consiste à forcer un fond blanc et un texte noir. Un site à thème sombre ou avec un habillage très coloré est agréable à l'écran, mais devient illisible ou coûteux en encre une fois imprimé. La plupart des navigateurs n'impriment déjà pas les couleurs de fond par défaut, mais il reste prudent de le préciser explicitement dans vos règles.

Le troisième réflexe, plus subtil, consiste à afficher l'adresse complète des liens à côté du texte cliquable. Sur papier, un lien souligné en bleu ne mène nulle part : il faut donc révéler l'URL elle même, ce que permet la propriété content associée au pseudo élément ::after.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}

Ce dernier point rejoint directement le fonctionnement de la content, qui permet d'insérer dynamiquement du texte généré à partir d'un attribut HTML.

Structurer la mise en page pour le papier

Au delà de la couleur et du contenu affiché, l'impression pose des questions de mise en page que l'écran ignore superbement : où commence une nouvelle page, faut il éviter de couper un tableau en deux, et comment gérer les marges.

Ces propriétés restent peu utilisées au quotidien, mais elles font toute la différence sur un document long comme un devis, un rapport ou une facture multi pages.

Tester et déboguer vos styles d'impression

Contrairement à une media query de largeur d'écran, @media print ne peut pas se tester en redimensionnant simplement la fenêtre du navigateur. La méthode la plus fiable reste d'ouvrir l'aperçu avant impression, généralement accessible via le raccourci d'impression du système, puis de vérifier que la navigation a bien disparu, que le fond est blanc et que les liens affichent leur adresse.

Les outils de développement des navigateurs modernes permettent également d'émuler le média print directement dans l'onglet de rendu, ce qui évite d'ouvrir une vraie boîte de dialogue d'impression à chaque test.

Pièges courants

Un autre piège classique consiste à oublier que @media print s'ajoute aux styles existants, il ne les remplace pas automatiquement. Si un élément est déjà masqué en display: none pour l'écran, il restera masqué à l'impression sauf indication contraire. Il faut donc toujours penser en termes de surcharge, pas de réécriture complète.

FAQ

Non, ce n'est pas nécessaire. Vous pouvez très bien inclure votre bloc @media print directement dans votre feuille de style principale, à la suite de vos autres règles. Un fichier séparé, chargé avec l'attribut media="print" sur la balise link, reste possible pour de très gros projets, mais complexifie inutilement la maintenance pour la majorité des sites.

Oui, Flexbox et CSS Grid restent utilisables à l'intérieur d'un bloc @media print, mais gardez à l'esprit que le rendu papier n'a pas de défilement : un conteneur flexible peut donc produire des coupures de page inattendues si son contenu dépasse la hauteur d'une feuille.

Oui, la syntaxe @media screen, print permet de grouper deux médias avec la même liste de règles, séparés par une virgule qui joue le rôle d'un "ou" logique. C'est utile pour des styles partagés, comme une police plus lisible, applicable aux deux contextes à la fois.