frontend / css

Styles d'impression avancés

Leçon 251 exercice

Explication

Ce que vous allez apprendre

Appliquer des styles spécifiques à l'impression avec @media print
Afficher les URLs des liens en toutes lettres, invisibles autrement sur papier
Forcer l'impression de couleurs de fond porteuses de sens avec print-color-adjust
Contrôler les sauts de page avec break-inside, break-before et break-after
Configurer le format et les marges du papier avec @page

Dans quel contexte ?

Un cabinet comptable génère ses factures clients directement depuis une page web, imprimée ou exportée en PDF par les utilisateurs. Sans styles d'impression dédiés, la facture imprimée conserve le menu de navigation, les boutons "Partager", des liens sans URL visible, et peut couper un tableau de lignes de facturation en plein milieu entre deux pages. Cette dernière leçon du cours couvre exactement ces réglages.

Étape 1 : un support d'affichage souvent oublié

Tout ce cours porte jusqu'ici sur l'affichage écran. Mais une page web peut aussi être imprimée — une facture, un article — et l'imprimer telle quelle produit souvent un résultat médiocre.

Étape 2 : la solution, un média dédié

@media print permet d'appliquer des styles spécifiques uniquement quand le document est envoyé vers une imprimante ou un export PDF.

Étape 3 : ce qui a du sens à l'écran, pas sur papier

Sur écran, un lien est cliquable, sa destination importe peu visuellement. Sur papier, un lien est une impasse — c'est pourquoi on affiche l'URL en toutes lettres à côté avec content: " (" attr(href) ")".

Étape 4 : et pour les couleurs de fond

Les couleurs de fond décoratives gaspillent de l'encre et sont désactivées par défaut à l'impression. Il faut explicitement forcer leur impression avec print-color-adjust: exact quand elles portent une vraie information.

Étape 5 : contrôler où le papier se coupe

Une page imprimée découpe le contenu en tranches physiques fixes, contrairement à un écran qui défile. Sans contrôle, une carte ou un tableau peut se retrouver coupé au milieu entre deux pages.

Étape 6 : les outils pour reprendre ce contrôle

break-inside: avoid empêche de couper un élément, break-before/break-after forcent un saut. orphans/widows évitent qu'un paragraphe ne laisse qu'une seule ligne isolée en bas ou en haut de page.

Piège fréquent

Oublier break-inside: avoid sur un tableau ou une carte peut le couper en plein milieu à l'impression, avec l'en-tête sur une page et les données sur la suivante. Appliquez systématiquement cette règle aux blocs qui doivent rester visuellement entiers (cartes, figures, tableaux).

Propriété	Effet
`break-inside: avoid`	empêche de couper un élément au milieu
`break-before: page`	force un saut de page avant l'élément
`orphans` / `widows`	nombre minimal de lignes en bas/haut de page

Pour finir, la mise en page du papier lui-même

Contrairement aux règles habituelles qui stylent des éléments HTML, @page configure le support physique : format du papier, marges, et même une mise en page différente pour la première page.

Ce cours CSS touche ici à sa fin : des sélecteurs de base jusqu'à l'impression, vous disposez maintenant des bases pour construire des interfaces modernes, accessibles et performantes.

Commandes & code

Styles d'impression avancés

Au-delà de @media print basique : contrôler les sauts de page, les marges, et ce qui ne doit jamais être coupé.

@media print {
    /* Éléments à masquer systématiquement à l'impression */
    nav, .cta, footer, .video, .bouton-partage {
        display: none !important;
    }

    /* Couleurs et fonds : économiser l'encre par défaut */
    body {
        color: #000;
        background: #fff;
    }

    /* Forcer l'impression des couleurs de fond quand elles sont VRAIMENT porteuses de sens */
    .badge-important {
        print-color-adjust: exact; /* sans ça, les navigateurs suppriment les fonds par défaut */
        -webkit-print-color-adjust: exact;
        background: #fef3c7 !important;
    }
}

/* @page : contrôle la mise en page du papier lui-même */
@page {
    size: A4;
    margin: 2cm;
}

@page :first {
    margin-top: 4cm; /* page de garde différente */
}

/* Pages paysage pour des tableaux larges */
@page tableau-large {
    size: A4 landscape;
}
.tableau-donnees {
    page: tableau-large; /* référence le nom de page ci-dessus */
}

@media print {
    /* Sauts de page explicites */
    .nouvelle-section {
        break-before: page;   /* force un saut AVANT cet élément */
    }
    .fin-de-chapitre {
        break-after: page;
    }

    /* Empêcher un élément d'être coupé au milieu par un saut de page */
    .carte, figure, table {
        break-inside: avoid;
    }

    /* Orphelines/veuves : nombre minimal de lignes en haut/bas de page */
    p {
        orphans: 3; /* minimum 3 lignes en bas de la page précédente */
        widows: 3;  /* minimum 3 lignes en haut de la page suivante */
    }

    /* Un titre ne doit jamais se retrouver seul en bas de page */
    h2, h3 {
        break-after: avoid;
    }
}

@media print {
    /* Afficher les URLs des liens, invisibles sur papier sinon */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    /* Mais pas pour les ancres internes ou les liens déjà explicites */
    a[href^="#"]::after,
    nav a::after {
        content: "";
    }

    /* Afficher les abréviations en toutes lettres */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
}

<!-- Chargement conditionnel dès le HTML, en complément de @media print dans le CSS -->
<link rel="stylesheet" href="/css/print.css" media="print">

Résumé

print-color-adjust: exact est nécessaire pour forcer l'impression de fonds de couleur porteurs de sens.
break-inside: avoid empêche une carte/figure/tableau d'être coupé au milieu par un saut de page.
orphans/widows évitent qu'une page ne se termine ou commence par une seule ligne isolée d'un paragraphe.
@page contrôle la taille et les marges du papier, indépendamment du CSS appliqué au contenu.

Exercices pratiques

1 disponible

Mission : une facture PDF qui coupe son tableau en deux pages

Objectif : Corriger un tableau de facturation coupé à l'impression, un fond de badge non imprimé, et un lien sans URL visible sur papier.

Contexte

Un cabinet comptable exporte ses factures en PDF depuis facture.html. Sur facture.css, @media print masque déjà nav et .bouton-partage, mais trois problèmes persistent : le tableau .lignes-facturation se coupe systématiquement entre deux pages en pleine ligne de détail ; le badge .statut-paye (fond vert background: #dcfce7; porteur de sens) s'imprime totalement blanc, sans aucune couleur de fond ; et les liens <a href="..."> vers les conditions générales n'affichent aucune adresse visible sur le papier.

Résoudre l’exercice →