10 conseils pour améliorer votre feuille de style CSS « print »

Les feuilles de style réservées à l’impression sont souvent oubliées alors qu’elles offrent de grands services pour tous ceux qui impriment les pages web pour les consulter plus tard ou simplement pour avoir une meilleure lisibilité si les pages présentent des fonds torturés. Voici l’essentiel en 10 trucs et astuces pour créer une feuille de style CSS réservée à l’impression.

Rappels sur les CSS à l’impression

C’est la valeur `print` de l’attribut `media` de la balise `link` qui déclenche l’application des styles lorsque l’utilisateur lance l’impression d’une page. Cette feuille de style est appellée de la manière suivante :

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

Attention à bien préciser `media= »screen »` à votre CSS principale sous peine de voir la feuille de style print.css hériter des styles réservés à l’affichage :

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Les 10 astuces

1. Supprimer la navigation

#nav, #sidebar {
	display: none;
}

2. Augmenter la largeur du texte à lire

#content {
	width: 100%;
	margin: 0;
	float: none;
}

3. Remettre les backgrounds aux valeurs par défaut

body {
	background: white;
}
#content {
	background: transparent;
}

4. Remettre la couleur des textes par défaut

#author {
	color: #111;
}

5. Afficher la destination des liens

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

6. Faites ressortir des liens présents dans le texte

a:link {
	font-weight: bold;
	text-decoration: underline;
	color: #06c;
}

7. Utiliser des tailles de polices cohérentes avec une imprimante

p {
	font-size: 12pt;
}

8. Modifier les polices de caractère

body {
	font-family: Georgia, 'Times New Roman', serif;
}

9. Penser à gérer l’affichage des commentaires s’ils sont nombreux

#comments {
	page-break-before: always;
}

10. Afficher un message à l’impression uniquement

#printMsg {
	display: block;
}

D’après l’article 10 Tips for Better Print Style Sheets de Pieter Beulque paru sur Webdesigner Depot qui contient de nombreuses explications et des exemples visuels « avant après » l’application d’une CSS destinée à l’impression.