Un guide sur l'état des feuilles de style d'impression en 2018

Aujourd'hui, j'aimerais revenir sur un sujet qui a déjà été traité dans Smashing Magazine dans le passé - le sujet de la feuille de style d'impression. Dans ce cas, je parle d'imprimer des pages directement depuis le navigateur. C'est une expérience qui peut être frustrante avec l'impression d'énormes images (et même de publicités). Parfois, cependant, cela ajoute un peu de plaisir lorsqu'une page bien optimisée sort de l'imprimante en utilisant un minimum d'encre et de papier et en s'assurant que tout est facile à lire.

Cet article explorera comment nous pouvons créer au mieux cette deuxième expérience. Nous verrons comment nous devrions inclure les styles d'impression dans nos pages Web et examinerons les spécifications qui prennent vraiment tout leur sens une fois imprimées. Nous découvrirons l'état de la prise en charge des navigateurs et la meilleure façon de tester nos styles d'impression. Je vous donnerai ensuite quelques indications sur ce qu'il faut faire lorsqu'une feuille de style d'impression ne suffit pas pour vos besoins d'impression.

Emplacements clés pour la prise en charge de l'impression

Si vous n'avez toujours pas implémenté de styles d'impression sur votre site, il existe quelques endroits clés où une expérience d'impression solide sera utile à vos utilisateurs. Par exemple, de nombreux utilisateurs voudront imprimer une page de confirmation de transaction après avoir effectué un achat ou une réservation, même si vous enverrez des détails par e-mail.

Toute information que votre visiteur pourrait vouloir utiliser lorsqu'il est loin de son ordinateur est également un bon candidat pour une feuille de style d'impression. La chose la plus courante que j'imprime, ce sont les recettes. Je pourrais les charger sur mon iPad, mais il est souvent plus pratique d'imprimer simplement la recette pour la mettre sur la porte du réfrigérateur pendant que je cuisine. D'autres exemples de ce type pourraient être des directions ou des informations de voyage. Lorsque vous voyagez à l'étranger et que vous n'avez pas toujours accès aux données, ces impressions peuvent être inestimables.

Des documents de référence de toutes sortes sont également souvent imprimés. Pour de nombreuses personnes, être capable de prendre des notes sur des copies papier est la meilleure façon d'apprendre. Encore une fois, cela signifie que les informations sont accessibles dans un format hors ligne. Il est facile pour nous de nous demander pourquoi les gens veulent imprimer des pages Web, cependant, notre travail consiste souvent à rendre le contenu accessible - dans le meilleur format pour nos visiteurs. Si ce meilleur format est imprimé sur papier, alors qui sommes-nous pour discuter ?

Pourquoi cette page serait-elle imprimée ?

Une bonne question à se poser au moment de décider du contenu à inclure ou à masquer dans la feuille de style d'impression est la suivante : "Pourquoi l'utilisateur imprime-t-il cette page ?" Eh bien, il y a peut-être une recette qu'ils aimeraient suivre lorsqu'ils cuisinent dans la cuisine ou qu'ils aimeraient emporter avec eux lorsqu'ils font leurs courses pour acheter des ingrédients. Ou ils aimeraient imprimer une page de confirmation après l'achat d'un billet comme preuve de réservation. Ou peut-être aimeraient-ils qu'un reçu ou une facture soit imprimé (ou imprimé au format PDF) afin de le stocker dans les comptes sous forme papier ou électronique.

Considérer l'utilisation du document imprimé peut vous aider à produire une version imprimée de votre contenu qui est la plus utile dans le contexte dans lequel l'utilisateur se trouve lorsqu'il se réfère à cette impression.

Flux de travail

Une fois que nous avons décidé d'inclure les styles d'impression dans notre CSS, nous devons les ajouter à notre flux de travail pour nous assurer que lorsque nous apportons des modifications à la mise en page, nous incluons également ces modifications dans la version imprimée.

Ajout de styles d'impression à une page

Pour activer une "feuille de style d'impression", nous disons au navigateur à quoi servent ces règles CSS lorsque le document est imprimé. Une méthode consiste à lier une feuille de style supplémentaire à l'aide de l'élément <link> .

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

Cette méthode sépare vos styles d'impression de tout ce que vous pourriez considérer comme plus ordonné, mais cela a des inconvénients.

La feuille de style liée crée une demande supplémentaire au serveur. De plus, cette séparation agréable et nette des styles d'impression des autres styles peut avoir un inconvénient. Bien que vous puissiez prendre soin de mettre à jour les styles séparés avant de les mettre en ligne, la feuille de style peut souffrir du fait qu'elle est hors de vue et donc hors d'esprit - devenant finalement inutile car des fonctionnalités sont ajoutées au site mais ne se reflètent pas dans les styles d'impression.

La méthode alternative pour inclure des styles d'impression consiste à utiliser @media de la même manière que vous incluez CSS pour certains points d'arrêt dans votre conception réactive. Cette méthode conserve tous les CSS ensemble pour une fonctionnalité. Styles pour les points d'arrêt étroits à larges et styles pour l'impression. Parallèlement aux requêtes de fonctionnalités avec @supports , cela encourage une méthode de développement qui garantit que tous les CSS d'une fonctionnalité de conception sont conservés et maintenus ensemble.

 @media print { }

Écraser l'écran CSS ou créer des règles distinctes

La plupart du temps, vous constaterez probablement que le CSS que vous utilisez pour l'affichage à l'écran fonctionne pour l'impression avec quelques petits ajustements. Par conséquent, vous n'avez qu'à écrire du CSS pour l'impression, pour les modifications apportées à ce CSS de base. Vous pouvez écraser une taille de police ou une famille, tout en laissant d'autres éléments dans le CSS seul.

Si vous voulez vraiment avoir des styles complètement séparés pour l'impression et commencer avec une ardoise vierge, vous devrez envelopper le reste des styles de votre site dans une requête multimédia avec le mot-clé screen.

 @media screen { }

Sur cette note, si vous utilisez Media Queries pour votre conception réactive, vous les avez peut-être écrites pour l'écran.

 @media screen and (min-width: 500px) { }

Si vous souhaitez que ces styles soient utilisés lors de l'impression, vous devez supprimer le mot-clé screen . Dans la pratique, cependant, je trouve souvent que si je travaille « mobile d'abord », la mise en page mobile à colonne unique est un très bon point de départ pour ma mise en page imprimée. En ayant les requêtes multimédias qui apportent les mises en page plus complexes pour l'écran uniquement, j'ai beaucoup moins d'écrasement des styles à faire pour l'impression.

Ajoutez vos styles d'impression à vos bibliothèques de motifs et à vos guides de style

Pour vous assurer que vos styles d'impression sont considérés comme faisant partie intégrante de la conception du site, ajoutez-les à votre guide de style ou à votre bibliothèque de modèles pour le site si vous en avez un. De cette façon, il y a toujours un rappel que les styles d'impression existent et que tout nouveau motif créé devra avoir une version d'impression équivalente. De cette façon, vous donnez aux styles d'impression une visibilité en tant que citoyen de première classe de votre système de conception.

Principes de base du CSS pour l'impression

Lorsqu'il s'agit de créer le CSS pour l'impression, il y a trois choses que vous êtes susceptible de faire. Vous voudrez masquer et ne pas afficher le contenu qui n'est pas pertinent lors de l'impression. Vous pouvez également ajouter du contenu pour rendre une version imprimée plus utile. Vous pouvez également ajuster les polices ou d'autres éléments de votre page pour les optimiser pour l'impression. Découvrons ces techniques.

Masquage du contenu

En CSS, la méthode pour masquer le contenu et également empêcher la génération de boîtes consiste à utiliser la propriété display avec la valeur none .

 .box { display: none; }

Utiliser display: none réduira l'élément et tous ses éléments enfants. Par conséquent, si vous avez une galerie d'images marquée comme une liste, tout ce que vous auriez à faire pour la masquer lors de l'impression est de définir display: none sur le ul .

Les choses que vous voudrez peut-être masquer sont les images qui seraient inutiles lors de l'impression, la navigation, les panneaux publicitaires et les zones de la page qui affichent des liens vers du contenu connexe, etc. Se référer à la raison pour laquelle un utilisateur peut imprimer la page peut vous aider à décider ce qu'il faut supprimer.

Insertion de contenu

Il peut y avoir du contenu qu'il est logique d'afficher lorsque la page est imprimée. Vous pourriez avoir un ensemble de contenu à display: none dans une feuille de style d'écran et l'afficher dans votre feuille de style d'impression. De plus, cependant, vous pouvez utiliser CSS pour exposer le contenu qui n'est normalement pas affiché à l'écran. Un bon exemple serait l'URL d'un lien dans le document. Dans votre document d'écran, un lien affichera normalement le texte du lien sur lequel vous pourrez ensuite cliquer pour visiter cette nouvelle page ou ce site Web externe. Lorsque les liens imprimés ne peuvent pas être suivis, cependant, il peut être utile que le lecteur puisse voir l'URL au cas où il souhaiterait visiter le lien ultérieurement.

Nous y parvenons en utilisant CSS Generated Content. Le contenu généré vous permet d'insérer du contenu dans votre document via CSS. Lors de l'impression, cela devient très utile.

Vous pouvez insérer une simple chaîne de texte dans votre document. L'exemple suivant cible l'élément avec une classe de wrapper et insère devant lui la chaîne "Veuillez consulter www.mysite.com pour la dernière version de ces informations".

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Vous pouvez insérer des choses qui existent déjà dans le document cependant, un exemple serait le contenu du lien href . Nous ajoutons du contenu généré après chaque instance de a avec un attribut href et le contenu que nous insérons est la valeur de l'attribut href - qui sera le lien.

 a[href]:after { content: " (" attr(href) ")"; }

Vous pouvez utiliser le nouveau sélecteur CSS :not pour exclure les liens internes si vous le souhaitez.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Il y a d'autres conseils utiles comme celui-ci dans l'article "J'ai totalement oublié les feuilles de style d'impression", écrit par Manuel Matuzovic.

Style d'impression avancé

Si votre version imprimée tient parfaitement sur une page, vous devriez pouvoir créer une feuille de style d'impression relativement simplement en utilisant les techniques de la dernière section. Cependant, une fois que vous avez quelque chose qui s'imprime sur plusieurs pages (et en particulier s'il contient des éléments tels que des tableaux ou des figures), vous pouvez constater que les éléments se répartissent sur de nouvelles pages de manière sous-optimale. Vous pouvez également vouloir contrôler des choses sur la page elle-même, par exemple en changeant la taille de la marge.

CSS a un moyen de faire ces choses, cependant, comme nous le verrons, la prise en charge du navigateur est inégale.

Médias paginés

La spécification CSS Paged Media s'ouvre avec la description suivante de son rôle.

« Ce module CSS spécifie comment les pages sont générées et mises en page pour contenir du contenu fragmenté dans une présentation paginée. Il ajoute des fonctionnalités pour contrôler les marges de page, la taille et l'orientation de la page, ainsi que les en-têtes et les pieds de page, et étend le contenu généré pour permettre la numérotation des pages et l'exécution des en-têtes/pieds de page.

L'écran est un média continu ; s'il y a plus de contenu, nous faisons défiler pour le voir. Il n'y a aucune idée qu'il soit divisé en pages individuelles. Dès que nous imprimons, nous sortons sur une page de taille fixe, décrite dans la spécification comme support paginé . La spécification Paged Media ne traite pas de la façon dont le contenu est fragmenté entre les pages, nous y reviendrons plus tard. Au lieu de cela, il examine les fonctionnalités des pages elles-mêmes.

Nous avons besoin d'un moyen de cibler une page individuelle, et nous le faisons en utilisant la règle @page . Ceci est utilisé un peu comme un sélecteur normal, en ce sens que nous ciblons @page puis écrivons le CSS à utiliser par la page. Un exemple simple serait de changer la marge sur toutes les pages créées lorsque vous imprimez votre document.

 @page { margin: 20px; }

Vous pouvez cibler des pages spécifiques avec les sélecteurs de pseudo-classe de diffusion :left et :right . La première page peut être ciblée avec le sélecteur de pseudo-classe :first et les pages blanches causées par des sauts de page peuvent être sélectionnées avec :blank . Par exemple, pour définir une marge supérieure uniquement sur la première page :

 @page :first { margin-top: 250pt; }

Pour définir une marge plus grande sur le côté droit d'une page de gauche et sur le côté gauche d'une page de droite :

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

La spécification définit la possibilité d'insérer du contenu dans les marges créées, cependant, aucun navigateur ne semble prendre en charge cette fonctionnalité. Je décris cela dans mon article sur la création de feuilles de style à utiliser avec des agents utilisateurs spécifiques à l'impression, Designing For Print With CSS.

Fragmentation CSS

Là où le module Paged Media s'occupe des boîtes de page elles-mêmes, le module CSS Fragmentation détaille comment le contenu se brise entre les fragmentainers . Un fragmentainer (ou fragment container ) est un conteneur qui contient une partie d'un flux fragmenté. Il s'agit d'un flux qui, lorsqu'il arrive à un point où il déborderait, fait irruption dans un nouveau conteneur.

Les contextes dans lesquels vous rencontrerez actuellement la fragmentation sont dans les médias paginés, donc lors de l'impression, et également lors de l'utilisation de la mise en page à plusieurs colonnes et de vos sauts de contenu entre les zones de colonne. La spécification Fragmentation définit diverses règles de rupture, des propriétés CSS qui vous donnent un certain contrôle sur la façon dont le contenu se décompose en de nouveaux fragments, dans ces contextes. Il définit également la façon dont le contenu se brise dans la spécification CSS Regions, bien que ce ne soit pas quelque chose d'utilisable pour le moment.

Et, en parlant de navigateurs, la fragmentation est un peu gênante en termes de support pour le moment. Les tableaux de compatibilité des navigateurs pour chaque propriété sur MDN semblent être précis quant à la prise en charge, mais il sera nécessaire de tester soigneusement l'utilisation de ces propriétés.

Anciennes propriétés de CSS2

En plus des propriétés break-* de CSS Fragmentation Level 3, nous avons des propriétés page-break-* qui proviennent de CSS2. En termes de spécifications, celles-ci ont été remplacées par les nouvelles propriétés break-* , car elles sont plus génériques et peuvent être utilisées dans les différents contextes où la rupture se produit. Il n'y a pas beaucoup de différence entre une page et un saut multicol. Cependant, en termes de prise en charge du navigateur, il existe une meilleure prise en charge du navigateur pour les anciennes propriétés. Cela signifie que vous devrez peut-être les utiliser à l'heure actuelle pour contrôler la rupture. Les navigateurs qui implémentent les nouvelles propriétés doivent aliaser les anciennes plutôt que de les supprimer.

Dans les exemples qui suivent, je montrerai à la fois la nouvelle propriété et l'ancienne là où elle existe.

break-before & break-after

Ces propriétés traitent des sauts entre les cases et acceptent les valeurs suivantes, la valeur initiale étant auto. Les quatre dernières valeurs ne s'appliquent pas aux médias paginés, mais plutôt au multicol et aux régions.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

Les anciennes propriétés page-break-before et page-break-after acceptent une plus petite plage de valeurs.

• auto
• always
• avoid
• left
• right
• inherit

Pour toujours provoquer un saut de page avant un élément h2 , vous utiliseriez ce qui suit :

 h2 { break-before: page; }

Pour éviter qu'un paragraphe ne soit détaché du titre qui le précède immédiatement :

 h2, h3 { break-after: avoid-page; }

L'ancienne propriété page-break-* pour toujours provoquer un saut de page avant un h2 :

 h2 { page-break-before: always; }

Pour éviter qu'un paragraphe ne soit détaché du titre qui le précède immédiatement :

 h2, h3{ page-break-after: avoid; }

Sur MDN, trouvez des informations et des exemples d'utilisation pour les propriétés :

• pause avant
• pause après
• saut de page avant
• saut de page après

break-inside

Cette propriété contrôle les ruptures à l'intérieur des cases et accepte les valeurs :

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Comme pour les deux propriétés précédentes, il existe un page-break-inside aliasé de CSS2, qui accepte les valeurs :

• auto
• avoid
• inherit

Par exemple, vous avez peut-être une figure ou un table et vous ne voulez pas qu'une moitié se retrouve sur une page et l'autre moitié sur une autre page.

 figure { break-inside: avoid; }

Et lors de l'utilisation de l'ancienne propriété :

 figure { page-break-inside: avoid; }

Sur MDN :

• effraction
• saut de page à l'intérieur

Orphelins et veuves

La spécification Fragmentation définit également les propriétés orphans et widows . La propriété orphans définit le nombre de lignes pouvant rester au bas de la première page lorsqu'un contenu tel qu'un paragraphe est divisé entre deux pages. La propriété widows définit combien de lignes peuvent être laissées en haut de la deuxième page.

Par conséquent, afin d'éviter de se retrouver avec une seule ligne à la fin d'une page et une seule ligne en haut de la page suivante, vous pouvez utiliser ce qui suit :

 p { orphans: 2; widows: 2; }

Les propriétés widows et orphans sont bien prises en charge (l'implémentation manquante du navigateur étant Firefox).

Sur MDN :

• les veuves
• orphelins

box-decoration-break

La dernière propriété définie dans le module Fragmentation est box-decoration-break . Cette propriété détermine si les bordures, les marges et le rembourrage cassent ou enveloppent le contenu. Les valeurs qu'il accepte sont :

• slice
• clone

Par exemple, si ma zone de contenu a une bordure grise de 10 pixels et que j'imprime le contenu, la manière par défaut d'imprimer est que la bordure continuera sur chaque page, cependant, elle ne s'enroulera qu'à la fin du contenu . Nous faisons donc une pause avant de passer à la page suivante et de continuer.

Si j'utilise box-decoration-break: clone , la bordure et tout rembourrage et marge se termineront sur chaque page, donnant ainsi à chaque page une bordure grise.

Actuellement, cela ne fonctionne que pour les médias paginés dans Firefox, et vous pouvez en savoir plus sur box-decoration-break sur MDN.

Prise en charge du navigateur

Comme déjà mentionné, la prise en charge du navigateur est inégale pour les médias paginés et la fragmentation. En ce qui concerne la fragmentation, un problème supplémentaire est que la rupture doit être spécifiée et implémentée pour chaque méthode de mise en page. Si vous espériez utiliser Flexbox ou CSS Grid dans les feuilles de style d'impression, vous serez probablement déçu. Vous pouvez consulter les bogues Chrome pour Flexbox et pour Grid.

La meilleure suggestion que je puisse faire maintenant est de garder vos feuilles de style d'impression raisonnablement simples. Ajoutez des propriétés de fragmentation, y compris les anciennes propriétés page-break-* ainsi que les nouvelles propriétés. Cependant, acceptez que ceux-ci puissent ne pas fonctionner dans tous les navigateurs. Et, si vous trouvez frustrant le manque de prise en charge des navigateurs, soulevez ces problèmes avec les navigateurs ou votez pour les problèmes déjà soulevés. La fragmentation, en particulier, doit être traitée comme une suggestion plutôt qu'une commande, même lorsqu'elle est prise en charge. Il serait possible d'être si précis sur l'endroit et le moment où vous voulez que les choses se cassent qu'il est presque impossible de mettre en page les pages. Vous devez supposer que parfois vous pouvez obtenir une rupture sous-optimale.

Test des feuilles de style d'impression

Tester les feuilles de style d'impression peut être quelque peu ennuyeux, nécessitant généralement l'utilisation de l'aperçu avant impression ou l'impression répétée d'un PDF. Cependant, les DevTools du navigateur nous ont rendu cela un peu plus facile. Chrome et Firefox permettent d'afficher uniquement les styles d'impression.

Firefox

Ouvrez la barre d'outils du développeur, puis tapez media emulate print à l'invite.

Chrome

Ouvrez DevTools, cliquez sur l'icône des trois points, puis sélectionnez "Plus d'outils" et "Rendu". Vous pouvez ensuite sélectionner l'impression sous Emuler CSS Media.

Cela ne sera utile que pour tester les modifications apportées à la mise en page CSS, au contenu masqué ou généré. Cela ne peut pas vous aider avec la fragmentation - vous devrez imprimer ou imprimer au format PDF pour cela. Cependant, cela vous évitera quelques allers-retours vers l'imprimante et peut vous aider à vérifier au fur et à mesure que vous développez de nouvelles parties du site que vous cachez toujours et que vous affichez les éléments corrects.

Que faire lorsqu'une feuille de style d'impression ne suffit pas

Dans un monde idéal, les navigateurs auraient implémenté davantage la spécification Paged Media lors de l'impression directe à partir du navigateur, et la fragmentation serait implémentée de manière plus approfondie et cohérente. Cela vaut certainement la peine de remonter les bugs que vous trouvez lors de l'impression depuis le navigateur avec les navigateurs concernés. Si nous ne demandons pas que ces choses soient corrigées, elles resteront peu prioritaires à corriger.

Si vous avez besoin d'un haut niveau de prise en charge de l'impression et que vous souhaitez utiliser CSS, vous devez actuellement utiliser un agent utilisateur spécifique à l'impression, tel que Prince. Je détaille comment vous pouvez utiliser CSS pour formater des livres lors de la sortie vers Prince dans mon article "Concevoir pour l'impression avec CSS".

Prince peut également être installé sur votre serveur afin de générer des documents bien imprimés à l'aide de CSS sur le Web, mais son prix est élevé. Une alternative est un serveur comme DocRaptor qui offre une API en plus du moteur de rendu Prince.

Il existe des générateurs HTML et CSS vers PDF open source tels que wkhtmltopdf, mais la plupart utilisent des moteurs de rendu de navigateur pour créer la sortie d'impression et ont donc les mêmes limitations que les navigateurs lorsqu'il s'agit de mettre en œuvre les spécifications Paged Media et Fragmentation. Une exception est WeasyPrint qui semble avoir sa propre implémentation et prend en charge des fonctionnalités légèrement différentes, bien qu'il ne soit en aucun cas aussi complet que quelque chose comme Prince.

Vous trouverez plus d'informations sur les agents utilisateurs pour l'impression sur le site print-css.rocks.

Autres ressources

En raison du fait que l'impression à partir de CSS a vraiment très peu évolué au cours des dernières années, de nombreuses ressources plus anciennes sur Smashing Magazine et ailleurs sont toujours valables. Quelques conseils et astuces supplémentaires peuvent être trouvés dans les ressources suivantes. Si vous avez découvert un flux de travail d'impression ou un conseil technique utile, ajoutez-le aux commentaires ci-dessous.

• "J'ai totalement oublié les feuilles de style d'impression", Manuel Matuzovic, UX Collective
• "Approches de feuille de style d'impression : liste noire contre liste blanche", Chris Coyier, CSS-Tricks
• "La feuille de style d'impression parfaite", Andreas Hecht, Noupe
• "Comment configurer une feuille de style d'impression", Christian Krammer, Smashing Magazine
• "5 trucs et astuces puissants pour les feuilles de style d'impression", Dudley Storey, Smashing Magazine