La maggior parte dei fogli di stile CSS utilizzati nei siti web sono progettati per offrire un risultato ottimale nella visualizzazione tramite il browser. Una conseguenza poco desiderabile di questa situazione emerge quando si prova a stampare una pagina web: l’impaginazione spesso salta, alcuni riquadri vengono tagliati, colori e sfondi non vengono conservati correttamente.
CSS per la stampa
Problemi di questo genere si verificano perché lo schermo ed il foglio di carta rispondono a due paradigmi concettuali differenti. Un documento da mostrare sullo schermo dovrà adattarsi alla risoluzione usata dall’utente ed avrà quindi un design almeno in parte ‘fluido’. Una pagina stampata invece è vincolata alle dimensioni del foglio ed ovviamente non può riadattarsi dinamicamente.
Una possibile soluzione a questo tipo di problemi è quella di usare fogli di stile molto semplici con larghezza dinamica e sviluppo prevalentemente verticale. Si tratta però di soluzioni poco adatte al web moderno e che non sfruttano in piano le potenzialità offerte dai fogli di stile. Una soluzione molto più interessante consiste invece nel creare regole CSS ottimizzate per la stampa che verranno attivate solo quando l’utente deciderà di stampare la pagina web.
Un foglio di stile amico della stampante
I fogli di stile CSS offrono due diverse soluzioni per gestire al meglio la stampa. Un primo metodo consiste nell’usare la propriatà @media per indicare una porzione del foglio di stile da applicare solo in fase di stampa.
Una seconda soluzione per molti versi preferibile consiste invece nel creare un vero e proprio foglio di stile separato per la stampa da richiamare nel blocco <head> della pagina HTML. Nelle prossime parti di questa guida vedremo in dettaglio questi due metodi.