Une feuille de styles de base pour le media print

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (49805 lectures)
Tags : css, web, reset, print, impression, framework, media

Imprimante

Nous avons parfois la fâcheuse habitude de penser que le Web n’est bon à être restitué que sur un écran d’ordinateur. Pourtant, un grand nombre de documents web et d’informations en ligne sont parfaitement adaptés au médium d’impression. Non seulement pour faciliter leur consultation, les transmettre, mais aussi pour les archiver.

Pour vous faciliter la tâche et ne plus la négliger, je vous propose une feuille de style dédiée à l'impression qui condense bonnes pratiques et astuces.

Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}.

L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes (marges, couleurs, contrastes, tailles, gestion des sauts de pages et des veuves et orphelines), que vous pourrez adapter à vos convenances ou besoins personnels.

body {
  width: auto!important;
  margin: auto!important;
  font-family: serif;
  font-size: 12pt;
  background-color: #fff!important;
  color: #000!important;
}
p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
  color: #000!important;
  margin: auto!important;
}
.print {
  display: block; /* affichage des éléments de classe print */
}
p, blockquote {
  orphans: 3; /* pas de ligne seule en bas */
  widows: 3; /* pas de ligne seule en haut */
}
blockquote, ul, ol {
  page-break-inside: avoid; /* pas de coupure dans ces élements */
}
h1 {
  page-break-before: always; /* chaque titre commence sur une nouvelle page */
}
h1, h2, h3, caption {
  page-break-after: avoid; /* pas de saut après ces éléments */
}
a {
  color: #000!important;
  text-decoration: underline!important;
}
a[href]:after {
  content: " (" attr(href) ")"; /* affichage des URL des liens */
}

Attention Pour rappel, un certain nombre de propriétés sous-citées ne sont reconnues que sur Opera ou à partir d’Internet Explorer 8 et Firefox 4, mais ne demeurent pas bloquantes pour les retardataires.

Si vous voulez aller encore plus loin, sachez qu'un projet de framework CSS minimaliste et collaboratif a été créé et est hébergé sur GitHub, il se nomme KNACSS.

Commentaires

Sventovit a dit le

Excellent ! Je ne savais pas pour les lignes veuves et orphelines. 5 yous.

Pour les URL relatives je rajoute le nom du domaine. Par exemple :
a:[href^="/"]:after{content:" http://normandie-web.hiseo.fr" attr(href... ">"}

Nico3333fr a dit le

Je me permets de compléter ces bonnes infos avec ceci : http://openweb.eu.org/articles/maitriser_impr... ;)

JackNUMBER a dit le

Merci pour cette bonne base de CSS pour les impressions.

Darklg a dit le

Attention toutefois, pour les malheureux qui comme moi utilisent toujours un H1 en haut de document :
body > h1, body > header > h1 {page-break-before: avoid;}

Sinon, gare à l'impression d'une page blanche en début de document !

speedfightor a dit le

Intéressant merci !!

Patidou a dit le

Petite incohérence: tu définis des veuves et des orphelines pour blockquote et puis après tu interdis le page-break-inside. ;-)

britanicus75 a dit le

J'aime bien l'affichage des URL.

Raphael a dit le

@Patidou : en fait, les veuves et orphelines indiquent qu'il faut *au-moins* 3 lignes soudées, donc je ne vois pas où est l'incohérence.

doc mcfly a dit le

merci. l'idée des affichages des urls est bonne.

mecho a dit le

Merci pour les astuces.

Pour ma part, en plus des urls à côté des liens, j'ai tendance à proposer la signification des abréviations ainsi que les urls des sources des citations (longues) lorsqu'elles sont renseignées :

abbr[title]:after {content:" (" attr(title) ") "}
blockquote[title]:after {content:" (" attr(cite) ") "}

Spacedementia a dit le

Merci Raphael pour ce petit CSS ! Je ne savais pas que l'on pouvait aussi précisément gérer l'affichage en impression... ;-)