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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



11 commentaires pour “10 conseils pour améliorer votre feuille de style CSS « print »”

  1. katsoura dit :

    Je rajouterais quelques détails.

    S’assurer que la date de l’article s’affiche correctement Ajouter la signification des abréviations (abbr, acronym) mise dans les title Vérifier que le contenu limité dans un espace réduit muni d’un ascenseur soit visible à l’impression (ex avec les morceaux de codes HTML) Interdire les sauts de page après un titre

  2. Victor Brito dit :

    Pour les couleurs et les arrière-plans, il y a encore plus radical : * { color: black !important; background-color: white !important; background-image: none !important; }

  3. katsoura dit :

    Tiens, il y a moyen d’avoir un rendu final sans imprimer ? Ça me permettrait de tester les modifications sans gaspiller du papier.

  4. katsoura dit :

    Ah oui ça marche chez moi aussi. Je pensais que ça ne fonctionnerait pas vu que j’ai pas d’imprimante installée.

  5. Bruno Bichet dit :

    @katsoura — Merci pour ces précisions très utiles en effet, surtout le point n°3 concernant le contenu limité dans un espace réduit auquel je ne pense jamais ^_^v

    @Victor Brito — Effectivement, c’est radical et efficace pour s’assurer que tous les textes seront lisibles à l’impression. J’utiliserais plus systématiquement l’aperçu avant l’impression pour mes tests pour économiser un peu de papier.

  6. […] This post was mentioned on Twitter by Jean-Marie Gall, Stephane Langonnet, Marie-Andrée Lacroix, leGizz, quiboweb and others. quiboweb said: RT @lacroixma 10 conseils pour améliorer votre feuille de style CSS « print » http://tinyurl.com/yf86aav […]

  7. Bayot dit :

    Bonjour Je suis à la recherche de conseils pour créer une feuille de style pour impression et je suis retombé sur votre site, ceci dit il me reste encore quelques soucis à régler : les spry, en effet comment pourrai je faire pour imprimer un menu accordéon, ou un menu à onglets, pour ce faire il faut que le css « print » permette de laisser le menu ouvert intégralement, est ce possible? Merci par avance de votre aide. Cordialement.

  8. Jeune gay dit :

    C’est vrai mais on y pense jamais à la feuille de style print ^^

  9. Jeune gay dit :

    c’est vrai qu’on y pense jamais à la feuille de style print merci en tout cas ^^



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site