Hur man blockerar en webbsida från att skriva ut med CSS

webbsidor är avsedda att ses på en skärm. Även om det finns ett brett utbud av möjliga enheter som kan användas för att visa en webbplats (stationära datorer, bärbara datorer, surfplattor, telefoner, bärbara datorer, TV-apparater etc.), de innehåller alla en skärm av något slag. Det finns ett annat sätt att någon kan se din webbplats, ett sätt som inte inkluderar en skärm. Vi hänvisar till en fysisk utskrift av dina webbsidor.

För många år sedan skulle du upptäcka att personer som skriver ut webbplatser var ett ganska vanligt scenario. Vi kommer ihåg att vi träffade många kunder som var nya på webben och kände sig mer bekväma med att granska utskrivna sidor på webbplatsen. De gav oss sedan feedback och redigeringar på pappersbitarna istället för att titta på skärmen för att diskutera webbplatsen. När människor har blivit mer bekväma med skärmarna i sina liv, och när dessa skärmar har ökat många gånger har vi sett färre och färre människor försöka skriva ut webbsidor på papper, men det gör det fortfarande hända. Du kanske vill överväga detta fenomen när du planerar din webbplats. Vill du att folk ska skriva ut dina webbsidor? Du kanske inte gör det. Om så är fallet har du några alternativ.

Hur man blockerar en webbsida från att skriva ut med CSS

Det är enkelt att använda CSS för att hindra människor från att skriva ut dina webbsidor. Du behöver helt enkelt skapa ett formatmall med 1 rad med namnet "print.css" som innehåller följande rad CSS.

body {display: none; }

Denna stil kommer att göra "body" -elementet på dina sidor till visas inte - och eftersom allt på dina sidor är ett underordnat element i kroppen betyder det att hela sidan / webbplatsen inte visas.

När du väl har formatmallen "print.css" laddar du in den i din HTML som ett utskriftsformat. Så här skulle du göra det - lägg bara till följande rad i "head" -elementet på dina HTML-sidor.

Denna information talar om för webbläsaren att om den här webbsidan är inställd på att skriva ut, att använda detta formatmall istället för vilket standardformat som sidorna använder för skärmvisning. När sidorna byter till det här "print.css" -arket kommer den stil som gör att hela sidan inte visas kommer att sparka in och allt som kommer att skrivas ut är en tom sida.

Blockera en sida i taget

Om du inte behöver blockera många sidor på din webbplats kan du blockera utskrift sida för sida med följande stilar klistrade in i HTML-huvudet.

Denna stil på sidan skulle ha högre specificitet än alla stilar i din externa stilarkvilket innebär att sidan inte skulle skrivas ut alls medan andra sidor utan denna rad fortfarande skulle skrivas ut normalt.

Bli fancier med dina blockerade sidor

Vad händer om du vill blockera utskrift men inte vill att dina kunder ska bli frustrerade? Om de ser ut på en tom sida kan de bli upprörda och tror att deras skrivare eller dator är trasig och inte inser att du i princip har inaktiverat utskrift!

För att undvika besökarens frustration kan du bli lite snyggare och lägga in ett meddelande som bara visas när dina läsare skriver ut sidan - och ersätter det andra innehållet. För att göra detta, bygg din standardwebbsida och lägg högst upp på sidan, direkt efter body-taggen:

Och stäng den taggen när allt ditt innehåll är skrivet, längst ner på sidan:

Denna sida är avsedd att visas online och kanske inte skrivs ut. Se den här sidan på http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

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

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