La terza soluzione che si può adottare è quella di ridefinire nel foglio di
stile le regole CSS per lo schermo. Ecco come fare attraverso le dichiarazioni
della sezione head:
<head>
<title>Html</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" >
@import url("stilisito.css");
@import url("stilistampa.css") print;
</style>
</head>
Notare come, se non viene specificata l'applicabilità di un foglio di stile,
le sue regole verranno applicate a tutti i dispositivi possibili, quindi anche
la stampa. In tal caso, quindi, nel foglio di stile per la stampa (che avrà priorità
maggiore) andremo a ridefinire solo le regole necessarie che differiscono da quelle
del CSS generico.
Questa soluzione è senz'altro la più elaborata, e può andar bene se si vuole
mantenere nella stampa una forte somiglianza con la versione a schermo. C'è da
dire che i layout fluidi si adattano perfettamente alla larghezza della pagina
di stampa, e in tal caso se la stampa è buona e se vogliamo mantenere la stessa
impaginazione o le scelte tipografiche usate a schermo si può anche non definire
un insieme di regole per la stampa.
Se abbiamo realizzato un layout fisso o elastico, renderlo fluido per la stampa
è molto semplice, ecco la regola da aggiungere al CSS per la stampa:
div#container{width: auto}
Non specificare fogli di stile per la stampa può andare bene per layout fluidi
a una e due colonne, mentre per il layout fluidi a tre colonne bisognerà considerare
che la larghezza dedicata alla colonna centrale sarà proporzionale a 560 pixels
(è infatti questa la larghezza totale dell'area sicura per la stampa) meno la
larghezza delle due colonne. Se per esempio le due colonne sono larghe 170pixels
l'una, la larghezza utile alla colonna centrale sarà il 40% della larghezza utile
di stampa. Una percentuale a parer mio troppo piccola. In questo caso si può pensare
di nascondere dalla stampa, per esempio, la colonna di navigazione.
Ecco quindi il foglio di stile minimale per la stampa che va bene per layout
a tre colonne con float e posizionamenti, siano essi fluidi, liquidi o elastici:
div#container{ width: auto} /*rende il layout a larghezza di stampa*/
div#navigation{display: none} /*non stampa la navigazione*/
div#content{margin-left: 0} /*elimina il margine sinistro*/
Se volessimo lasciare tutta la larghezza di stampa per la colonna centrale, la
colonna extra si può rendere static e
a seconda dell'ordine di codice HTML (e quindi della strategia usata: float o
posizionamenti assoluti) questa verrà stampata in orizzontale sopra o sotto i
contenuti. Ecco il codice da utilizzare in questo caso:
div#container{width: auto}
div#navigation{display: none}
div#content{margin: 1em 0}
div#extra{width: auto; float: none; position: static} /*rende static la colonna extra*/
Stampa di sfondi e bordi
Abbiamo visto velocemente come preparare una stampa migliore per una pagina
web. Ci sono altre questioni di cui parlare brevemente: il colore e le immagini
di sfondo non vengono stampate dal browser secondo le impostazioni predefinite.
L' unica cosa che viene stampata per default sono i bordi, che sarebbe meglio
eliminare in fase di stampa. Ecco il codice:
div#container{ border-width: 0}