Maîtrisez les styles CSS pour une impression web parfaite

Si vous avez déjà imprimé des réservations de billets ou des itinéraires hôteliers depuis le Web, les résultats étaient probablement décevants. Pourtant, les documents web peuvent être stylisés pour l'impression comme pour l'écran, grâce aux feuilles de style CSS.

Séparation des préoccupations

Un atout majeur du CSS est la séparation du contenu et de la présentation. Au lieu d'un balisage obsolète comme :

<font size="7"><b>Titre</b></font>

utilisez un balisage sémantique :

<h1>Titre</h1>

Cela rend le code plus propre et permet de modifier la présentation indépendamment du contenu. Les navigateurs affichent les éléments h1 en gros caractères gras par défaut, mais une règle CSS peut les changer :

h1 {
  font-weight: normal;
}

En regroupant les styles dans un fichier externe lié au HTML, vous réutilisez la feuille et mettez à jour tous les documents d'un seul coup.

Inclusion d'une feuille de style d'impression

Comme pour les styles d'écran, spécifiez une feuille pour l'impression via l'attribut media :

<link href="base.css" rel="stylesheet" />

Par défaut, cela équivaut à media="all". Pour cibler l'impression :

<link href="print.css" rel="stylesheet" media="print" />

Utilisez une feuille commune pour les styles partagés (polices, espacement) et des feuilles spécifiques par média. C'est la quintessence de la séparation des préoccupations.

Exemples de règles CSS pour l'impression

Fond propre

Évitez de gaspiller l'encre sur des fonds colorés :

body {
  background: white;
  color: black;
}

Supprimez les images de fond décoratives :

* {
  background-image: none !important;
}

Contrôle des marges

Les marges dépendent du navigateur et de l'imprimante, mais CSS offre un contrôle via @page :

@page {
  margin: 2cm;
}

Pour des mises en page avancées (pages paires/impaires) :

@page {
  margin-left: 20mm;
  margin-right: 20mm;
  margin-top: 40mm;
  margin-bottom: 50mm;
}
@page :left {
  margin-left: 30mm;
}
@page :right {
  margin-right: 30mm;
}

Masquer le contenu superflu

Cachez navigation, pubs ou sidebar :

#nav, div.ad {
  display: none;
}

Gérer les liens

Supprimez les soulignements et couleurs :

a {
  text-decoration: none;
  color: inherit;
}

Ajoutez l'URL après le texte :

a[href]:after {
  content: " (" attr(href) ")";
  font-size: 90%;
  color: #333;
}

Gestion des sauts de page

Utilisez page-break-before, page-break-after et page-break-inside :

table {
  page-break-inside: avoid;
}

h1, h2 {
  page-break-before: always;
}
h1 + h2 {
  page-break-before: avoid;
}

Prévisualiser les styles d'impression

Utilisez l'aperçu avant impression. Dans Chrome, activez les Outils de développement > Plus d'outils > Rendu > Emuler CSS media > print.

L'émulation n'est pas parfaite (pas de @page ni taille papier).

Imprimer en PDF

Imprimez vers PDF pour des documents partageables de qualité professionnelle.

Imprimez tout type de documents

Créez CV, recettes ou agendas impeccables. Les styles CSS transforment les pages web en PDF pros.