CSS : créer une feuille d’impression pour votre site

Une fois que l’on a fini de designer son site pour que tout le monde puisse le consulter et admirer vos talents d’artiste vient le moment de penser à la manière dont votre site est rendu lors de l’impression.

En effet, votre site n’est jamais imprimé sur une feuille tel que vous le voyez à l’écran. Si votre design utilise les feuilles de style (CSS), il suffit d’en créer une destinée à l’impression.

Le principe

Faîtes une copie de la feuille CSS de votre site et nommez-la print.css par exemple.

Décidez ensuite quelles sont les parties qui sont superflues lors d’une impression papier : les menus peuvent être ignorés, tout comme les images de fond :

/* désactivation des menus pour l'impression */
.menu-right {
	display : none;
}
.menu-left {
	display : none;
}
Code language: CSS (css)

Ensuite, il est important de fixer tous les éléments flottants : si vous laissez votre contenu dans un conteneur flottant (en utilisant la propriété float) seule la première page sera imprimée et le reste sera superbement ignoré.

Remplacez donc tous les float des conteneurs que vous voulez imprimer par float: none !important;.

/* fixation du contenu flottant */
/* supprime le bug qui imprime la 1ère page seulement */
.columns-float {
     float: none !important;
     width: 100%;
}
Code language: CSS (css)

Edition CSS live: l’extension WebDeveloper pour Firefox

Si vous utilisez Firefox, je recommande vivement l’utilisation de l’extension WebDeveloper pour mener à bien tous les travaux sur les feuilles du style : vous pouvez visualisez vos modifications en direct, sans avoir à uploader vos modifications par FTP. Et vous pouvez voir le rendu de votre CSS d’impression en un clic. Bonne impression !

Remerciements

Je tiens à remercier les différents visiteurs qui m’ont informé que la CSS d’impression de SkyMinds.Net était défectueuse et n’imprimait que la première page des articles.

C’est cette correction de conteneurs flottants qui a inspiré la rédaction de cet article, en espérant que cela aide quelques personnes.