Un guide sur l'état des feuilles de style imprimées en 2018

Des documents de référence de toutes sortes sont également souvent imprimés. Pour beaucoup de gens, être capable de prendre des notes sur des copies papier est la meilleure façon d'apprendre. Encore une fois, cela signifie que l'information est accessible 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 du papier, alors qui sommes-nous à discuter?

Pourquoi cette page serait-elle imprimée?

Une bonne question à se poser quand on décide du contenu à inclure ou cacher dans la feuille de style est: 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 emmènent avec eux lorsqu'ils achètent 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 qu'ils aimeraient qu'un reçu ou une facture soit imprimé (ou imprimé au format PDF) afin de le stocker dans les comptes, soit sur papier, soit par voie électronique.

Considérant que l'utilisation du document imprimé peut vous aider à produire la version de votre contenu qui est la plus utile dans le contexte dans lequel se trouve l'utilisateur lorsqu'il fait référence à cette impression

Workflow

Une fois que nous avons décidé d'inclure des 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.

Ajouter des styles d'impression à une page

ces règles CSS sont pour quand le document est imprimé. Pour ce faire, vous pouvez lier une feuille de style supplémentaire à l'aide de l'élément .

Cette méthode conserve vos styles d'impression distincts de tout ce que vous pouvez considérer comme plus ordonné, mais qui a des inconvénients.

La feuille de style liée crée une requête supplémentaire au serveur. En outre, cette belle séparation des styles d'impression des autres styles peut avoir un inconvénient. Bien que vous puissiez prendre soin de mettre à jour les styles avant de les mettre en ligne, la feuille de style peut souffrir d'être hors de vue et donc hors de l'esprit, devenant inutile à mesure que les fonctionnalités sont ajoutées au site sans être reflétées dans les styles d'impression.

La méthode alternative pour inclure des styles d'impression est d'utiliser @media de la même manière que vous incluez CSS pour certains points d'arrêt dans votre conception responsive. Cette méthode conserve tous les CSS ensemble pour une fonctionnalité. Styles pour les points d'arrêt étroits à larges et les styles pour l'impression. À côté des requêtes de fonctionnalités avec @supports cela encourage une méthode de développement qui garantit que tout le CSS pour une caractéristique de conception est conservé et maintenu ensemble.

 @media print {
    
} 

Écrasement de l'écran CSS ou création de règles séparées

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

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

 @media screen {
    
} 

Sur cette note, si vous utilisez Media Queries pour votre Responsive Design, alors vous pouvez les avoir écrit pour l'écran.

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

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

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

les 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 modèle créé devra avoir une version imprimée équivalente. De cette façon, vous donnez la visibilité aux styles d'impression en tant que citoyen de premier plan de votre système de conception.

Principes de CSS pour impression

Quand il s'agit de créer le CSS pour l'impression, il y a trois choses pour te faire faire. Vous voudrez vous cacher, 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 vouloir ajuster les polices ou d'autres éléments de votre page pour les optimiser pour l'impression. Jetons un coup d'œil à ces techniques

Masquage du contenu

Dans CSS, la méthode pour masquer le contenu et empêcher la génération de boîtes consiste à utiliser la propriété display avec une valeur de none . .boîte {
  affichage: aucun;
}

En utilisant display: none va réduire 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 masquer ceci lors de l'impression est d'afficher : aucun sur ul .

Les choses que vous pourriez vouloir cacher sont des images qui seraient inutiles lors de l'impression, la navigation, les panneaux publicitaires et les zones de la page qui affichent des liens vers des contenus connexes et ainsi de suite. Se reporter à la question de savoir pourquoi un utilisateur pourrait imprimer la page peut vous aider à décider de ce qu'il faut supprimer.

Insérer du contenu

Il peut y avoir du contenu à afficher lors de l'impression de la page. Vous pouvez avoir du contenu défini sur display: none dans une feuille de style d'écran et l'afficher dans votre feuille de style d'impression. En outre, vous pouvez cependant utiliser CSS pour exposer le contenu qui n'est pas normalement affiché à l'écran. Un bon exemple de ceci serait l'URL d'un lien dans le document. Dans votre document d'écran, un lien afficherait normalement le texte du lien qui peut ensuite être cliqué pour visiter cette nouvelle page ou un site Web externe. Lorsque les liens imprimés ne peuvent pas être suivis, cependant, il pourrait être utile que le lecteur puisse voir l'URL au cas où ils souhaiteraient visiter le lien plus tard.

Nous y parvenons en utilisant le contenu généré par CSS. 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 chaîne de texte simple 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 cette information."

 .wrapper :: after {
  contenu: "Veuillez consulter www.mysite.com pour la dernière version de cette information.";
} 

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

 a [href]: après {
  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 quelques autres conseils utiles comme celui-ci dans l'article, " J'ai complètement oublié les feuilles de style d'impression ", écrit par Manuel Matuzovic

Advanced Print Styling

Soigneusement sur une page, vous devriez être en mesure de 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 si elle contient des éléments tels que des tableaux ou des figures), vous pouvez constater que les éléments tombent sur de nouvelles pages de manière sous-optimale. Vous pouvez également vouloir contrôler les choses sur la page elle-même, par ex.

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

Paged Media

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 disposées pour contenir du contenu fragmenté dans une présentation paginée. Il ajoute des fonctionnalités pour contrôler les marges, la taille et l'orientation des pages et les en-têtes et pieds de page, et étend le contenu généré pour activer la numérotation des pages et les en-têtes / pieds de page. "

s'il y a plus de contenu, on fait défiler pour le voir. Il n'y a aucun concept d'être divisé en pages individuelles. Dès que nous imprimons, nous produisons sur une page de taille fixe, décrite dans la spécification comme un support paginé . La spécification Paged Media ne traite pas de la fragmentation du contenu entre les pages, nous y reviendrons plus tard. Au lieu de cela, il regarde les caractéristiques 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 visons @page et que nous écrivons CSS pour être utilisé par la page. Un exemple simple serait de changer la marge sur toutes les pages créées lorsque vous imprimez votre document.

 @page {
  marge: 20px;
} 

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

 @page: first {
  marge supérieure: 250pt;
} 

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

 @page: left {
  marge-droite: 200pt;
}
    
@page: right {
  marge gauche: 200pt;
} 

La spécification définit la possibilité d'insérer du contenu dans les marges créées, mais aucun navigateur ne semble prendre en charge cette fonctionnalité. Je décris ceci 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

Lorsque le module Paged Media traite les zones de page elles-mêmes, le CSS Fragmentation Module détaille la rupture de contenu entre les fragments . Un fragmentainer (ou fragment container ) est un conteneur qui contient une partie d'un flux fragmenté. C'est un flux qui, lorsqu'il arrive à un point où il déborderait, se brise dans un nouveau conteneur.

Les contextes dans lesquels vous allez rencontrer la fragmentation sont actuellement dans des médias paginés, donc lors de l'impression, et aussi lors de l'utilisation de Multiple- la disposition des colonnes et votre contenu se répartit entre les zones de colonnes. La spécification Fragmentation définit diverses règles de rupture, les propriétés CSS qui vous donnent un certain contrôle sur la façon dont le contenu se divise en 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 que l'on puisse utiliser actuellement.

Et, en ce qui concerne les navigateurs, la fragmentation est actuellement un problème. Les tables de compatibilité du navigateur pour chaque propriété sur MDN semblent être précises quant à la prise en charge, cependant l'utilisation de ces propriétés sera testée avec soin.

Anciennes propriétés de CSS2

En plus de la ] break - * propriétés de CSS Fragmentation niveau 3, nous avons page-break - * propriétés qui proviennent de CSS2. En termes de spécifications, elles ont été remplacées par les nouvelles propriétés break - * car elles sont plus génériques et peuvent être utilisées dans différents contextes. Il n'y a pas beaucoup de différence entre une page et une pause multicolore. Cependant, en termes de support du navigateur, il existe un meilleur support 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 propriétés les plus récentes doivent alias les plus anciens plutôt que de les supprimer

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

break-before & break-after

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

• auto
• éviter
• avoid-page
• page
• left
• right
• right
• recto
• ] verso
• colonne avoid
• avoid-region
• région

Les anciennes propriétés de page-break-before et page-break-after

• auto
• toujours
• éviter
• left
• right
• hériter

Toujours provoquer un saut de page avant une h2 ]vous utiliseriez ce qui suit:

 h2 {
  pause avant: page;
} 

Pour éviter qu'un paragraphe soit détaché de l'en-tête qui le précède immédiatement:

 h2, h3 {
  pause-après: éviter-page;
} 

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

 h2 {
  page-break-before: toujours;
} 

Pour éviter qu'un paragraphe soit détaché de l'en-tête qui le précède immédiatement:

 h2, h3 {
  page-break-after: éviter;
} 

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

break-inside

Cette propriété contrôle les ruptures dans les boîtes et accepte les valeurs:

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

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

Par exemple, vous avez peut-être un chiffre ou un tableau et vous ne voulez pas que la moitié se retrouve sur une page et l'autre moitié sur une autre page.

 figure {
  cambriolage: éviter;
} 

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

 figure {
  page-break-inside: éviter;
} 

Sur MDN:

Orphelins Et Veuves

La ​​spécification de Fragmentation définit également les propriétés orphelines et veuves . La propriété orphelins définit combien de lignes peuvent être laissées en bas de la première page lorsque le contenu d'un paragraphe est divisé entre deux pages. La propriété widows définit combien de lignes peuvent rester 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 {
  orphelins: 2;
  veuves: 2;
} 

Les propriétés widows et orphelines sont bien supportées (l'implémentation de navigateur manquante étant Firefox).

Sur MDN:

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 remplissage rompent ou enveloppent le contenu. Les valeurs acceptées sont:

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 que cela va imprimer est que la bordure continuera sur chaque page, cependant, elle ne s'enrouleront qu'à la fin du contenu. Nous obtenons donc une pause avant d'aller à la page suivante et de continuer.

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

Actuellement, cela ne fonctionne que pour Paged Media dans Firefox, et vous pouvez en savoir plus sur box-decoration-break sur MDN

Browser Support

Comme déjà mentionné, le support 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, vous serez probablement déçu. Vous pouvez consulter les bugs Chrome pour Flexbox et pour Grid .

La meilleure suggestion que je peux faire maintenant est de garder vos feuilles de style imprimées 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 peuvent ne pas fonctionner dans tous les navigateurs. Et, si vous trouvez le support du navigateur frustrant, soulevez ces problèmes avec les navigateurs ou votez pour des problèmes déjà soulevés. La fragmentation, en particulier, devrait être traitée comme une suggestion plutôt que comme une commande, même si elle est supportée. Il serait possible d'être si précis sur où et quand vous voulez que les choses se brisent qu'il est presque impossible de mettre en page les pages. Test de feuilles de style d'impression

Test de feuilles de style d'impression

Le test de feuilles de style d'impression peut être fastidieux, car il nécessite généralement l'utilisation de l'aperçu avant impression ou de l'impression répétée sur un PDF. Cependant, le navigateur DevTools a rendu cela un peu plus facile pour nous. Firefox et

Firefox

Ouvrez la barre d'outils Developer puis tapez media emulate print à l'invite

Chrome

Ouvrez DevTools, cliquez sur l'icône à trois points, puis sélectionnez "Autres outils" et "Rendu". Vous pouvez ensuite sélectionner imprimer sous Emulate CSS Media.

Cela ne sera utile que pour tester les modifications apportées à la mise en page CSS, au contenu caché ou généré. Il ne peut pas vous aider avec la fragmentation – vous aurez besoin d'imprimer ou d'imprimer en PDF pour cela. Cependant, cela vous épargnera quelques allers-retours vers l'imprimante et vous aidera à vérifier que vous développez de nouvelles parties du site que vous cachez encore et que vous montrez les bonnes choses.

Que faire lorsqu'une feuille de style n'est pas imprimée? Assez

Dans un monde idéal, les navigateurs auraient mis en œuvre plus de spécifications Paged Media lors de l'impression directe à partir du navigateur, et la fragmentation serait mise en œuvre de manière plus cohérente de manière cohérente. Cela vaut certainement la peine de soulever 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 de priorité basse pour être corrigées.

Si vous avez besoin d'un haut niveau de support d'impression et que vous voulez utiliser CSS, alors vous devriez utiliser une impression Agent d'utilisateur spécifique, tel que Prince . Je détaille comment vous pouvez utiliser CSS pour mettre en forme des livres lors de la sortie de Prince dans mon article " Concevoir pour imprimer avec CSS ."

Prince est également disponible pour installer sur votre serveur en utilisant CSS sur le web, cependant, il vient à un prix élevé. Une alternative est un serveur comme DocRaptor qui offre une API au-dessus du moteur de rendu Prince.

Il existe des générateurs HTML et CSS-to-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 quand 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 supporte 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 Imprimez sur le site print-css.rocks .

Autres ressources

Étant donné que l'impression à partir de CSS a 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 une astuce technique utile, ajoutez-le aux commentaires ci-dessous.

• " J'ai totalement oublié les feuilles de style d'impression ," Manuel Matuzovic, UX Collective
• " Imprimer la feuille de style Approches: Blacklist vs Whitelist "Chris Coyier, CSS-Tricks
• " La feuille de style d'impression parfaite "Andreas Hecht, Noupe
• " Comment mettre en place un Imprimer la feuille de style "Christian Krammer, Magazine Smashing
• " 5 trucs et astuces puissants pour imprimer des feuilles de style "Dudley Storey, Magazine Smashing

(il) [19659154]

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)