Une feuille CSS d’impression adapte une page Web au papier et à l’export PDF. Elle masque les menus, publicités et boutons inutiles, rétablit un fond clair, affiche le contenu sur toute la largeur et évite les coupures maladroites dans les images, tableaux et blocs de code.
Une page conçue pour un écran ne s’imprime jamais parfaitement par hasard.
La navigation, les boutons, les colonnes, les arrière-plans et les éléments fixes occupent souvent une place inutile sur le papier. À l’inverse, certains éléments importants disparaissent, notamment la destination réelle des liens.
CSS permet heureusement de définir des règles réservées à l’impression. Elles s’appliquent aussi lorsque le visiteur enregistre la page au format PDF depuis son navigateur.
Le but n’est pas de reproduire fidèlement le design de l’écran. Il consiste à produire un document lisible, compact et complet.
Qu’est-ce qu’une feuille CSS d’impression ?
Une feuille d’impression contient des styles appliqués uniquement lorsque le navigateur prépare une page pour l’impression.
Le navigateur reconnaît pour cela le type de média print. Les styles ordinaires continuent de s’appliquer, puis les règles d’impression les complètent ou les remplacent selon la cascade CSS.
Vous pouvez intégrer ces règles de deux manières :
- dans une feuille séparée chargée uniquement pour l’impression ;
- dans la feuille principale avec une règle
@media print.
Les deux approches sont valables. Pour un site courant, je privilégie généralement @media print. Les règles restent proches des composants qu’elles corrigent et ne nécessitent pas une requête CSS supplémentaire.
Méthode 1 : utiliser une règle @media print
Ajoutez les styles d’impression à la fin de votre feuille CSS :
@media print {
/* Styles appliqués uniquement à l’impression. */
}Langage du code : CSS (css)Cette méthode convient particulièrement lorsque le volume de règles reste modeste.
La cascade continue de s’appliquer. Une règle insuffisamment spécifique peut donc être écrasée par une autre déclaration du thème ou d’une extension.
N’ajoutez pas automatiquement !important partout. Utilisez-le seulement pour neutraliser des styles difficiles à surcharger, notamment certains éléments injectés par des extensions.
Méthode 2 : charger une feuille print.css séparée
Une feuille distincte peut être utile lorsque le site possède de nombreuses règles d’impression ou plusieurs modèles de documents.
Chargez-la dans l’élément head :
<link rel="stylesheet" href="/css/print.css" media="print">Langage du code : HTML, XML (xml)Le navigateur sait alors que cette ressource concerne uniquement l’impression.
Évitez cependant de copier toute la feuille principale dans print.css. Vous dupliqueriez des centaines de règles inutiles et compliqueriez la maintenance.
Une bonne feuille d’impression contient uniquement les ajustements nécessaires.
La structure d’une feuille d’impression moderne
Une base solide doit accomplir six tâches :
- rétablir un fond clair et un texte sombre ;
- supprimer les éléments interactifs inutiles ;
- déployer le contenu sur la largeur disponible ;
- préserver les images, tableaux et blocs de code ;
- contrôler les sauts de page ;
- rendre les liens compréhensibles hors de l’écran.
Voici une base complète que vous pourrez adapter à votre site.
@media print {
@page {
margin: 18mm 15mm;
}
html {
font-size: 10pt;
}
body {
background: #fff !important;
color: #000 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 12pt;
line-height: 1.5;
}
.site-header,
.site-footer,
.main-navigation,
.sidebar,
.widget-area,
.breadcrumbs,
.comments-area,
.related-posts,
.newsletter-form,
.social-sharing,
.advertisement,
.cookie-banner,
.print-hidden,
button,
[role="button"],
form {
display: none !important;
}
.site,
.site-content,
.content-area,
.site-main,
.entry-content,
article {
float: none !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
h1,
h2,
h3,
h4 {
color: #000 !important;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.25;
break-after: avoid-page;
page-break-after: avoid;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 18pt;
}
h3 {
font-size: 14pt;
}
p,
li {
orphans: 3;
widows: 3;
}
img,
svg,
video,
canvas {
max-width: 100% !important;
height: auto !important;
}
figure,
img,
table,
pre,
blockquote {
break-inside: avoid-page;
page-break-inside: avoid;
}
table {
width: 100% !important;
border-collapse: collapse;
}
thead {
display: table-header-group;
}
tr {
break-inside: avoid-page;
page-break-inside: avoid;
}
th,
td {
border: 1px solid #777;
padding: 4pt 6pt;
text-align: left;
}
pre,
code {
white-space: pre-wrap !important;
overflow-wrap: anywhere;
word-break: break-word;
}
a {
color: #000 !important;
text-decoration: underline;
}
a[href^="http"]:not([href*="example.com"])::after {
content: " (" attr(href) ")";
font-size: 9pt;
font-weight: normal;
overflow-wrap: anywhere;
}
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
.print-page-break {
break-before: page;
page-break-before: always;
}
}Langage du code : CSS (css)Remplacez évidemment example.com par le domaine de votre site et adaptez les sélecteurs à votre HTML.
Définir les marges et le format avec @page
La règle @page agit sur la page imprimée elle-même.
Elle permet notamment de définir :
- les marges d’impression ;
- le format du papier ;
- l’orientation portrait ou paysage ;
- certains comportements propres aux pages de gauche et de droite.
Pour conserver une marge confortable :
@media print {
@page {
margin: 18mm 15mm;
}
}Langage du code : CSS (css)Pour demander un format A4 en portrait :
@media print {
@page {
size: A4 portrait;
margin: 18mm 15mm;
}
}Langage du code : CSS (css)Pour un rapport contenant de grands tableaux :
@media print {
@page {
size: A4 landscape;
margin: 12mm;
}
}Langage du code : CSS (css)Le navigateur et l’utilisateur gardent toutefois une partie du contrôle. Une imprimante configurée sur un autre format peut adapter ou ignorer certaines demandes.
Masquer les éléments inutiles
Une impression ne doit pas reproduire toute l’interface du site.
Masquez généralement :
- la navigation principale ;
- les menus mobiles ;
- la barre latérale ;
- les publicités ;
- les formulaires d’inscription ;
- les boutons de partage ;
- les commentaires ;
- les contenus connexes ;
- les bandeaux de cookies ;
- les lecteurs audio ou vidéo ;
- les boutons flottants ;
- les contrôles purement interactifs.
@media print {
.site-header,
.site-footer,
.main-navigation,
.sidebar,
.social-sharing,
.newsletter-form,
.comments-area,
.advertisement {
display: none !important;
}
}Langage du code : CSS (css)Ne masquez pas automatiquement le titre, l’auteur, la date ou l’adresse du site. Ces informations donnent du contexte au document imprimé.
Créer une classe utilitaire print-hidden
Une classe utilitaire permet de retirer ponctuellement un bloc de l’impression sans ajouter son sélecteur à la feuille générale.
@media print {
.print-hidden {
display: none !important;
}
}Langage du code : CSS (css)Vous pouvez ensuite l’ajouter à n’importe quel élément :
<aside class="newsletter-box print-hidden">
Inscrivez-vous à la newsletter.
</aside>Langage du code : HTML, XML (xml)Dans Gutenberg, ajoutez simplement print-hidden dans le champ Classe(s) CSS additionnelle(s) du bloc.
Afficher certains éléments uniquement à l’impression
L’opération inverse peut également servir.
Vous pouvez afficher une mention, l’URL canonique ou une note de copyright uniquement dans la version imprimée.
.print-only {
display: none;
}
@media print {
.print-only {
display: block !important;
}
}Langage du code : CSS (css)Exemple HTML :
<p class="print-only">
Version imprimée depuis https://www.example.com/
</p>Langage du code : JavaScript (javascript)Supprimer les contraintes de largeur et de hauteur
Les mises en page destinées à l’écran utilisent souvent une largeur maximale, des colonnes, des hauteurs fixes ou des zones défilantes.
Ces contraintes peuvent couper le contenu ou laisser de grands espaces vides à l’impression.
@media print {
.site-content,
.content-area,
.site-main,
.entry-content,
article {
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
}Langage du code : CSS (css)La règle overflow: visible corrige notamment les blocs dont le contenu se trouve normalement dans une zone avec défilement.
Adapter Grid et Flexbox à l’impression
Les anciens guides se concentraient sur les éléments flottants. Aujourd’hui, les problèmes proviennent plus souvent de Grid et Flexbox.
Une grille de trois colonnes peut devenir illisible sur une feuille A4. Transformez-la en flux vertical :
@media print {
.card-grid,
.wp-block-columns,
.product-grid {
display: block !important;
}
.card-grid > *,
.wp-block-column,
.product-grid > * {
width: auto !important;
max-width: none !important;
margin: 0 0 12pt !important;
}
}Langage du code : CSS (css)Pour une rangée Flexbox :
@media print {
.flex-layout {
display: block !important;
}
}Langage du code : CSS (css)Ne neutralisez pas globalement tous les éléments utilisant Grid ou Flexbox. Certains tableaux de données ou encadrés s’impriment très bien avec leur disposition d’origine.
Corriger les anciens conteneurs flottants
Les anciens thèmes WordPress utilisaient massivement float pour créer des colonnes.
Ces flottants peuvent encore provoquer des coupures ou une largeur incorrecte dans certains contextes d’impression.
@media print {
.content-area,
.site-main,
.entry-content,
.sidebar {
float: none !important;
width: auto !important;
}
}Langage du code : CSS (css)Cette correction reste utile sur un ancien site. Elle ne constitue cependant plus une solution universelle au problème de la première page imprimée seule.
Éviter qu’un article ne s’imprime que sur une page
Lorsqu’une longue page s’arrête après la première feuille, inspectez principalement les propriétés suivantes :
heightoumax-height;overflow: hidden,autoouscroll;position: fixedouabsolute;transform;contain;- certaines mises en page Grid ou Flexbox imbriquées ;
- les conteneurs flottants des anciens thèmes.
Une règle de dépannage peut ressembler à ceci :
@media print {
.site,
.site-content,
.content-area,
.site-main,
.entry-content,
article {
position: static !important;
float: none !important;
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
transform: none !important;
contain: none !important;
}
}Langage du code : CSS (css)Appliquez ces règles aux conteneurs réellement concernés. Un sélecteur universel serait brutal et pourrait casser des composants qui s’imprimaient correctement.
Contrôler les sauts de page
Le navigateur découpe automatiquement le contenu en pages. Toutefois, son choix n’est pas toujours élégant.
Les propriétés modernes sont :
break-before;break-after;break-inside.
Les anciennes propriétés page-break-before, page-break-after et page-break-inside restent utiles comme solutions de compatibilité.
Éviter une coupure dans un élément
@media print {
figure,
blockquote,
table,
pre,
.notice,
.card {
break-inside: avoid-page;
page-break-inside: avoid;
}
}Langage du code : CSS (css)Le navigateur peut malgré tout couper un élément plus grand qu’une page. Il n’existe alors aucun emplacement parfait où le déplacer.
Éviter qu’un titre reste seul en bas de page
@media print {
h1,
h2,
h3,
h4 {
break-after: avoid-page;
page-break-after: avoid;
}
}Langage du code : CSS (css)Cette règle demande au navigateur de conserver le titre avec le contenu qui le suit.
Forcer une nouvelle page
@media print {
.print-page-break {
break-before: page;
page-break-before: always;
}
}Langage du code : CSS (css)Ajoutez ensuite la classe à la section concernée :
<section class="print-page-break">
<h2>Annexes</h2>
</section>Langage du code : HTML, XML (xml)Dans Gutenberg, utilisez le champ des classes CSS additionnelles.
Gérer les veuves et les orphelines
Une orpheline est une ligne isolée en bas d’une page. Une veuve est une ligne isolée en haut de la suivante.
CSS propose les propriétés orphans et widows :
@media print {
p,
li {
orphans: 3;
widows: 3;
}
}Langage du code : CSS (css)Le navigateur essaiera de conserver au moins trois lignes ensemble lorsque l’espace disponible le permet.
Afficher la destination des liens
Un lien bleu et souligné perd une grande partie de son intérêt une fois imprimé.
CSS peut ajouter automatiquement son URL après le texte :
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
font-weight: normal;
overflow-wrap: anywhere;
}
}Langage du code : CSS (css)Cependant, afficher toutes les URL rend rapidement un document illisible. Excluez généralement :
- les liens internes ;
- les ancres de la page ;
- les boutons ;
- les liens associés à une image ;
- les liens déjà affichés sous forme d’URL.
@media print {
a[href^="http"]:not([href*="example.com"])::after {
content: " (" attr(href) ")";
font-size: 9pt;
font-weight: normal;
overflow-wrap: anywhere;
}
a[href^="#"]::after,
a[href^="javascript:"]::after,
a.no-print-url::after {
content: "";
}
}Langage du code : CSS (css)Remplacez example.com par votre domaine.
Adapter les images
Une image plus large que la zone imprimable peut être coupée.
@media print {
img,
svg {
max-width: 100% !important;
height: auto !important;
}
}Langage du code : CSS (css)Évitez aussi de séparer une image de sa légende :
@media print {
figure {
break-inside: avoid-page;
page-break-inside: avoid;
}
figcaption {
font-size: 9pt;
color: #333;
}
}Langage du code : CSS (css)Les images décoratives peuvent être masquées. Les schémas, captures, graphiques et illustrations pédagogiques doivent rester visibles.
Imprimer les arrière-plans et les couleurs
Les navigateurs modifient souvent les couleurs pour économiser l’encre et améliorer le contraste.
Une feuille d’impression devrait donc fonctionner même si les arrière-plans disparaissent.
Pour un élément où la couleur transmet une information essentielle, vous pouvez utiliser :
@media print {
.chart,
.status-badge,
.colour-key {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}Langage du code : CSS (css)Cette propriété reste une demande adressée au navigateur, pas un ordre absolu. L’utilisateur peut choisir de ne pas imprimer les arrière-plans.
Ne faites donc jamais dépendre une information uniquement d’une couleur. Ajoutez un texte, un symbole, une bordure ou un motif.
Corriger le mode sombre
Un site en mode sombre ne doit pas gaspiller une cartouche noire à chaque impression.
@media print {
html,
body,
.site,
.site-content,
article {
background: #fff !important;
color: #000 !important;
}
h1,
h2,
h3,
h4,
p,
li,
td,
th {
color: #000 !important;
text-shadow: none !important;
}
* {
box-shadow: none !important;
}
}Langage du code : CSS (css)Évitez néanmoins le sélecteur universel pour les couleurs. Certains graphiques et composants informatifs ont besoin de conserver une partie de leur palette.
Rendre les tableaux imprimables
Les grands tableaux constituent l’un des cas les plus délicats.
Commencez par rétablir une largeur normale et des bordures visibles :
@media print {
table {
width: 100% !important;
border-collapse: collapse;
font-size: 9pt;
}
th,
td {
border: 1px solid #777;
padding: 4pt 6pt;
vertical-align: top;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
tr {
break-inside: avoid-page;
page-break-inside: avoid;
}
}Langage du code : CSS (css)La règle appliquée à thead demande au navigateur de répéter l’en-tête sur chaque page lorsque cela est possible.
Pour un tableau particulièrement large, préférez une page en paysage ou une version imprimable simplifiée. Réduire la police à quatre points n’est pas une stratégie, c’est une vengeance.
Rendre les blocs de code imprimables
Les blocs de code utilisent souvent un défilement horizontal à l’écran. Sur papier, cette zone défilante n’existe plus.
@media print {
pre,
code {
font-family: "Courier New", Courier, monospace;
font-size: 9pt;
}
pre {
white-space: pre-wrap !important;
overflow: visible !important;
overflow-wrap: anywhere;
word-break: break-word;
border: 1px solid #aaa;
padding: 8pt;
background: #fff !important;
color: #000 !important;
}
}Langage du code : CSS (css)La coupure automatique des longues lignes améliore l’impression, mais elle modifie visuellement le code. Pour des commandes sensibles, indiquez clairement que le retour à la ligne peut provenir de la mise en page.
Faut-il masquer les formulaires ?
Un formulaire interactif n’a généralement aucun intérêt sur papier.
@media print {
form,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
display: none !important;
}
}Langage du code : CSS (css)Il existe toutefois des exceptions :
- un bon de commande ;
- un formulaire administratif à remplir à la main ;
- une checklist ;
- une fiche d’intervention ;
- un questionnaire pédagogique.
Dans ces cas, remplacez les champs interactifs par des lignes et cases imprimables.
Ajouter un bouton Imprimer
Le raccourci du navigateur suffit techniquement. Un bouton peut néanmoins aider les visiteurs sur une recette, un tutoriel, une facture ou une fiche pratique.
HTML :
<button class="print-button" type="button">
Imprimer cette page
</button>Langage du code : HTML, XML (xml)JavaScript moderne :
document.querySelectorAll( '.print-button' ).forEach( ( button ) => {
button.addEventListener( 'click', () => {
window.print();
} );
} );Langage du code : JavaScript (javascript)Masquez naturellement le bouton dans le document imprimé :
@media print {
.print-button {
display: none !important;
}
}Langage du code : CSS (css)N’ouvrez pas automatiquement la boîte d’impression au chargement de la page. Ce comportement surprend les visiteurs et constitue une excellente manière de les faire fuir.
Ajouter les styles d’impression dans WordPress
Plusieurs solutions existent selon l’ampleur du code.
Dans le CSS additionnel
Pour quelques règles, ajoutez le bloc @media print dans :
- Apparence → Personnaliser → CSS additionnel avec un thème classique ;
- la zone CSS prévue par votre thème ou votre extension de snippets ;
- la feuille de style d’un thème enfant.
Ne modifiez jamais directement la feuille du thème parent. Une mise à jour effacerait vos changements.
Charger un fichier print.css proprement
Pour une feuille séparée, utilisez l’API d’enqueue de WordPress plutôt que de modifier header.php.
<?php
/**
* Enqueue the print stylesheet.
*
* @return void
*/
function sky_enqueue_print_stylesheet(): void {
$stylesheet_path = get_stylesheet_directory() . '/assets/css/print.css';
$stylesheet_uri = get_stylesheet_directory_uri() . '/assets/css/print.css';
if ( ! file_exists( $stylesheet_path ) ) {
return;
}
wp_enqueue_style(
'sky-print',
$stylesheet_uri,
array(),
(string) filemtime( $stylesheet_path ),
'print'
);
}
add_action( 'wp_enqueue_scripts', 'sky_enqueue_print_stylesheet' );Langage du code : HTML, XML (xml)Ce snippet :
- charge la feuille avec le média
print; - utilise le thème enfant actif ;
- évite une erreur si le fichier manque ;
- emploie sa date de modification comme version pour invalider le cache.
Placez ensuite le fichier ici :
wp-content/themes/votre-theme-enfant/assets/css/print.cssLangage du code : PHP (php)Exemple adapté à GeneratePress
GeneratePress utilise des classes stables que vous pouvez cibler sans modifier ses fichiers.
@media print {
.site-header,
.main-navigation,
.widget-area,
.footer-widgets,
.site-footer,
.comments-area,
.post-navigation,
.paging-navigation {
display: none !important;
}
.site.grid-container,
.site-content,
.content-area,
.site-main,
.inside-article,
.entry-content {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.content-area,
.site-main {
float: none !important;
}
.inside-article {
box-shadow: none !important;
border: 0 !important;
background: #fff !important;
}
}Langage du code : CSS (css)Ajoutez ensuite les règles génériques pour les titres, images, liens, tableaux et blocs de code.
Tester le rendu d’impression
Ne testez pas uniquement avec une imprimante physique. Les outils de développement permettent d’émuler le média d’impression sans gaspiller de papier.
Dans Chrome ou Edge
- Ouvrez les outils de développement.
- Affichez le menu des outils supplémentaires.
- Ouvrez le panneau Rendering.
- Repérez Emulate CSS media type.
- Sélectionnez print.
Vous pouvez alors inspecter chaque élément avec les règles d’impression actives.
Dans Firefox
Firefox permet également d’activer la simulation du média d’impression depuis ses outils de développement. L’emplacement exact peut varier selon la version.
Utilisez ensuite l’aperçu d’impression réel pour vérifier la pagination. L’émulation CSS ne reproduit pas toujours parfaitement les marges, en-têtes et coupures de pages.
Tester plusieurs navigateurs
Le rendu imprimé diffère davantage entre navigateurs que le rendu à l’écran.
Testez au minimum :
- Chrome ou Chromium ;
- Firefox ;
- Safari si votre audience utilise macOS ;
- l’enregistrement au format PDF ;
- le format A4 et, si nécessaire, Letter ;
- le mode portrait et paysage.
Vérifiez également le résultat avec les arrière-plans désactivés. Beaucoup d’utilisateurs conservent ce réglage pour économiser l’encre.
Erreurs fréquentes dans une feuille CSS d’impression
Copier toute la feuille du site
Cette méthode duplique inutilement le CSS et rend les futures modifications pénibles.
La feuille d’impression doit contenir des surcharges ciblées, pas une seconde version complète du thème.
Masquer tous les liens
Les liens participent au sens du contenu. Conservez leur texte et affichez éventuellement leur destination.
Conserver les éléments fixes
Un bandeau en position: fixed peut se répéter sur chaque page ou masquer le contenu.
@media print {
.sticky-header,
.floating-button,
.cookie-banner {
display: none !important;
}
}Langage du code : CSS (css)Utiliser une hauteur fixe
Une hauteur fixe peut tronquer le contenu dès qu’il dépasse la zone définie.
@media print {
.scroll-panel,
.tab-panel,
.accordion-content {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}Langage du code : CSS (css)Masquer le contenu des accordéons fermés
Un accordéon fermé à l’écran peut contenir une information essentielle.
@media print {
.accordion-content,
details > * {
display: block !important;
height: auto !important;
visibility: visible !important;
}
}Langage du code : CSS (css)Les composants JavaScript complexes peuvent nécessiter une logique spécifique avant l’impression.
Utiliser beforeprint et afterprint
La majorité des besoins se règlent uniquement en CSS. JavaScript peut néanmoins préparer certains composants avant l’ouverture de la boîte d’impression.
Les navigateurs exposent les événements beforeprint et afterprint :
window.addEventListener( 'beforeprint', () => {
document.documentElement.classList.add( 'is-printing' );
} );
window.addEventListener( 'afterprint', () => {
document.documentElement.classList.remove( 'is-printing' );
} );Langage du code : JavaScript (javascript)Cette classe peut ouvrir des graphiques, remplacer une carte interactive ou préparer un composant difficile à gérer avec CSS seul.
Ne dupliquez pas tout le contenu dans le DOM juste pour l’impression. Vous compliqueriez l’accessibilité et la maintenance.
Checklist d’une bonne version imprimable
- Le fond est clair et le texte reste lisible en noir et blanc.
- La navigation, les publicités et les formulaires sont masqués.
- Le titre, l’auteur et la date restent visibles.
- Le contenu utilise toute la largeur imprimable.
- Les colonnes inutiles sont transformées en flux vertical.
- Les images ne dépassent pas la largeur de la page.
- Les légendes restent attachées aux images.
- Les tableaux possèdent des bordures et répètent leur en-tête.
- Les blocs de code ne nécessitent aucun défilement horizontal.
- Les titres ne restent pas seuls en bas d’une page.
- Les encadrés importants évitent les coupures internes.
- Les URL externes restent identifiables.
- Les accordéons et onglets importants sont développés.
- Le rendu a été testé dans plusieurs navigateurs.
- L’export PDF a été contrôlé séparément.
Votre site WordPress s’imprime mal ?
Les feuilles d’impression révèlent souvent des problèmes de structure : conteneurs trop rigides, tableaux impossibles à découper, éléments fixes et composants JavaScript fermés.
- audit du rendu papier et PDF ;
- création d’une feuille d’impression sur mesure ;
- adaptation de GeneratePress et Gutenberg ;
- correction des tableaux, formulaires et blocs de code ;
- optimisation des factures, fiches et rapports WooCommerce ;
- tests sur les principaux navigateurs.
Contactez-moi pour améliorer le rendu imprimé de votre site WordPress.
Questions fréquentes
Faut-il créer un fichier print.css séparé ?
Pas nécessairement. Une règle @media print dans la feuille principale suffit pour la plupart des sites. Un fichier séparé devient intéressant lorsque les styles d’impression sont nombreux ou partagés entre plusieurs modèles.
Comment masquer un élément uniquement à l’impression ?
Ajoutez-lui une classe comme print-hidden, puis définissez display: none !important pour cette classe dans @media print.
Pourquoi seule la première page de mon article s’imprime-t-elle ?
Un conteneur possède probablement une hauteur fixe, un débordement masqué, une position particulière, une transformation ou une mise en page difficile à fragmenter. Rétablissez une hauteur automatique, overflow: visible et un flux normal pour l’impression.
Comment empêcher une image d’être coupée entre deux pages ?
Appliquez break-inside: avoid-page et page-break-inside: avoid au conteneur figure. Le navigateur peut toutefois couper une image plus grande que la page imprimable.
Comment afficher les URL dans la version imprimée ?
Utilisez le pseudo-élément ::after avec content: " (" attr(href) ")". Limitez cette règle aux liens externes afin de ne pas surcharger le document.
Peut-on forcer l’impression des couleurs de fond ?
La propriété print-color-adjust: exact peut demander au navigateur de préserver les couleurs. L’utilisateur et le pilote d’impression peuvent néanmoins ignorer cette préférence.
Les styles d’impression s’appliquent-ils aux PDF ?
Oui. Lorsque le navigateur enregistre une page au format PDF depuis la boîte d’impression, il applique normalement les règles du média print.
Conclusion
Une feuille CSS d’impression ne doit pas reproduire servilement la mise en page de l’écran. Elle doit transformer la page en document.
Masquez les éléments interactifs, simplifiez les colonnes, rétablissez un fond clair et contrôlez les coupures. Traitez ensuite séparément les images, les tableaux, les blocs de code et les liens.
Enfin, testez le résultat dans plusieurs navigateurs et dans un export PDF. Une feuille qui semble parfaite dans l’inspecteur peut encore décider de placer un titre seul sur une page blanche. L’imprimante aime conserver une part de mystère.
