Comment bloquer une page Web de l'impression avec CSS

Les pages Web sont destinées à être visualisées sur un écran. Bien qu'il existe une grande variété de périphériques pouvant être utilisés pour afficher un site (ordinateurs de bureau, ordinateurs portables, tablettes, téléphones, périphériques portables, téléviseurs, etc.), ils incluent tous un écran. Il y a une autre façon pour quelqu'un de voir votre site Web, une manière 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 constatiez que les personnes imprimant des sites Web constituaient un scénario assez courant. Nous nous souvenons d’avoir rencontré de nombreux nouveaux clients sur le Web qui se sentaient plus à l’aise pour consulter les pages imprimées du site. Ils nous ont ensuite fourni des commentaires et des modifications sur ces feuilles de papier au lieu de regarder l'écran pour discuter du site Web. Alors que les gens sont de plus en plus à l'aise avec les écrans de leur vie et que ces écrans se sont multipliés à plusieurs reprises, nous avons vu de moins en moins de personnes essayer d'imprimer des pages Web sur papier, mais cela se produit toujours. Vous pouvez envisager ce phénomène lorsque vous planifiez votre site Web. Voulez-vous que les gens impriment vos pages Web? Peut-être que non. Si c'est le cas, vous avez quelques options.

Comment bloquer une page Web de l'impression avec CSS

Il est facile d’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.

corps {display: none; }

Ce style fera en sorte que l'élément "corps" de vos pages ne soit plus affiché - et comme tout ce qui se trouve 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 code HTML en tant que feuille de style. Voici comment procéder: il suffit d'ajouter la ligne suivante à l'élément "head" de vos pages HTML.

Ces informations indiquent au navigateur que si cette page Web est définie pour l'impression, elle utilisera 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 rend la page entière non affichée entrera en vigueur 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 de page aurait une spécificité supérieure à tous les styles de vos feuilles de style externes, ce qui signifie que la page ne s’imprimerait pas du tout, alors que les autres pages sans cette ligne s’imprimeraient toujours normalement.

Obtenez colombophilie avec vos pages bloquées

Que faire si vous voulez bloquer l’impression, mais ne voulez pas que vos clients deviennent frustrés? S'ils voient une page vierge en train d'être imprimée, ils risquent de s'énerver et de 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 insérer un message qui ne s'affichera que lorsque vos lecteurs imprimeront la page - en remplacement de l'autre contenu. Pour ce faire, construisez votre page Web standard et, en haut de la page, juste après la balise body, mettez:

Et fermez cette balise après que tout votre contenu soit écrit, tout en bas de la page:

Ensuite, après avoir fermé le div "noprint", ouvrez un autre div avec le message que vous souhaitez afficher lors de l'impression du document:

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

Incluez un lien vers votre document CSS d'impression nommé print.css:

Et dans ce document incluent les styles suivants:

#noprint {display: none; } #print {display: block; }

Enfin, dans votre feuille de style standard (ou dans un style interne dans votre tête de document), écrivez:

#print {display: none; } #noprint {display: block; }

Cela garantira que le message imprimé apparaît uniquement sur la page imprimée, tandis que la page Web apparaît uniquement sur la page en ligne.

Considérer l'expérience utilisateur

L'impression de pages Web est généralement une mauvaise expérience, car les sites actuels ne traduisent souvent pas bien la page imprimée. Si vous ne souhaitez pas créer une feuille de style entièrement séparée pour dicter les styles d'impression, vous pouvez envisager d'utiliser les étapes décrites dans cet article pour "désactiver" l'impression sur une page. Soyez conscient de l'impact que cela pourrait avoir sur les utilisateurs qui utilisent des sites Web d'impression (peut-être parce qu'ils ont une vision médiocre et ont du mal à lire les textes à l'écran) et qu'ils prennent des décisions qui fonctionneront pour le public de votre site.

Article original de Jennifer Krynin. Édité par Jeremy Girard.