Skip to main content

Come bloccare una pagina Web dalla stampa con i CSS

Come scaricare una foto BLOCCATA PROTETTA da qualunque sito (Aprile 2025)

Come scaricare una foto BLOCCATA PROTETTA da qualunque sito (Aprile 2025)
Anonim

Le pagine Web sono pensate per essere visualizzate su uno schermo. Mentre ci sono una vasta gamma di dispositivi che possono essere utilizzati per visualizzare un sito (desktop, laptop, tablet, telefoni, indossabili, TV, ecc.), Tutti includono 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 ad una stampa fisica delle tue pagine web.

Anni fa, si scoprirebbe che le persone che stampano siti Web sono uno scenario piuttosto comune. Ricordiamo che ci siamo incontrati con molti clienti che erano nuovi sul Web e ci siamo sentiti più a nostro agio nel rivedere le pagine stampate del sito. Poi ci hanno dato feedback e modifiche su quei pezzi di carta invece di guardare lo schermo per discutere del sito web. Dal momento che le persone sono diventate più a loro agio con gli schermi nelle loro vite, e dal momento che questi schermi si sono moltiplicati molte volte, abbiamo visto sempre meno persone che tentano di stampare pagine Web su carta, ma ciò accade comunque. Potresti considerare questo fenomeno quando pianifichi il tuo sito web. Vuoi che le persone stampino le tue pagine web? Forse no. Se è così, hai alcune opzioni.

Come bloccare una pagina Web dalla stampa con i CSS

È facile usare i CSS per impedire alle persone di stampare le tue pagine web. È sufficiente creare un foglio di stile a 1 riga denominato "print.css" che includa la seguente riga di CSS.

body {display: none; }

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

Una volta ottenuto il foglio di stile "print.css", lo si caricherà nel codice HTML come foglio di stampa. Ecco come lo faresti: aggiungi la seguente riga all'elemento "head" nelle tue pagine HTML.

Queste informazioni indicano al browser che se questa pagina Web è impostata per la stampa, per utilizzare questo foglio di stile invece di qualsiasi foglio di stile predefinito le pagine utilizzino per la visualizzazione su schermo. Man mano che le pagine passano a questo foglio "print.css", lo stile che rende non visualizzata l'intera pagina si avvia e tutto ciò che verrà stampato sarà una pagina vuota.

Blocca una pagina alla volta

Se non hai bisogno di bloccare molte pagine sul tuo sito, puoi bloccare la stampa pagina per pagina con i seguenti stili incollati nella testa dell'HTML.

Questo stile in-page avrebbe una specificità più elevata rispetto a qualsiasi stile all'interno dei fogli di stile esterni, il che significa che la pagina non verrebbe affatto stampata, mentre altre pagine senza questa riga continuerebbero a essere stampate normalmente.

Ottieni Fancier con le tue pagine bloccate

Cosa succede se vuoi bloccare la stampa, ma non vuoi che i tuoi clienti diventino frustrati? Se vedono una stampa di pagine vuote, potrebbero arrabbiarsi e pensare che la loro stampante o il computer sia rotto e non rendersi conto che la stampa è essenzialmente disabilitata!

Per evitare la frustrazione dei visitatori, puoi avere un po 'di fantasia e inserire un messaggio che verrà visualizzato solo quando i tuoi lettori stamperanno la pagina - sostituendo gli altri contenuti. Per fare ciò, crea la tua pagina Web standard e nella parte superiore della pagina, subito dopo il tag del corpo, inserisci:

E chiudi quel tag dopo che tutto il tuo contenuto è stato scritto, nella parte inferiore della pagina:

Quindi, dopo aver chiuso il div "noprint", aprire un altro div con il messaggio che si desidera visualizzare quando viene stampato il documento:

Questa pagina è destinata alla visualizzazione online e potrebbe non essere stampata. Per favore guarda questa pagina su http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Includere un collegamento al documento CSS di stampa denominato print.css:

E in quel documento includono i seguenti stili:

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

Infine, nel tuo foglio di stile standard (o in uno stile interno nel tuo documento), scrivi:

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

Ciò garantisce che il messaggio di stampa venga visualizzato solo sulla pagina stampata, mentre la pagina Web viene visualizzata solo sulla pagina online.

Considera l'esperienza utente

La stampa di pagine Web è generalmente una pessima esperienza poiché i siti di oggi spesso non si adattano bene alla pagina stampata. Se non desideri creare un foglio di stile completamente separato per dettare gli stili di stampa, puoi considerare di utilizzare i passaggi di questo articolo per "disattivare" la stampa su una pagina. Siate consapevoli dell'impatto che questo potrebbe avere sugli utenti che si affidano alla stampa di siti Web (forse perché hanno scarsa visione e fatica a leggere il testo sullo schermo) e prendono decisioni che funzioneranno per il pubblico del vostro sito.

Articolo originale di Jennifer Krynin. A cura di Jeremy Girard.