12) Feuille de style "print" - introduction

La feuille de style print est un ensemble de déclaration css permettant de personnaliser l’impression d’une page web. C’est un outil puissant : on peut au besoin imprimer à partir du même fichier html un document à la mise en page, aux couleurs, tailles, marges, etc. totalement différent de ce qui est vu à l’écran.

Précédent | 14/16 | Suivant

Les feuilles de style print sont souvent ignorées des graphistes parce qu’elle requièrent un travail supplémentaire alors qu’elles ne sont pas vues (donc reconnues comme travail) par le client, et que personne ne sait si son site est imprimé peu ou beaucoup. Il existe donc peu de feed-back de cette fonction.

Depuis quelques années pourtant, les navigateurs ont implémenté les recommandations du W3C concernant l’impression. Mais pas toutes les recommandations, car les navigateurs se veulent les garde-fous et préfèrent filtrer certaines déclarations souvent pour protéger l’utilisateur : les couleurs de fond, marges, tailles, etc. peuvent rendre la page gourmande en papier et encre.
Il est donc compliqué actuellement de prévoir de manière fine la manière dont une page va être imprimée, ce qui est évidemment inconfortable pour les graphiste.

De plus, le fait de passer par l’opération d’imprimer, ou par la création d’un PDF, rend le travail d’écriture des css laborieux. Tout ça mis ensemble réchigner plus d’un graphiste à se pencher sur cet aspect du développement web. Nous allons ici tout de même tenter le coup.

Choisir une méthode : fusion ou séparation écran/print
Deux grandes méthodes d’approche peuvent être utilisés : on peut séparer complètement la mise en page "écran" de la mise en page "print" ou se baser sur les styles généraux de la page web, et juste modifier certains aspects de la page.

Dans le premier cas, on déclarera alors généralement deux feuilles de style dans le head de la page web :

<link rel="stylesheet" media="screen" href="styles.css">
<link rel="stylesheet" media="print" href="styles-print.css">

C’est la déclaration media="print" qui indique au navigateur le media de sortie spécifique de la feuille de style dans ce cas.

Ceci permet de clairement séparer les deux mises en page. Évidemment, il faudra déclarer deux fois les comportements des principaux éléments de la page, ce qui occasionne un surcroit de travail.

On utilise donc la plupart du temps la méthode qui consiste à ajouter certains styles à l’intérieur de la feuille de style courante, prévus en cas d’impression, qui modifient la mise en page web juste ce qu’il faut.

Dans ce cas on ajoute dans le head de la page :

<link rel="stylesheet" media="screen,print" href="styles.css">

ou encore plus large

<link rel="stylesheet" media="all" href="styles.css">

Et dans le fichier css, on utilise des media queries :

@media print {

}