CSS  »  Articoli  »  CSS hack e tecniche cross browser 

Sono davvero molti i siti che non hanno un CSS per la stampa, con il risultato che i visitatori si trovano a volte delle pagine stampate che decisamente non rendono giustizia alla versione su schermo. Preparare un CSS per la stampa è un operazione piuttosto semplice: in questo articolo vedremo otto consigli pratici per produrne facilmente uno. Cominciamo subito.

1. Ridefinire il CSS a schermo

La prima cosa da fare nel preparare un CSS per la stampa è decidere se prepararne uno specifico da zero oppure usare come base il CSS per lo schermo. Tra le due non c'è una scelta migliore in assoluto, e in ogni caso il CSS per la stampa risultante non richiederà molto lavoro. Personalmente preferisco usare come base di partenza il CSS per lo schermo così da avvvantaggiarmi un po' e avere una versione stampata che mantiene una maggiore somiglianza con la versione a schermo. Se dichiariamo nell'head della pagina un CSS senza specificare il media a cui si riferisce, questo avrà effetto su tutti i media, incluso la stampa. Basterà quindi definire un CSS per la stampa così da ridefinire quello usato per lo schermo. Ecco un esempio, in cui il file "main.css" verrà adottato da tutti i media, mentre il file "print.css" è quello specifico per la stampa.

È importante con questo approccio l'ordine delle dichiarazioni: dato che il CSS per la stampa andrà a ridefinire quello generico, dovrà essere dichiarato per ultimo.

2. Specificare un font size in punti

Questo punto non è indispensabile, ma soprattutto se si sono usati i pixel per lo schermo, è bene ridefinire la dimensione dei caratteri in punti, dato che questa misura è nata proprio per la stampa. Se si è utilizzato un approccio proporzionale nel CSS generico, dichiarando una misura di base per il body e percentuali o em per titoli e altri elementi, sarà facile trasformare tutto in punti con una sola dichiarazione:

3. Ridefinire la larghezza del container principale

Questo punto è senza dubbio il più importante in un CSS per la stampa. Sovente ci si trova infatti a stampare una pagina web e vedersi il contenuto tagliato sul lato destro. Se non si è usato un layout liquido è fondamentale far sì che il layout sia liquido in fase di stampa: basta ridefinire su "auto" la larghezza del contenitore principale. Nel caso il suo id sia "container" la regola CSS necessaria sarebbe:

4. Nascondere navigazione e sezioni non indispensabili

Altro punto importantissimo: nella versione stampata navigazione e altre sezioni non indispensabili andrebbero nascoste. Basterà impostare su "none" la proprietà display. Generalmente basta usare una sola regola, accorpando tutti gli elementi da nascondere. Per esempio la seguente regola nasconde il menu, la sezione dei link e i banner, ipoteticamente individuati da id "menu", "links" e "banner":

5. Eliminare float e posizionamenti assoluti

Float e posizionamenti assoluti, soprattuto se usati per il layout, possono dare problemi in fase di stampa: oltre che per questioni di larghezza di area di stampa anche per qestioni di resa. Anche in questo caso basterà usare una regola che mostrerà elementi posizionati assolutamente e float nella posizione naturale del flusso di pagina, annullando le proprietà precedentemente impostate. La regola seguente annulla float e posizionamenti assoluti sul menu e la sezione delle news, che verranno quindi stampati in ordine di codice HTML:

Eventualmente sarà necessario sistemare i margini delle sezioni che sulla versione a schermo sono affiancate da elementi float o posizionati assolutamente, indipendentemente dal fatto che questi ultimi si vogliano stampare o meno.

6. Eliminare gli sfondi

C'è da premettere che gli sfondi delle pagine web non vengono stampati di norma dal browser, a meno che l'utente non decida di volerli stampare attraverso le impostazioni del browser. In ogni caso è importante quindi eliminarli e rispecificare il colore del testo soprattutto se a schermo è chiaro. La seguente regola specifica testo nero e sfondo bianco per il body, il container principale e l'header:

7. Image replacement

Altro aspetto essenziale è rivedere la tipografia per lo schermo, soprattutto nel caso si siano usate tecniche di image replacement. Fatta eccezione della List-Item Image Replacement, tutte le altre tecniche non garantiscono la stampa del testo rimpiazzato, dato che le immagini di sfondo non vengono stampate di default.

A seconda della tecnica utilizzata, sarà quindi indispensabile annullare per la stampa tutte le dichiarazioni atte a nascondere in testo per mostrare un'immagine di sfondo. Il rischio è infatti che nè il titolo testuale, nè l'immagine di background usate per il replacement vengano stampate, con conseguente perdita di informazione nella versione su carta.

8. Aggiungere gli url dei link e contenuto aggiuntivo nella versione stampata

Concludiamo con una finezza che non ha, purtroppo, compatibilit‡ con Internet Explorer, ma sugli alti browser quali Opera, Safari e Firefox può costituire senza dubbio un ausilio non indifferente sulla versione stampata. Grazie allo pseudo-elemento :after e la proprietà content in questi browser è possibile infatti stampare dopo i link il loro indirizzo tra parentesi attraverso una sola regola:

Conclusioni

In questo articolo abbiamo visto brevemente otto consigli pratici per preparare facilmente una versione di stampa, spesso trascurata e che in realtà non richiede molto lavoro, dato che si tratta solo di riprendere il CSS per lo schermo e semplificarlo per la versione su carta. Anche in questo caso è importante una buona fase di test, anche solo attraverso l'anteprima di stampa con i diversi browser. Alla prossima.

Altri articoli

Altre guide

Altre newsletter