Cet article a été mis à jour en 2020 pour refléter les meilleures pratiques en matière de style d'impression CSS.

Dans cet article, nous passons en revue l'art de créer des pages Web imprimables avec CSS.

"Qui imprime les pages Web?" Je t'entends pleurer! Relativement peu de pages seront reproduites sur papier. Mais pensez à:

• imprimer des billets de voyage ou de concert
• reproduire des itinéraires ou des horaires
• enregistrer une copie pour une lecture hors ligne
• accéder à des informations dans une zone avec une mauvaise connectivité
• utiliser des données dans des conditions dangereuses ou sales – par exemple, une cuisine ou une usine
• produisant un projet de contenu pour des annotations écrites
• imprimant des reçus Web à des fins de comptabilité
• fournissant des documents aux personnes handicapées qui éprouvent des difficultés à utiliser un écran
• imprimant une page pour votre collègue qui refuse d'utiliser ces nouvelles absurdités t'internet .

Malheureusement, l'impression des pages peut être une expérience frustrante:

• le texte peut être trop petit, trop grand ou trop faible
• colonnes peut être trop étroite, trop large ou déborder. Les sections des marges de page
• peuvent être rognées ou disparaître entièrement
• l'encre est gaspillée sur des arrière-plans et des images de couleur inutiles
• les URL des liens ne sont pas visibles [19659005] des icônes, des menus et des publicités sont imprimés qui ne peuvent jamais être cliqués!

De nombreux développeurs préconisent l'accessibilité du Web, mais peu se souviennent de rendre le Web imprimé accessible!

Conversion de supports réactifs et continus en papier paginé de toute taille l'orientation peut être difficile. Cependant, le contrôle d'impression CSS est possible depuis de nombreuses années et une feuille de style de base peut être remplie en quelques heures. Les sections suivantes décrivent des options bien prises en charge et pratiques pour rendre vos pages faciles à imprimer.

Feuilles de style d'impression

Le CSS d'impression peut être:

1. S'applique en plus du style d'écran. En prenant vos styles d'écran comme base, les styles d'imprimante remplacent ces valeurs par défaut si nécessaire.
2. Appliqué en tant que styles distincts. Les styles d'écran et d'impression sont entièrement séparés; les deux partent des styles par défaut du navigateur.

Le choix dépendra de votre site / application. Personnellement, j'utilise la plupart du temps des styles d'écran comme base d'impression. Cependant, j'ai utilisé des feuilles de style distinctes pour des applications avec des sorties radicalement différentes – comme un système de réservation de session de conférence qui affichait une grille de calendrier à l'écran mais un calendrier chronologique sur papier.

Une feuille de style d'impression peut être ajoutée au HTML après la feuille de style standard:

Les styles print.css seront appliqués en addition aux styles d'écran lors de l'impression de la page.

Pour séparer l'écran et les médias imprimés, main.css doivent cibler uniquement l'écran:

Alternativement, les styles d'impression peuvent être inclus dans un fichier CSS existant en utilisant les règles @media . Par exemple:

 / * main.css * /
corps {
  marge: 2em;
  couleur: #fff;
  couleur de fond: # 000;
}

/ * remplacer les styles lors de l'impression * /
@media print {

  corps {
    marge: 0;
    couleur: # 000;
    couleur de fond: #fff;
  }

}

Un certain nombre de règles @media print peuvent être ajoutées, ce qui peut être pratique pour conserver les styles associés ensemble. Les règles d'écran et d'impression peuvent également être séparées si nécessaire:

 / * main.css * /

/ * styles à l'écran * /
écran @media {

  corps {
    marge: 2em;
    couleur: #fff;
    couleur de fond: # 000;
  }

}

/ * styles d'impression * /
@media print {

  corps {
    marge: 0;
    couleur: # 000;
    couleur de fond: #fff;
  }

}

Test de la sortie de l'imprimante

Il n'est pas nécessaire de tuer les arbres et d'utiliser une encre excessivement chère chaque fois que vous voulez tester votre mise en page d'impression! Les options suivantes reproduisent les styles d'impression à l'écran:

Aperçu avant impression

L'option la plus fiable est l'option d'aperçu avant impression de votre navigateur. Cela montre comment les sauts de page seront traités en utilisant votre format de papier par défaut.

Vous pouvez également enregistrer ou prévisualiser la page en l'exportant au format PDF.

Outils de développement

Les DevTools ( F12 ou Cmd / Ctrl + Maj + I ) peuvent émuler des styles d'impression, bien que les sauts de page ne soient pas affichés.

Dans Chrome, ouvrez les outils de développement et sélectionnez Plus d'outils puis Rendu dans le menu d'icônes à trois points en haut à droite. Modifiez Émuler le support CSS en imprimez au bas de ce panneau.

Dans Firefox, ouvrez les outils de développement et cliquez sur l'icône Basculer la simulation de support d'impression . dans le volet de style de l'onglet Inspecteur :

Hack Your Media Attribute

En supposant que vous utilisez une balise pour charger le CSS de l'imprimante, vous pourriez changer temporairement l'attribut media en écran :

Encore une fois, cela ne révélera pas les sauts de page. N'oubliez pas de restaurer l'attribut à media = "print" une fois les tests terminés.

Supprimer les sections inutiles

Avant de faire quoi que ce soit d'autre, supprimez et réduisez le contenu redondant avec l'affichage : aucun; . Les sections inutiles types sur papier peuvent inclure des menus de navigation, des images de héros, des en-têtes, des pieds de page, des formulaires, des barres latérales, des widgets de médias sociaux et des blocs publicitaires (généralement n'importe quoi dans un iframe ):

 / * print.css * /
en-tête, pied de page, côté, nav, formulaire, iframe, .menu, .hero, .adslot {
  affichage: aucun;
}

Il peut être nécessaire d'utiliser l'affichage : aucun! Important; si la fonctionnalité CSS ou JavaScript affiche des éléments selon des états particuliers de l'interface utilisateur. L'utilisation de ! Important n'est normalement pas recommandée, mais nous pouvons justifier son utilisation dans un ensemble de base de styles d'imprimante qui remplacent les paramètres par défaut de l'écran.

Linéariser la mise en page

Cela me fait mal de le dire, mais Flexbox et Grid jouent rarement bien avec les dispositions d'imprimante dans n'importe quel navigateur. Si vous rencontrez des problèmes, envisagez d'utiliser display: block; ou similaire sur les zones de disposition et ajustez les dimensions si nécessaire. Par exemple, définissez largeur: 100%; pour couvrir toute la largeur de la page.

Style d'imprimante

Un style convivial pour l'imprimante peut désormais être appliqué. Recommandations:

• assurez-vous d'utiliser du texte sombre sur fond blanc
• pensez à utiliser une police serif, qui peut être plus facile à lire
• ajustez la taille du texte à 12pt ou plus
• modifiez rembourrages et marges si nécessaire. Les unités standard cm mm ou en peuvent être plus pratiques.

D'autres suggestions incluent…

Adopter les colonnes CSS

Standard A4 et Le papier US Letter peut produire des lignes de texte plus longues et moins lisibles. Pensez à utiliser les colonnes CSS dans les mises en page d'impression. Par exemple:

 / * print.css * /
article {
  largeur de colonne: 17em;
  écart de colonne: 3em;
}

Dans cet exemple, des colonnes seront créées lorsqu'il y aura au moins 37em d'espace horizontal. Il n'est pas nécessaire de définir des requêtes multimédias; des colonnes supplémentaires seront ajoutées sur du papier plus large.

Utiliser des bordures au lieu des couleurs d'arrière-plan

Votre modèle peut avoir des sections ou des zones de légende désignées par des schémas de couleurs plus sombres ou inverses:

Économisez de l'encre en représentant ces éléments avec une bordure:

Supprimer ou inverser des images

Les utilisateurs ne voudront pas imprimer des images et des arrière-plans décoratifs et non essentiels. Vous pouvez envisager une valeur par défaut où toutes les images sont masquées sauf si elles ont une classe print :

 / * print.css * /
* {
  image de fond: aucune! importante;
}

img, svg {
  affichage: aucun! important;
}

img.print, svg.print {
  bloc de visualisation;
  largeur max: 100%;
}

Idéalement, les images imprimées devraient utiliser des couleurs sombres sur un fond clair. Il peut être possible de modifier les couleurs SVG HTML intégrées dans CSS, mais il y aura des situations où vous aurez des bitmaps plus sombres:

Un Un filtre CSS peut être utilisé pour inverser et ajuster les couleurs dans la feuille de style d'impression. Par exemple:

 / * print.css * /
img.dark {
  filtre: inverser (100%) teinte-rotation (180deg) luminosité (120%) contraste (150%);
}

Le résultat:

Ajouter un contenu supplémentaire

Les supports imprimés nécessitent souvent des informations supplémentaires qui ne seraient pas nécessaires à l'écran. La propriété CSS content peut être utilisée pour ajouter du texte aux pseudo-éléments :: avant et :: après . Par exemple, affichez l'URL d'un lien entre crochets après le texte:

 / * print.css * /
a :: après {
  contenu: "(" attr (href) ")";
}

Ou vous pouvez ajouter des messages en impression seule:

 / * print.css * /
main :: après {
  contenu: "Copyright site.com";
  bloc de visualisation;
  alignement du texte: centre;
}

Pour les situations plus complexes, envisagez d'utiliser une classe telle que print sur des éléments qui ne devraient être visibles qu'une fois imprimés. Par exemple:

 Article imprimé à 13 h 23 le 5 septembre 2020. Veuillez consulter https://site.com/page pour la dernière version. 

Le CSS:

 / * masqué à l'écran * /
.impression {
  affichage: aucun;
}

@media print {

  / * visible lors de l'impression * /
  .impression {
    bloc de visualisation;
  }

}

Remarque: la plupart des navigateurs affichent l'URL et la date / heure actuelle sur l'en-tête et / ou le pied de page de la page imprimée, il est donc rarement nécessaire de générer ces informations dans le code.

Sauts de page

Le CSS3 Les propriétés break-before et break-after vous permettent de contrôler le comportement des sauts de page, de colonne ou de région avant et après un élément. La prise en charge est excellente mais les anciens navigateurs peuvent utiliser les propriétés similaires page-break-before et page-break-after .

Les éléments suivants les valeurs break-before et break-after peuvent être utilisées:

• auto : la valeur par défaut - une pause est autorisée mais pas forcée
• éviter : éviter un saut de page, de colonne ou de région
• éviter-page : éviter un saut de page
• page : forcer un saut de page
• toujours : un alias de la page
• à gauche : la page force se rompt donc la page suivante est une page gauche
• à droite : page force saute donc la page suivante est une page de droite

Exemple: force un saut de page immédiatement avant n'importe quel en-tête

:

 / * print.css * /
h1 {
  pause avant: toujours;
}

Remarque: méfiez-vous de l'utilisation excessive des sauts de page. Idéalement, la sortie de l'imprimante doit utiliser le moins de pages possible.

La propriété break-inside (et l'ancienne page-break-inside ) spécifie si un saut de page est autorisé à l'intérieur d'un élément. Les valeurs généralement prises en charge:

• auto : la valeur par défaut - une interruption est autorisée mais pas forcée
• éviter : éviter une interruption interne si possible
• éviter -page : évitez si possible un saut de page interne

Cela peut être préférable à la spécification de sauts de page, car vous pouvez utiliser le moins de papier possible tout en évitant les sauts de page dans les données groupées telles que les tableaux ou les images:

 / * print.css * /
table, img, svg {
  effraction: éviter;
}

La propriété widows spécifie le nombre minimum de lignes dans un bloc qui doit être affiché en en haut d'une page. Imaginez un bloc avec cinq lignes de texte. Le navigateur souhaite faire un saut de page après la ligne quatre afin que la dernière ligne apparaisse en haut de la page suivante. Définition de veuves: 3; saute sur ou avant la ligne deux, donc au moins trois lignes sont reportées à la page suivante.

La propriété orphelins est similaire à widows ] sauf qu'elle contrôle le nombre minimum de lignes à afficher au bas d'une page.

La propriété box-decoration-break contrôle les bordures des éléments sur les pages. Lorsqu'un élément avec une bordure a un saut de page interne:

• tranche : par défaut, divise la mise en page. La bordure supérieure est affichée sur la première page et la bordure inférieure est affichée sur la deuxième page.
• clone : reproduit la marge, le remplissage et la bordure. Les quatre bordures sont affichées sur les deux pages.

Enfin, CSS Paged Media ( @page ) a une prise en charge limitée du navigateur mais fournit un moyen de cibler des pages permettant de définir des marges ou des sauts alternatifs:

 / * print.css * /

/ * cible toutes les pages * /
@page {
  marge: 2 cm;
}

/ * cible uniquement la première page * /
@page: premier {
  marge supérieure: 6 cm;
}

/ * cible les pages gauches (paires) uniquement * /
@page: gauche {
  marge droite: 4 cm;
}

/ * cible les pages de droite (numéros impairs) uniquement * /
@page: droite {
  marge gauche: 4 cm;
}

Les propriétés de saut de page CSS peuvent être placées dans vos styles d'écran ou d'impression car ils n'affectent que l'impression, mais je vous recommande de les utiliser dans CSS d'impression pour plus de clarté.

sachant que le contrôle des sauts de page n'est guère plus qu'une suggestion pour le navigateur. Il n'y a aucune garantie qu'une interruption sera forcée ou évitée car la mise en page est limitée aux limites du papier.

Douleurs d'impression

Le contrôle sur l'impression des supports Web sera toujours limité et les résultats peuvent varier d'un navigateur à l'autre. Cela dit:

• les feuilles de style imprimables peuvent être adaptées à n'importe quel site
• la plupart des styles d'imprimante fonctionneront dans la plupart des navigateurs
• les styles d'impression n'affecteront ni ne casseront les fonctionnalités existantes
• les coûts de développement

L'ajout de quelques sauts de page et la suppression de sections inutiles raviront les utilisateurs et élèveront votre site au-dessus des concurrents. Ajoutez-le à votre liste de choses à faire!

Craig est un consultant Web britannique indépendant qui a créé sa première page pour IE2.0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures pratiques HTML5 . Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et des organisations, notamment le Parlement britannique, le Parlement européen, le Département de l'énergie et du changement climatique, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .