Cum să blocați o pagină web de la imprimare cu CSS

pagini web sunt menite să fie vizualizate pe un ecran. Deși există o mare varietate de dispozitive posibile care pot fi utilizate pentru a vizualiza un site (desktop-uri, laptopuri, tablete, telefoane, articole portabile, televizoare etc.), toate includ un ecran de un fel. Există un alt mod în care cineva vă poate vizualiza site-ul web, un mod care nu include un ecran. Ne referim la o imprimare fizică a paginilor dvs. web.

Cu ani în urmă, ați descoperi că oamenii care tipăresc site-uri web erau un scenariu destul de obișnuit. Ne amintim că ne-am întâlnit cu mulți clienți care erau noi pe web și s-au simțit mai confortabil examinând paginile tipărite ale site-ului. Apoi ne-au dat feedback și editări pe acele bucăți de hârtie în loc să se uite la ecran pentru a discuta site-ul web. Pe măsură ce oamenii au devenit mai confortabili cu ecranele în viața lor și pe măsură ce acele ecrane s-au înmulțit de multe ori, am văzut din ce în ce mai puține persoane încercând să imprime pagini web pe hârtie, dar totuși întâmpla. Poate doriți să luați în considerare acest fenomen atunci când vă planificați site-ul. Doriți ca oamenii să vă imprime paginile web? Poate că nu. Dacă acesta este cazul, aveți câteva opțiuni.

instagram viewer

Cum să blocați o pagină web de la imprimare cu CSS

Este ușor de utilizat CSS pentru a împiedica oamenii să tipărească paginile dvs. web. Trebuie pur și simplu să creați o foaie de stil cu o linie numită „print.css” care să includă următoarea linie de CSS.

body {display: none; }

Acest stil unic va transforma elementul „corp” al paginilor dvs. nefiind afișat - și întrucât totul de pe paginile dvs. este un element secundar al corpului, aceasta înseamnă că întreaga pagină / site nu va fi afișată.

Odată ce aveți foaia de stil „print.css”, o veți încărca în HTML ca o foaie de stil de imprimare. Iată cum ați face asta - trebuie doar să adăugați următoarea linie la elementul „head” din paginile dvs. HTML.


Aceste informații îi spun browserului că, dacă această pagină web este setată să imprime, să folosească această foaie de stil în loc de orice foaie de stil implicită pe care o folosesc paginile pentru afișarea pe ecran. Pe măsură ce paginile trec la această foaie „print.css”, stilul care face ca întreaga pagină să nu fie afișată va începe și tot ceea ce va fi tipărit ar fi o pagină goală.

Blochează o pagină pe rând

Dacă nu trebuie să blocați o mulțime de pagini de pe site-ul dvs., puteți bloca tipărirea de la o pagină la alta cu următoarele stiluri lipite în capul codului HTML.


Acest stil din pagină ar avea o specificitate mai mare decât orice stiluri din interiorul dvs. foi de stil externe, ceea ce înseamnă că acea pagină nu s-ar imprima deloc, în timp ce alte pagini fără această linie s-ar imprima în continuare normal.

Fii mai amator cu paginile blocate

Ce se întâmplă dacă doriți să blocați tipărirea, dar nu doriți ca clienții dvs. să fie frustrați? Dacă văd imprimarea unei pagini goale, s-ar putea să se supere și să creadă că imprimanta sau computerul lor este defect și nu își dau seama că ați dezactivat imprimarea!

Pentru a evita frustrarea vizitatorilor, puteți deveni un pic mai îndrăgostit și puteți introduce un mesaj care va fi afișat numai atunci când cititorii dvs. imprimă pagina - înlocuind celălalt conținut. Pentru a face acest lucru, construiți-vă pagina web standard și, în partea de sus a paginii, imediat după eticheta corpului, puneți:


Și închideți eticheta după ce ați scris tot conținutul, chiar în partea de jos a paginii:


Apoi, după ce ați închis div "noprint", deschide alt div cu mesajul pe care doriți să îl afișați la imprimarea documentului:


Această pagină este destinată vizualizării online și nu poate fi tipărită. Vă rugăm să vizualizați această pagină la http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



Includeți un link către documentul dvs. CSS tipărit numit print.css:


Și în acel document includeți următoarele stiluri:

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

În cele din urmă, în foaia dvs. de stil standard (sau într-un fișier stil intern în capul documentului), scrieți:

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

Acest lucru vă va asigura că mesajul tipărit apare numai pe pagina tipărită, în timp ce pagina web apare doar pe pagina online.

Luați în considerare experiența utilizatorului

Tipărirea paginilor web este, în general, o experiență slabă, deoarece site-urile de astăzi de multe ori nu se traduc bine în pagina tipărită. Dacă nu doriți să creați o foaie de stil complet separată pentru a dicta stilurile de imprimare, puteți lua în considerare utilizarea pașilor din acest articol pentru a „dezactiva” tipărirea pe o pagină. Fiți conștienți de impactul pe care acesta l-ar putea avea asupra utilizatorilor care se bazează pe tipărirea site-urilor web (poate pentru că au viziune slabă și luptă pentru citirea textului pe ecran) și luați decizii care vor funcționa pentru site-ul dvs. public.

Articol original de Jennifer Krynin. Editat de Jeremy Girard.

instagram story viewer