Faire un css pour imprimer correctement une page web

Je ne sais pas si vous aviez remarqué mais des sites de référence comme AlistApart propose une version allégée de leur CSS pour les impressions. Cette version exclue tous les éléments graphiques non pertinent pour une lecture papier.

Avec ce genre d’option vous proposez donc un plus sensible pour les lecteurs de vos sites internet en privilégiant une mise en page en rapport avec les standards papiers.

Tout d’abord il faut interdire l’impression du background mais théoriquement les navigateurs internet utilisent cette option par défaut mais vous pouvez rajouter ceci dans votre css :

/* Print Overrides
———————————————– */
* {
background: none ! important;
color: #111 ! important;
}

Ensuite il faut créer une class “print” pour customiser votre mise en page papier qui intègrera une nouvelle disposition des éléments de votre site. Par exemple vous avez un site large avec 3 colonnes, l’idée est de mettre la 3ème colonne sous la première ensuite avec cette class “print” vous pouvez masquer les éléments que vous ne souhaitez pas imprimer.

Pour réussir cette mise en page de votre css d’impression je vous encourage à lire ce très bon article sur le sujet.