Table des matières

Gerer les impressions en css

Il peut, dans certains cas, être utile de proposer à vos visiteurs d'imprimer une page de votre site. Malheureusement, une page web est rarement adaptée au format papier. Grâce au css vous pouvez déterminer ce qui doit ou ne doit pas apparaître lors de l'impression de votre page.

Signaler ce qui doit ou ne doit pas être imprimé dans votre page

La première étape sera de déterminer ce que vous désirez imprimer et ce que vous voulez faire disparaître. Il vous suffit pour cela d'ajouter à chaque élément que vous voulez voir figurer lors de l'impression une classe spécifique que nous allons nommer ici: “printable”.

exemple:

html4strict
<div class="printable">Cette partie de la page sera imprimé</div>
<div>Celle ci sera ignorée lors de l'impression.</div>

Créer une feuille de style spécifique à l'impression

Il faut ensuite créer votre feuille de style. L'astuce est de rendre invisible tous les éléments de la page exceptés ceux qui comporte la classe “printable”

css
/*cache tous les elements*/
* {
visibility:hidden;
}
/*n'affiche que les elements sui on la classe printable*/
.printable {
visibility:visible;
}

On pourrait imaginer rendre visible tous les éléments qui ont la classe printable ou qui sont contenu dans un élément qui a la classe printable.
Pour cela, il faudrais utliser la classe suivante :

css
/*n'affiche que les elements sui on la classe printable ou qui sont contenu dans un element "printable" */
.printable,.printable * {
visibility:visible;
}

Lier la feuille de style au document

Votre feuille de style ainsi créé il faut maintenant la lier à votre document à imprimer, retournez donc dans votre code html et ajoutez ce qui suit, entre les balises <head> et </head>

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

Nous considérons ici que votre feuille de style ce nomme “print.css”

Il ne vous reste plus qu'à lancer l'impression pour voir le résultat.

Vous n'avez pas besoin de redéfinir tout les styles de votre page, car même si la feuille de style print.css est prioritaire par rapport à votre feuille de style classique, les informations non modifiées par votre nouvelle feuille apparaitront lors de l'impression. Ainsi ce qui doit rester visible lors de l'impression aura le même aspect que sur l'écran.


27/10/2006 12:32 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.