Ciao a tutti da Cris, per il video cast 52 di CSS-Tricks.com

Oggetto di questo screencast sono i CSS per la stampa che vengono usati quando si stampa una pagina del browser tramite Ctrl+P o comandi analoghi.

È infatti possibile usare per la stampa diversi fogli di stile rispetto a quelli usati nel browser e controllare di conseguenza quali elementi mostrare o nascondere nella pagina stampata.

Questa opzione è molto utile per nascondere alcuni elementi nella pagina stampata, cambiare le dimensioni del font per rendere le scritte più leggibili su carta.

Abbiamo insomma un controllo pressochè totale della stampa grazie ai CSS dedicati.

Lo stesso sito css-tricks.com utilizza questa tecnica, se proviamo ad aprire un articolo e ne visualizziamo l'anteprima di stampa possiamo vedere che l'aspetto è diverso da quello del sito nel browser

Nel sito abbiamo pubblicità, footer, elementi di design ed altro ancora collegamenti ad RSS e in generale elementi ovviamente inutilizzabili in una versione stampata

Se stampiamo un articolo è perchè vogliamo leggerlo comodamente su un foglio o passarlo a qualcuno in forma cartacea, non vogliamo quindi elementi di design, link, elementi decorativi o altro: vogliamo solo leggere l'articolo!

Grazie ad un buon uso dei CSS per la stampa non dovremo fare vari copia e incolla in word ma basterà stampare la pagina dal browser

Per un webdesigner è molto importante conoscere questi aspetti e in questo screencast vedremo di apprendere diverse nozioni riguardo a questo argomento

Bene, questo è l'articolo che useremo per i nostri esempi, "Browser detection is bad"

Ho scelto questo articolo perchè in linea di massima sono d'accordo con quanto esprime...ma ora non importa, questo è solo l'articolo che useremo per i nostri CSS per la stampa

Possiamo vedere nella pagina diversi elementi che potremmo evitare di stampare, sono elementi decorativi o pubblicitari che hanno senso sul sito ma non sulla carta. Ha però molto testo e quindi è un ottimo esempio per quello che vogliamo ottenere coi CSS per la stampa

Iniziamo. Impostiamo un foglio di stile con nome print.css. (non fate caso agli altri file che vedete indicati, sono relativi al tema di wordpress del sito CssTricks)

Nel mio caso come vedete esiste già il file print.css

Durante lo screencast vi mostrerò come ricrearlo interamente da zero spiegando i vari passaggi

Vedrete che il procedimento alla fine risulterà relativamente semplice!

Per vedere come agisce attualmente il foglio di stile già esistente su CSS Tricks proviamo a stampare l'articolo, se possibile evitando di sprecare carta.

Premiamo Ctrl+P o scegliamo l'opzione di stampa e se possiamo scegliamo come stampante una virtuale che permetta di creare un file PDF, o in alternativa scegliamo di visionare solo l'anteprima di stampa

Nel mio caso vedete che ho creato un PDF che riporta tutto l'articolo stampato su più pagine, anche l'anteprima o la stampa su carta daranno un risultato uguale o quantomeno simile

Notiamo subito l'enorme differenza rispetto a come vedevamo l'articolo nel sito!

Non ci sono banner, menu di navigazione, footer. Abbiamo solo titolo del sito, titolo dell'articolo, data dell'articolo, autore dell'articolo e poi il testo con alcuni stili di base per evidenziare paragrafi e frasi

Il css non è comunque perfetto, come notiamo dal fatto che ci siano alcune pagine con un po' di spazio vuoto o il link per la modifica degli articoli che ovviamente è superfluo su carta, così come sarebbe un box per la ricerca. Vedremo durante lo screencast (prossime puntate) le tecniche utili per eliminare questi e altri elementi.