pt
Moulé à la louche depuis 1999
Les trucs qui m'énervent... et je vais pas prendre de pincettes
Internet, informatique, logiciel libre, économie, politique, vie courante et tout le reste...

Des feuilles de style pour l'impression

Jeudi 05 mai 2011

Pourquoi tant de sites web oublient-ils de faire une feuille de style CSS spécifique pour l'impression ?

Quand on veut imprimer un article, on se fout bien du bandeau de navigation, des colonnes de news, de la charte, des "liens similaires" ou du nuage de mots. On veut juste l’article.

Les CSS permettent de créer des feuilles de style qui ne s'appliquent qu'à l'impression, permettant de masquer certains éléments ou d'en afficher d'autres. Par exemple, la page que vous êtes en train de lire (sur sebsauvage.net) change quand vous l'imprimez: suppression de l'encart de pub, suppression du calendrier pour naviguer dans les articles, ajout de l'URL de l'article de la page en bas, et remplacement de la police bâton par une police à empattement (ce qui améliore la lisibilité sur support papier). Ce n'est pas grand chose (et il y a encore des choses à améliorer), mais ça rend déjà la version papier un peu plus sympa (Vous pouvez faire "Aperçu avant impression" pour voir ce que ça donne.)

En soit, ça n'est pas très compliqué. Si par exemple vous avez un <div id="toto"> que vous ne voulez pas voir à l'impression, ajoutez juste à votre feuille de style:

@media print {
div#toto {visibility:hidden;}
}

C'est simple, ça ne prend pas longtemps à faire et vos lecteurs vous remercieront.

On peut bien sûr aller plus loin: Retailler les dimensions de certaines colonnes de texte, redimensionner les images, supprimer les fonds colorés, ajouter des éléments, changer les polices et tailles... tout ce qu'il faut pour que ça passe mieux à l'impression.

Dommage qu'il n'y ait pas plus de sites qui fassent cela.

Voir tous les billets