Comment empêcher l'impression d'une page Web avec CSS

les pages Web sont destinés à être visualisés sur un écran. Bien qu'il existe une grande variété d'appareils possibles qui peuvent être utilisés pour afficher un site (ordinateurs de bureau, ordinateurs portables, tablettes, téléphones, appareils portables, téléviseurs, etc.), ils comprennent tous un écran quelconque. Il existe une autre façon de voir votre site Web, une façon qui n'inclut pas d'écran. Nous faisons référence à une impression physique de vos pages Web.

Il y a des années, vous constateriez que les personnes imprimant des sites Web étaient un scénario assez courant. Nous nous souvenons d'avoir rencontré de nombreux clients qui étaient nouveaux sur le Web et se sentaient plus à l'aise pour revoir les pages imprimées du site. Ils nous ont ensuite donné des commentaires et des modifications sur ces morceaux de papier au lieu de regarder l'écran pour discuter du site Web. Comme les gens sont devenus plus à l'aise avec les écrans dans leur vie, et que ces écrans se sont multipliés maintes fois, nous avons vu de moins en moins de personnes essayer d'imprimer des pages Web sur du papier, mais cela se produire. Vous voudrez peut-être tenir compte de ce phénomène lorsque vous planifiez votre site Web. Voulez-vous que les gens impriment vos pages Web? Peut-être que non. Si tel est le cas, vous avez quelques options.

Comment empêcher l'impression d'une page Web avec CSS

C'est facile à utiliser CSS pour empêcher les gens d'imprimer vos pages Web. Vous devez simplement créer une feuille de style d'une ligne nommée "print.css" qui inclut la ligne suivante de CSS.

body { afficher: aucun; }

Ce style transformera l'élément "corps" de vos pages en n'étant pas affiché — et puisque tout sur vos pages est un enfant de l'élément body, cela signifie que la page/le site entier ne sera pas affiché.

Une fois que vous avez votre feuille de style "print.css", vous devez la charger dans votre HTML comme feuille de style d'impression. Voici comment procéder: ajoutez simplement la ligne suivante à l'élément "head" de vos pages HTML.

Ces informations indiquent au navigateur que si cette page Web est configurée pour être imprimée, il doit utiliser cette feuille de style au lieu de la feuille de style par défaut utilisée par les pages pour l'affichage à l'écran. Au fur et à mesure que les pages basculent vers cette feuille "print.css", le style qui fait que la page entière ne s'affiche pas entrera en jeu et tout ce qui sera imprimé sera une page vierge.

Bloquer une page à la fois

Si vous n'avez pas besoin de bloquer beaucoup de pages sur votre site, vous pouvez bloquer l'impression page par page avec les styles suivants collés dans l'en-tête de votre code HTML.

Ce style d'encart aurait une spécificité plus élevée que n'importe quel style à l'intérieur de votre feuilles de style externes, ce qui signifie que cette page ne s'imprimerait pas du tout, tandis que les autres pages sans cette ligne s'imprimeraient toujours normalement.

Devenez plus amateur avec vos pages bloquées

Que faire si vous souhaitez bloquer l'impression, mais ne voulez pas que vos clients soient frustrés? S'ils voient une page vierge s'imprimer, ils peuvent s'énerver et penser que leur imprimante ou leur ordinateur est en panne et ne pas se rendre compte que vous avez essentiellement désactivé l'impression!

Pour éviter la frustration des visiteurs, vous pouvez devenir un peu plus sophistiqué et mettre un message qui ne s'affichera que lorsque vos lecteurs imprimeront la page, en remplaçant l'autre contenu. Pour ce faire, créez votre page Web standard, et en haut de la page, juste après la balise body, mettez:

Et fermez cette balise une fois que tout votre contenu est écrit, tout en bas de la page:

Cette page est destinée à être consultée en ligne et ne peut être imprimée. Veuillez consulter cette page sur http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint { affichage: aucun; }
#print { affichage: bloc; }

#print { affichage: aucun; }
#noprint { afficher: bloc; }