Corriger les mauvaises impressions : une feuille de style @media print pour tout site

16 mai 2026 · par JustZix Team

Vous appuyez sur Ctrl+P sur un long article et l'aperçu est un désastre : la barre de navigation dévore la première page, la barre latérale chevauche le texte, une barre de cookies flotte au-dessus du troisième paragraphe, et un fond sombre uni est sur le point de vider la cartouche de votre imprimante. Le site n'a tout simplement jamais écrit de feuille de style d'impression. Alors écrivez-en une vous-même — elle vit dans une règle CSS JustZix et rend « Enregistrer en PDF » de nouveau utilisable.

Pourquoi la plupart des sites s'impriment mal

L'impression est la partie la plus négligée du développement web. Les designers testent sur écran ; la QA teste sur écran ; personne n'ouvre l'aperçu avant impression. Le résultat est qu'une énorme part du web n'a soit aucun bloc @media print, soit un bloc écrit il y a des années qui ne correspond plus à la mise en page. Le navigateur imprime alors la mise en page écran telle quelle — en-têtes fixes, grilles multi-colonnes, thèmes sombres et tout le reste.

La correction est une règle CSS qui ne s'applique que lorsque la page est imprimée. Tout ce qui est dans @media print { ... } est invisible à l'écran et ne s'active que pour le papier et l'export PDF. Cela signifie que vous pouvez être agressif : masquer des régions entières, recolorer tout, forcer une colonne unique — rien de tout cela ne touche la navigation normale.

Étape 1 — masquer tout ce qui n'est pas du contenu

Navigation, barres latérales, pieds de page, widgets de partage, barres de cookies, encarts « s'abonner » collants : rien de tout cela n'a sa place sur le papier. Commencez par masquer l'habillage évident.

@media print {
  header, nav, aside, footer,
  .sidebar, .site-header, .site-footer,
  .cookie-banner, .newsletter, .share-bar,
  .ad, [class*="advert" i], [id*="cookie" i],
  [role="banner"], [role="navigation"],
  [aria-label*="cookie" i] {
    display: none !important;
  }
}

Si la page imprime encore des déchets, ouvrez l'aperçu avant impression, trouvez le bloc fautif dans les DevTools, et ajoutez son sélecteur à la liste. Vous n'avez besoin de le faire qu'une fois par site — la règle est enregistrée.

Étape 2 — déployer le contenu tronqué

Beaucoup de sites limitent le texte à quelques lignes, masquent le débordement, ou mettent l'article dans une boîte défilante à hauteur fixe. À l'écran c'est bien ; sur le papier cela coupe votre contenu. Annulez la limitation.

@media print {
  /* Supprime les limites de hauteur et les boites de defilement */
  main, article, .content, .post-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Annule la troncature par line-clamp */
  * {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Force l'article en pleine largeur, supprime la grille */
  body, main, article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

Le overflow: visible général sur * a l'air brutal, mais à l'intérieur de @media print c'est exactement ce que vous voulez — rien ne devrait être coupé sur une impression.

Étape 3 — contrôler les sauts de page

La plus grande amélioration d'une impression est d'empêcher les éléments de se couper en plein milieu entre les pages. Un bloc de code réparti sur deux feuilles, un titre échoué au bas d'une page, une ligne de tableau déchirée en deux — tout cela se corrige avec les propriétés de fragmentation.

@media print {
  /* Ne jamais couper ceux-ci entre les pages */
  pre, blockquote, table, figure, img,
  li, .card {
    break-inside: avoid;
  }

  /* Garde un titre avec le texte qui le suit */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Commence chaque section de premier niveau sur une nouvelle page */
  .chapter, section.page {
    break-before: page;
  }
}

Les propriétés modernes sont break-inside, break-before et break-after. Les anciens noms page-break-* fonctionnent encore et Chrome les mappe automatiquement, mais écrivez les nouveaux pour les nouvelles règles.

Étape 4 — afficher les URL des liens après les ancres

Un lien imprimé est inutile — le lecteur ne peut pas cliquer sur « cliquez ici ». Imprimez l'URL réelle à côté avec une astuce de contenu généré.

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

  /* N'imprime pas les URL pour les ancres internes ou les liens javascript: */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Ceci tire l'attribut href dans le texte visible. Sautez-le pour les liens d'ancre et les liens d'image si cela devient bruyant — une impression pleine de longues URL de suivi est son propre genre de désordre.

Étape 5 — régler les marges avec @page

La règle @page contrôle la feuille imprimée elle-même : ses marges et sa taille. Les navigateurs vous laissent aussi régler les marges dans la boîte de dialogue d'impression, mais les intégrer dans la règle signifie que chaque impression de ce site est cohérente.

@media print {
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  /* Marge plus serree sur la premiere page si vous avez un bloc de titre */
  @page :first {
    margin-top: 12mm;
  }
}

Étape 6 — forcer un fond clair pour économiser l'encre

Les sites à thème sombre s'impriment comme un mur de toner. Par défaut, Chrome retire les couleurs de fond à l'impression (sauf si « Graphiques d'arrière-plan » est coché), mais le texte reste souvent gris clair en supposant un arrière-plan sombre. Forcez un net noir sur blanc.

@media print {
  html, body, * {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Garde les images et les vraies photos intactes */
  img, svg, video { filter: none !important; }

  /* Adoucit legerement le texte secondaire pour qu'il reste secondaire */
  .muted, .meta, time, small { color: #444 !important; }
}

Ceci garantit une sortie lisible et économe en encre, quel que soit le thème du site — et cela se marie bien avec la désactivation de « Graphiques d'arrière-plan » dans la boîte de dialogue d'impression.

Assembler le tout dans JustZix

Créez une règle ciblée sur le site que vous imprimez souvent — par exemple https://docs.example.com/*.
Collez les six blocs dans le panneau CSS, enveloppés dans un seul @media print (ou gardez les blocs séparés — les deux marchent).
Ouvrez la page, appuyez sur Ctrl+P, et observez l'aperçu. Itérez : tout ce qui ne va toujours pas reçoit un sélecteur ajouté.
Synchronisez votre clé pour que la même configuration d'impression propre vous suive sur chaque appareil.

Parce que tout cela se trouve à l'intérieur de @media print, vous pouvez laisser la règle active en permanence. Elle est dormante pendant la navigation normale et ne se réveille que lorsque vous imprimez ou exportez un PDF.

Pièges à connaître

Le bouton Graphiques d'arrière-plan — la boîte de dialogue d'impression de Chrome a une case « Graphiques d'arrière-plan » qui écrase certains de vos choix de couleur. Vos règles !important gagnent toujours pour le premier plan, mais testez les deux états.
Les éléments fixes/collants se répètent sur chaque page imprimée dans certains navigateurs. Si un en-tête réapparaît, mettez position: static !important dessus à l'intérieur du bloc d'impression.
Les URL générées peuvent mal se couper — c'est pourquoi nous ajoutons word-break: break-all ; sans lui, une longue URL pousse la mise en page sur le côté.
Ne masquez pas trop — les légendes, les crédits de figures et les signatures d'auteur sont du contenu, pas de l'habillage. Soyez précis dans votre liste de masquage.

À voir aussi

Une surcouche de débogage responsive — trouvez les problèmes de mise en page avant qu'ils n'atteignent l'impression.
Copier une page en Markdown propre — une autre façon de sortir du contenu d'une page en désordre.

Une bonne feuille de style d'impression est un travail unique de quinze minutes qui paie chaque fois que vous enregistrez un PDF. Installez JustZix, ciblez une règle sur votre site le plus imprimé, et ne combattez plus jamais l'aperçu avant impression.

css printing

Notez cet article

Aucune note — soyez le premier.