Plusieurs médias, une seule feuille de style

Si vous êtes soucieux du rendu de vos pages à l’impression et proposez à vos visiteurs une feuille de style d’impression, voici un moyen simple pour améliorer les performances de vos pages.

La plupart des blogs sur lesquels je remarque un effort sur le rendu d’impression choisissent d’annoncer dans leur head les deux feuilles de style, en précisant chaque fois les médias concernés.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Il existe une solution alternative ¹ qui peut nous faire économiser une requête HTTP. N’appelez qu’une seule feuille de style dans votre head, sans préciser son média.

<link rel="stylesheet" type="text/css" href="style.css" />

Puis, dans cette unique feuille de style, utilisez la syntaxe suivante pour séparer les styles des différents médias.

@media screen {
	/* style pour écrans */
}
@media print {
	/* style pour l'impression */
}

Remarque : J’ai découvert cette syntaxe alternative dans le billet “Les types de media CSS” du blog de Laurent Denis. Je vous engage à regarder ce blog de plus près car on y trouve de passionnantes discussions, comme celle sur les attributs width/height des images en XHTML.

1. il en existe plusieurs autres bien sûr, mais je pense que celle-ci est la plus intéressante. [↩]