Agilité, Développement Java, Nouvelles technologies et plus…
  • rss
  • Accueil
  • Management
  • Programmation agile
  • Technologie
  • Linux
  • Evénement
  • App Android
  • Contact
  • A propos de l'auteur
  • English
  • Francais

Optimiser votre site web pour l’impression en 5 minutes

Fabian Piau | dimanche 15 septembre 2013 - 13:23
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 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!


Imprimante

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;
	}
}

Logo impression garantie

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…).

Articles similaires

wordpress-hackerConseils pour sécuriser votre site WordPress Clean browser cacheLes fichiers CSS et Javascript jouent à cache-cache avec les navigateurs client WordPress qTranslateRendre son site WordPress multilingue avec qTranslate Responsive Web DesignFaire du Responsive Web Design: oui, mais simplement!
Catégories
Programmation agile
Tags
css, design, impression, imprimante, mobilité informatique
Flux rss des commentaires
Flux rss des commentaires

« Panorama simplifié des métiers de l’informatique Gérer une séquence de base de données avec Spring »

Télécharger l'app CarmaBlog

Flux RSS

  • RSS Feed RSS - Articles
  • RSS Feed RSS - Commentaires

Articles les plus vus

  • Changer la langue de Firefox - 114 915 vues
  • Réaliser un sondage en ligne avec Google Forms / Drive / Docs - 61 532 vues
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - 41 348 vues
  • Personnaliser Gnome 3 (Shell) - 29 100 vues
  • La signification d’URL, URI et URN - 15 919 vues
  • Java EE & CDI vs. Spring - 14 817 vues
  • Open Street Map, une meilleure carte que Google Maps? - 13 776 vues
  • Comparaison NoSQL: Couchbase et MongoDB - 13 525 vues
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 12 725 vues
  • Une première approche du Camel d’Apache - 11 724 vues

Commentaires récents

  • Saint hilaire albert sur FAQ – Sondage en ligne avec Google Forms / Drive / Docsmerci beaucoup
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsNon, ce n’était pas la bonne pratique effectivemen…
  • Saint hilaire albert sur FAQ – Sondage en ligne avec Google Forms / Drive / Docsah, alors je crois avoir trouvé : mon lien se term…
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsJe n'arrive pas à reproduire car si vous cliquez s…
  • Saint hilaire albert sur FAQ – Sondage en ligne avec Google Forms / Drive / Docsje vais tenter d'être plus précis : j'envoie un li…

Articles récents

  • Flagger – Monitorer vos déploiements Canary avec Grafana - Il y a 6 mois et 3 semaines
  • Flagger – Déploiements Canary sur Kubernetes - Il y a 8 mois et 3 jours
  • Flagger – Premiers pas avec Istio et Kubernetes - Il y a 8 mois et 2 semaines
  • CoderDojo Expedia à Londres - Il y a 1 an et 6 mois
  • Etre bénévole à Devoxx4Kids - Il y a 1 an et 8 mois
  • Une migration Java 11 réussie - Il y a 2 ans et 3 semaines
  • Conseils pour sécuriser votre site WordPress - Il y a 2 ans et 3 mois
  • Devoxx UK 2018 – Jour 2 - Il y a 2 ans et 7 mois
  • Devoxx UK 2018 – Jour 1 - Il y a 2 ans et 8 mois
  • TransferWise, Revolut et Monzo, une petite révolution dans le monde des expatriés et voyageurs - Il y a 3 ans et 10 heures
  • Autocomplétion pour Git - Il y a 3 ans et 8 mois
  • Swagger, la documentation API automatisée - Il y a 3 ans et 10 mois
  • Architecture Microservices – Les bonnes pratiques - Il y a 4 ans et 3 mois
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - Il y a 4 ans et 8 mois
  • QCon London 2016 – Projet Jigsaw dans JDK 9 – La modularité arrive sur Java - Il y a 4 ans et 9 mois
Offre moi un café

Langue

  • Français
  • English

Suivez-moi!

Suivez-moi sur Linkedin
Suivez-moi sur Twitter
Suivez-moi sur Stackoverflow
Suivez-moi sur Github
Suivez-moi sur Rss
Link to my Contact

Abonnement email

Saisissez votre adresse email pour être informé des nouveaux articles.

Étiquettes

.net agilité android bash blog bonnes pratiques cache cloud conférence css devoxx docker docs drive développeur eclipse extreme programming firefox flagger forms google helm hibernate informatique intégration continue istio java jug kubernetes londres mobilité informatique métier outil panorama partage performance plugin programmeur qcon script société spring ubuntu windows wordpress

Liens

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Catégories

  • Evénement (15)
  • Linux (3)
  • Management (7)
  • Programmation agile (29)
  • Technologie (44)

Archives

  • juin 2020 (1)
  • mai 2020 (2)
  • juillet 2019 (1)
  • mai 2019 (1)
  • décembre 2018 (1)
  • octobre 2018 (1)
  • juin 2018 (1)
  • mai 2018 (1)
  • janvier 2018 (1)
  • mai 2017 (1)
  • mars 2017 (1)
  • octobre 2016 (1)
  • avril 2016 (2)
  • mars 2016 (1)
  • novembre 2015 (1)
  • mai 2015 (1)
  • février 2015 (1)
  • décembre 2014 (1)
  • novembre 2014 (1)
  • septembre 2014 (2)
  • août 2014 (1)
  • juillet 2014 (2)
  • juin 2014 (1)
  • avril 2014 (1)
  • mars 2014 (1)
  • février 2014 (2)
  • janvier 2014 (1)
  • décembre 2013 (1)
  • novembre 2013 (1)
  • octobre 2013 (3)
  • septembre 2013 (5)
  • juillet 2013 (1)
  • juin 2013 (1)
  • mai 2013 (1)
  • avril 2013 (1)
  • mars 2013 (2)
  • février 2013 (1)
  • janvier 2013 (2)
  • décembre 2012 (2)
  • octobre 2012 (1)
  • septembre 2012 (1)
  • juillet 2012 (1)
  • mai 2012 (1)
  • avril 2012 (1)
  • mars 2012 (1)
  • février 2012 (1)
  • janvier 2012 (2)
  • décembre 2011 (1)
  • novembre 2011 (2)
  • octobre 2011 (2)
  • septembre 2011 (1)
  • juillet 2011 (1)
  • juin 2011 (2)
  • avril 2011 (1)
  • mars 2011 (1)
  • février 2011 (1)
  • janvier 2011 (2)
  • novembre 2010 (2)
  • septembre 2010 (1)
  • août 2010 (1)
  • juillet 2010 (1)
  • juin 2010 (1)
  • mai 2010 (1)
  • avril 2010 (1)
  • mars 2010 (1)
  • février 2010 (1)
  • décembre 2009 (1)
  • novembre 2009 (1)
  • octobre 2009 (2)
  • septembre 2009 (2)
  • août 2009 (3)
  • juillet 2009 (1)
  • juin 2009 (2)
Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Rss
Link to my Contact
Suivez-moi sur Github
 
Fabian Piau | © 2009 - 2021
Tous droits réservés | Haut ↑