Come bloccare una pagina Web dalla stampa con CSS

pagine web sono pensati per essere visualizzati su uno schermo. Sebbene esista un'ampia varietà di possibili dispositivi che possono essere utilizzati per visualizzare un sito (desktop, laptop, tablet, telefoni, dispositivi indossabili, TV, ecc.), includono tutti uno schermo di qualche tipo. C'è un altro modo in cui qualcuno può visualizzare il tuo sito Web, un modo che non include uno schermo. Ci riferiamo a una stampa fisica delle tue pagine web.

Anni fa, scoprirai che le persone che stampano siti Web erano uno scenario abbastanza comune. Ricordiamo l'incontro con molti clienti che non conoscevano il web e si sentivano più a loro agio nel rivedere le pagine stampate del sito. Ci hanno quindi fornito feedback e modifiche su quei pezzi di carta invece di guardare lo schermo per discutere del sito web. Poiché le persone sono diventate più a loro agio con gli schermi nelle loro vite e questi schermi si sono moltiplicati molte volte, abbiamo visto sempre meno persone provare a stampare pagine Web su carta, ma lo fa ancora accadere. Potresti prendere in considerazione questo fenomeno quando pianifichi il tuo sito web. Vuoi che le persone stampino le tue pagine web? Forse no. In tal caso, hai alcune opzioni.

Come bloccare una pagina Web dalla stampa con CSS

È facile da usare CSS per impedire alle persone di stampare le tue pagine web. Devi semplicemente creare un foglio di stile di 1 riga chiamato "print.css" che includa la seguente riga di CSS.

corpo { display: nessuno; }

Questo stile trasformerà l'elemento "corpo" delle tue pagine in non essere visualizzato — e poiché tutto sulle tue pagine è figlio dell'elemento body, ciò significa che l'intera pagina/sito non verrà visualizzata.

Una volta che hai il tuo foglio di stile "print.css", lo caricheresti nel tuo HTML come foglio di stile di stampa. Ecco come lo faresti: aggiungi la seguente riga all'elemento "head" nelle tue pagine HTML.

Questa informazione dice al browser che se questa pagina web è impostata per la stampa, di usare questo foglio di stile invece di qualsiasi foglio di stile predefinito che le pagine usano per la visualizzazione su schermo. Quando le pagine passano a questo foglio "print.css", verrà attivato lo stile che rende l'intera pagina non visualizzata e tutto ciò che verrà stampato sarà una pagina vuota.

Blocca una pagina alla volta

Se non hai bisogno di bloccare molte pagine del tuo sito, puoi bloccare la stampa pagina per pagina con i seguenti stili incollati all'inizio del tuo codice HTML.

Questo stile in-page avrebbe una specificità maggiore rispetto a qualsiasi stile all'interno del tuo fogli di stile esterni, il che significa che quella pagina non verrebbe stampata affatto, mentre le altre pagine senza questa riga verrebbero comunque stampate normalmente.

Diventa più fantasioso con le tue pagine bloccate

E se volessi bloccare la stampa, ma non vuoi che i tuoi clienti si sentano frustrati? Se vedono stampare una pagina vuota, potrebbero arrabbiarsi e pensare che la loro stampante o il loro computer sia rotto e non rendersi conto che hai sostanzialmente disabilitato la stampa!

Per evitare la frustrazione dei visitatori, puoi diventare un po' più fantasioso e inserire un messaggio che verrà visualizzato solo quando i tuoi lettori stampano la pagina, sostituendo l'altro contenuto. Per fare ciò, crea la tua pagina web standard e nella parte superiore della pagina, subito dopo il tag body, inserisci:

E chiudi quel tag dopo che tutto il tuo contenuto è stato scritto, in fondo alla pagina:

Questa pagina è destinata alla visualizzazione online e non può essere stampata. Si prega di visualizzare questa pagina su http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

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

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