Comment styliser votre site Web pour l'impression avec CSS

Publié: 2015-08-28

Qu'est-ce que l'imprimé a à voir avec le web ?

La plupart d'entre nous vivons en ligne, obtenant toutes nos informations sur le Web. Nous sommes connectés toute la journée, tous les jours, depuis de nombreux appareils. Vous avez peut-être entendu dire que l'imprimé est mort alors qu'en fait, ce n'est certainement pas vrai ! Nous n'imprimons peut-être pas aussi souvent qu'auparavant, mais il existe des situations où la visualisation de contenu sur un appareil ne remplace tout simplement pas le fait d'avoir une copie papier à consulter. Avez-vous un contenu pratique précieux, des coupons échangeables, des instructions, des exemples de portefeuille ou toute autre chose que les utilisateurs préféreraient voir en version imprimée ? Si tel est le cas, la configuration de règles d'impression personnalisées sur votre site Web contribuera certainement à façonner l'expérience de vos utilisateurs.

Imprimante de bureau

Comment concevoir pour l'impression

Toute la magie est contenue dans CSS en définissant des styles spécifiques à l'impression. Vous trouverez peut-être utile de créer une feuille de style print.css distincte afin qu'elle soit séparée de tous vos autres styles. Gardez à l'esprit que tous les sites n'ont pas de feuille de style d'impression ; il s'agit d'une fonctionnalité et d'une étape supplémentaires dans le processus de développement. Si aucun style d'impression n'est spécifié, les styles par défaut sont utilisés pour l'impression. Nous définirons des styles pour rendre les choses plus efficaces pour l'impression, ce qui remplacera toutes les valeurs par défaut.

N'oubliez pas : vous ne devez jamais apporter de modifications à un site en ligne. Notre application gratuite de développement local, Local, vous aidera à simplifier votre flux de travail et à expérimenter votre site en toute sécurité. Essayez-le aujourd'hui!

La convention de dénomination et les styles spécifiques seront propres à la feuille de style de votre propre projet, mais ces concepts s'appliqueront. Une fois les éléments de base ajoutés, parcourez la feuille de style par défaut de votre site Web et recherchez les situations uniques qui nécessitent des styles d'impression pour garantir la meilleure expérience d'impression.

Considérations sur la couleur et la mise en page

La plupart des gens préfèrent imprimer en noir et blanc en raison du coût de l'encre de couleur. En outre, le contraste est plus élevé lorsque le texte est noir et imprimé sur du papier blanc. Vous connaissez probablement les requêtes multimédias, car elles sont essentielles dans la conception Web moderne et réactive. Les requêtes média sont également nécessaires pour créer des styles d'impression.

C'est ce qui rendra le texte dans le corps noir et éliminera toute couleur d'arrière-plan pour une meilleure impression :

@media print {
body {
color: #000;
background: #fff;
}
}




Il y a de fortes chances que le texte soit imprimé en Times New Roman. Il n'y a rien de mal à cela, mais que se passe-t-il si vous souhaitez spécifier une police différente ? Tout comme vous l'avez fait dans vos styles par défaut, cela peut également être fait en version imprimée. Tant qu'on y est, n'oublions pas la hauteur de ligne.
		




body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Masquer les éléments inutiles


Vous avez probablement été conditionné pour garder l' display: none au minimum, mais cela convient parfaitement à vos styles d'impression. En masquant certains éléments, vous offrez à vos utilisateurs un meilleur moyen d'imprimer et de conserver tout ce qui n'est pas nécessaire sur la copie papier. L'objectif est de leur permettre d'imprimer efficacement le contenu le plus important, et non la page Web exacte.


Il y a des éléments de page qui ne sont pas nécessaires, comme la navigation, le pied de page, la barre latérale et les images d'arrière-plan, c'est donc là que notre display: none sera utile.
		




@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Les articles sont souvent imprimés, il est donc bon que chaque article commence sur une page distincte. Il est beaucoup plus facile pour l'utilisateur d'organiser ses impressions si les informations clés sont regroupées et non réparties sur plusieurs pages.


En ajoutant ceci à votre feuille de style d'impression, les articles commenceront toujours sur une nouvelle page :


article {
page-break-before: always;
}




Garder les listes non ordonnées ensemble sur la même page est également une excellente idée :
		




ul {
page-break-inside: avoid;
}




Allons un peu plus loin et faisons de même pour les en-têtes, les images, les blocs de citations, les tableaux et les autres éléments de liste :


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




C'est ici que l'espacement peut vraiment être ajusté pour les impressions. Ce n'est pas trop souvent que vous voyez des centimètres dans la conception Web, mais cela fonctionne très bien pour déterminer les bordures de la page. La règle @page est la façon dont nous allons cibler l'espacement. Cet exemple permettra d'avoir 2 cm autour de toutes les bordures. Cette mesure peut être personnalisée pour permettre plus ou moins d'espace. Par exemple, vos utilisateurs voudront peut-être prendre des notes et prévoir une marge plus importante serait utile.
		




@page {
margin: 2cm;
}




Si les pages sont destinées à être imprimées et placées dans un classeur, n'oubliez pas qu'il est possible d'ajuster les marges pour chaque autre page. La page de gauche correspond aux pages 1, 3, 5… et la page de droite correspond aux pages 2, 4, 6…


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




La personnalisation de la première page est utile dans certains cas. En utilisant la pseudo-classe :first page, le style de la première page imprimée peut être déterminé :


@page :first {
margin: 1cm 2cm;
}




impression-style-02


L'impression vous stresse ? Voici quelques conseils pour imprimer votre projet comme un pro.
		




Idées d'images et de texte d'introduction


Ceux-ci peuvent ou non s'appliquer à votre site, mais ils sont néanmoins bons à noter.


Pour éviter que les images soient coupées et débordent sur le bord de la page imprimée, l'ajout d'une déclaration d'une largeur maximale empêchera cela.


img {
max-width: 100% !important;
}




Un joli message de bienvenue est un excellent ajout. Le contenu imprimé sera disponible pendant un certain temps, il est donc toujours agréable d'inclure un message ou un rappel amical.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Maintenant que nous avons couvert certaines des bases de la considération de l'impression, il est facile d'intégrer ces idées dans votre feuille de style d'impression. Bien que l'impression ne soit pas ce à quoi nous pensons en fin de compte lorsque nous utilisons le Web, c'est un excellent moyen d'offrir à vos utilisateurs la même expérience exceptionnelle, quelle que soit la manière dont ils accèdent au contenu.