Molte volte ci troviamo a leggere delle pagine web con dei contenuti interessanti che vorremmo stampare, il problema è che molte volte la pagina web stampata su un foglio A4 è poco leggibile e contiene molte parti della pagina web che non ci interessano, come ad esempio la sidebar laterale, i link in fondo alla pagina, i menu di navigazione e gli spazi pubblicitari. Per evitare questo fastidio in una nostra pagina web dobbiamo implementare del codice CSS in maniera tale da nascondere o modificare quelli parti che non ha senso stampare.

Le regole CSS da implementare nel foglio di stile possono essere inserite in tre maniere differenti, ognuna di essa ha dei vantaggi e degli svantaggi, usare quella più idonea.

Attributo <link>: Questo è il metodo più utilizzato, infatti basta inserire un link come avete fatto per il file CSS principale nella sezione head specificando media=”print”, a secondo se nel file principale CSS è specificato media=”screen” o media=”all”, le regole CSS per le caratteristiche di stampa verranno usate da sole o in aggiunta a quelle principali.

<link rel="stylesheet" type="text/css" href="stile.css" media="all"/>
<link rel="stylesheet" type="text/css" href="stampante.css" media="print" />

Comando @import: E’ possibile inserire il richiamo del foglio stile anche dentro il file principale CSS senza dover aggiungere una riga nella sezione HEAD

@import url("stampante.css") print;

Questi due metodi, anche se includono le regole CSS per la stampa in maniera differente, hanno lo svantaggio che viene generata una richiesta HTTP al vostro server web per il caricamento del nuovo foglio stile  anche se la funzione di stampa non è richiesta dall’utente. Dato che molte volte le regole CSS che riguardano la stampa non sono moltissime, infatti la maggior parte delle volte riguardano il cambiamento di alcuni colori e il nascondere di intere sezioni, possiamo aggiungere i comandi allo stesso foglio stile principale che usiamo per lo schermo.

Comando @media: Aggiungiamo le regole CSS alla fine del file principale, l’unica differenza è che questi comandi dovranno essere inseriti nel mezzo di un blocco @media print.

@media print {
  /* nuova regola che sostituisce la principale */
  #sidebar {
    display:none;
  }
}

Quest’ultimo metodo è quello utilizzato da questo sito, infatti se fate un’anteprima di stampa di questo articolo con il vostro browser, vedrete che la sidebar laterale, i menu di navigazione, la parte in fondo della pagina, i tasti di condivisione e i commenti spariranno dalla stampa.

Servizi esterni: un metodo alternativo che vi consiglio è quello di aggiungere un’icona in fondo al vostro articolo con la rappresentazione di una stampante che colleghi la pagina web ad un servizio internet di “friendly print”. Normalmente questi servizi non solo rappresentano la vostra pagina web con gli elementi essenziali da stampare, ma molte volte danno anche la possibilità all’utente che ha fatto la richiesta di convertire il documento in PDF o altro formato.  Per vedere un’esempio pratico di questa tecnica guardate questa pagina su http://goo.gl/ggG0b.