Optimiser votre site web pour l’impression en 5 minutes

 English version available

Est-ce vraiment utile? Je pense que oui! Les gens qui impriment des pages sur internet sont sans doute plus nombreux que ce que l’on peut penser. Et puis franchement, si ça prend 5 minutes, autant le faire!

Prenons un scénario digne d’un film hollywoodien (presque):

Monsieur Toutlemonde n’aura accès ni à internet ni à son ordinateur ce weekend et il n’a pas eu le temps de finir de lire un article assez long, mais primordial pour la suite. Il décide donc de l’imprimer pour le lire plus tard dans l’avion (oui, Mr Toutlemonde a de la chance, il part en vacances). L’impression terminée, il se rend compte, un peu blasé (car oui ce n’est pas la première fois que ça lui arrive), qu’absolument toute la page internet est ressortie. Il se retrouve avec 7 pages imprimées pour un article qui en comptait peut-être 3… Le menu de navigation du site, les articles similaires, les liens de partage vers les réseaux sociaux… Tout est là! Mais bon, Monsieur Toutlemonde est tout de même rassuré, il pourra lire son article « Comment affronter sa phobie de l’avion? ».

Dans la continuité de l’article expliquant comment rendre votre site responsive, je vais vous montrer comment rendre votre site optimisé pour l’impression.

Le principe est le même, on utilise le langage CSS.

Il faut déclarer un fichier de style CSS dédié pour l’impression. Dans le header de vos pages, vous ajoutez un lien vers ce fichier en spécifiant « print » pour l’attribut « media », contrairement aux autres qui spécifient en général le media « all » (écran, imprimante, etc.). Consultez cette page pour en savoir plus sur les medias.

Par exemple, j’utilise le fichier « print.css » pour mon blog, j’ai donc ajouté cette ligne:

<link rel="stylesheet" href="https://blog.fabianpiau.com/wp-content/themes/freshy2/print.css" type="text/css" media="print">

Ce fichier de styles sera utilisé seulement dans le cas d’une impression. Ainsi, vous allez donc pouvoir l’utiliser pour supprimer tous les contenus « parasites » tels que:

• Header
• Sidebars
• Footer
• Articles similaires
• Etc.

Voici un extrait de mon fichier « print.css »:

@media print {
	.sidebar div div {
		display:none !important;
	}
	#header {
		display:none !important;
	}
	#footer {
		display:none !important;
	}
	.yarpp-related {
		display:none !important;
	}
	.meta {
		display:none !important;
	}
	.wp-pagenavi {
		display:none !important;
	}
	.sharedaddy {
		display:none !important;
	}
	#breadcrumbs {
		display:none !important;
	}
	.navigation {
		display:none !important;
	}
	.noprint {
		display:none !important;
	}
}

A noter: j’utilise le mot clé « !important » pour redéfinir un style déjà présent. La valeur spécifiée avec le « !important » écrasera toujours les autres.

@media print { [mon code CSS ici] } permet de rendre un code CSS interprétable uniquement dans le cas d’une impression. Si vous utilisez cette annotation autour d’un bout de code CSS, rien ne vous empêche donc de l’intégrer dans un fichier CSS utilisé pour tout media (media="all"). J’ai utilisé à la fois l’annotation et le media pour l’impression, comme cela je suis sûr, mais ce n’est absolument pas une obligation.

Une autre solution (souvent complémentaire) est d’ajouter une classe CSS dédiée pour cacher des éléments en particulier à l’impression. Cela est utile dans le cas où l’élément en question n’a pas d’attribut qui lui est propre (pas d’identifiant ou une classe trop générique qu’on ne souhaite pas cacher partout…).

Par exemple, la classe « noprint »:

.noprint {
	display:none !important;
}

Désormais, n’importe quel élément de mon site qui utilisera la classe « noprint » sera invisible à l’impression. On ne peut pas faire plus simple!

Pour voir le résultat en action, vous pouvez imprimer cet article (un aperçu avant impression ou une impression vers une imprimante PDF sera suffisant, pensez à la planète…).