Hoe u een webpagina kunt blokkeren voor afdrukken met CSS

webpagina's zijn bedoeld om op een scherm te worden bekeken. Hoewel er een grote verscheidenheid aan mogelijke apparaten is die kunnen worden gebruikt om een ​​site te bekijken (desktops, laptops, tablets, telefoons, wearables, tv's, enz.), ze bevatten allemaal een soort scherm. Er is een andere manier waarop iemand uw website kan bekijken, een manier die geen scherm bevat. We hebben het over een fysieke afdruk van uw webpagina's.

Jaren geleden zou je merken dat mensen die websites printen een vrij algemeen scenario waren. We herinneren ons dat we veel klanten hebben ontmoet die nieuw waren op het web en zich meer op hun gemak voelden bij het bekijken van afgedrukte pagina's van de site. Ze gaven ons vervolgens feedback en bewerkingen op die stukjes papier in plaats van naar het scherm te kijken om de website te bespreken. Naarmate mensen zich meer op hun gemak voelen met de schermen in hun leven, en omdat die schermen zijn vermenigvuldigd vele malen hebben we gezien dat steeds minder mensen webpagina's op papier probeerden af ​​te drukken, maar het doet het nog steeds gebeuren. Misschien wilt u rekening houden met dit fenomeen wanneer u uw website plant. Wilt u dat mensen uw webpagina's afdrukken? Misschien niet. Als dat het geval is, heb je enkele opties.

Hoe u een webpagina kunt blokkeren voor afdrukken met CSS

Het is gemakkelijk te gebruiken CSS om te voorkomen dat mensen uw webpagina's afdrukken. U hoeft alleen maar een 1-regelig stylesheet met de naam "print.css" te maken die de volgende CSS-regel bevat.

lichaam { weergeven: geen; }

Deze ene stijl verandert het "body" -element van uw pagina's in wordt niet weergegeven - en aangezien alles op uw pagina's een kind is van het body-element, betekent dit dat de hele pagina/site niet wordt weergegeven.

Zodra u uw "print.css"-stylesheet heeft, laadt u deze in uw HTML als printstylesheet. Hier is hoe u dat zou doen - voeg gewoon de volgende regel toe aan het "head" -element in uw HTML-pagina's.

Deze informatie vertelt de browser dat als deze webpagina is ingesteld om af te drukken, deze stylesheet moet worden gebruikt in plaats van de standaard stylesheet die de pagina's gebruiken voor weergave op het scherm. Als de pagina's overschakelen naar dit "print.css"-blad, zal de stijl die ervoor zorgt dat de hele pagina niet wordt weergegeven in werking treden en het enige dat wordt afgedrukt, is een lege pagina.

Eén pagina tegelijk blokkeren Block

Als u niet veel pagina's op uw site hoeft te blokkeren, kunt u het afdrukken per pagina blokkeren door de volgende stijlen in de kop van uw HTML te plakken.

Deze in-page-stijl zou een hogere specificiteit hebben dan alle stijlen in uw externe stijlbladen, wat betekent dat die pagina helemaal niet zou worden afgedrukt, terwijl andere pagina's zonder deze regel nog steeds normaal zouden worden afgedrukt.

Word liefhebber met uw geblokkeerde pagina's

Wat als u afdrukken wilt blokkeren, maar niet wilt dat uw klanten gefrustreerd raken? Als ze zien dat er een blanco pagina wordt afgedrukt, kunnen ze boos worden en denken dat hun printer of computer kapot is en realiseren ze zich niet dat je het afdrukken in wezen hebt uitgeschakeld!

Om frustratie bij bezoekers te voorkomen, kunt u een beetje exclusiever worden en een bericht plaatsen dat alleen wordt weergegeven wanneer uw lezers de pagina afdrukken - ter vervanging van de andere inhoud. Om dit te doen, bouwt u uw standaard webpagina en plaatst u bovenaan de pagina, direct na de body-tag:

En sluit die tag nadat al uw inhoud is geschreven, helemaal onderaan de pagina:

Deze pagina is bedoeld om online te bekijken en mag niet worden afgedrukt. Bekijk deze pagina op http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint { display: geen; }
#print { display: blok; }

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