@media print : designer l'impression, le territoire abandonné du CSS

Fais le test : imprime (ou exporte en PDF) la dernière page web que tu as lue. Résultat probable : la barre de navigation en pleine page 1, un bouton cookie fossilisé au milieu du texte, des liens bleus illisibles en niveaux de gris, et 12 pages pour un article qui en méritait 3. Le web a décidé collectivement que l'impression n'existait pas. Pendant ce temps, des gens impriment des recettes, des billets, des factures, des articles à annoter, et reçoivent des confettis.

Pour un designer venu du print, c'est une hérésie doublée d'une opportunité : le CSS d'impression est si négligé qu'un simple effort te place dans le haut du panier mondial.

La base : une feuille de styles pour le papier

Tout tient dans une media query connue de tous et presque jamais écrite :

@media print {
  nav, footer, .sidebar, .cookie-banner, .comments { display: none; }
  body { font-size: 11pt; line-height: 1.4; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

Premier geste : supprimer tout ce qui n'a de sens qu'à l'écran. Navigation, boutons de partage, formulaires, vidéos : sur papier, un bouton « S'abonner » est une nature morte. Deuxième geste : passer en unités print (pt, cm) et en noir sur blanc. L'encre coûte cher ; ton fond sombre élégant est une facture.

Les liens : le papier ne clique pas

Un lien imprimé perd sa destination. CSS sait la révéler :

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

Chaque lien externe affiche son URL entre parenthèses. On filtre sur http pour épargner les ancres internes : « (#section-3) » n'a rien à faire sur papier. C'est le genre de détail qui fait dire au lecteur que quelqu'un, quelque part, a pensé à lui. Il a raison.

Les coupures : l'art de ne pas trancher

Le vrai métier du print CSS, c'est la gestion des sauts de page, l'équivalent des veuves et orphelines en PAO. Le CSS en a hérité le vocabulaire :

@media print {
  h2, h3 { break-after: avoid; }        /* jamais un titre orphelin en bas de page */
  figure, table, pre { break-inside: avoid; } /* jamais une image tranchée */
  p { orphans: 3; widows: 3; }          /* minimum 3 lignes de part et d'autre */
}

Un titre seul en bas de page, une table de code coupée en deux : ce sont les fautes typographiques du papier, et les propriétés de fragmentation les corrigent en quatre lignes. Ton article imprimé se met soudain à ressembler à un document composé, pas à une capture d'écran découpée au hachoir.

@page : la marge de manœuvre

La règle @page contrôle la feuille elle-même :

@page {
  size: A4;
  margin: 2cm 1.5cm;
}
@page :first { margin-top: 4cm; }

Format, marges, première page distincte : l'empagement de base d'une maquette. Le support des fonctionnalités avancées (compteurs de pages en marge, en-têtes courants) reste inégal selon les navigateurs, mais marges et format passent partout, et c'est déjà 80 % du confort.

Deux pièges connus au moment de tester : les couleurs de fond sautent par défaut à l'impression (print-color-adjust: exact pour forcer, avec parcimonie : l'encre, toujours), et l'aperçu se teste dans les DevTools : l'onglet Rendering de Chrome émule print sans sacrifier une forêt.

Le cas d'usage caché : le PDF gratuit

Le secret le mieux gardé : « Imprimer en PDF » est un générateur de documents. Une feuille print soignée transforme n'importe quelle page en livrable (facture, devis, CV, documentation, attestation), sans bibliothèque PDF côté serveur, sans dépendance, sans templating exotique. Ton HTML est le template, ton CSS print est la maquette, le navigateur est le moteur de rendu. Pour un dev PHP sans framework, c'est la voie royale : une page facture bien stylée en print vaut tous les générateurs PDF que tu n'auras pas à maintenir.

Une heure, pas un chantier

Le meilleur argument pour le CSS print : le rapport effort/effet. Une heure de travail (masquer l'inutile, régler les coupures, révéler les liens) couvre l'essentiel, pour la vie de la page. C'est le trottoir devant la boutique : propre, il passe inaperçu ; sale, il se remarque de loin. Et dans un web où plus grand monde ne balaie, le tien brillera par contraste.

FAQ

Comment tester le rendu print sans imprimer ?

Simplement l'aperçu avant impression du navigateur (Ctrl+P).

Comment éviter qu'un titre reste seul en bas de page ?

break-after: avoid sur les titres, break-inside: avoid sur les figures et tableaux, orphans/widows à 3 sur les paragraphes.

Peut-on générer des PDF avec du CSS print ?

Oui : « Imprimer en PDF » transforme toute page bien stylée en document livrable (factures, CV, docs) sans bibliothèque serveur.