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}
Ultimi articoli CSS
Bordi multipli con 'box-shadow' di CSS3Il modo più rapido e semplice per circondare un box con più bordi di... |
Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVGUtilizzare la funzione linear-gradient CSS per creare sfumature... |
Stili specifici per l'orientamento dell'iPad con le Media QueriesGestire con gli stili e le media queries le modalità di... |
Campo per la ricerca con i CSSDedicare la giusta attenzione al modulo per le ricerche, componente... |
Box model 'naturale' con border-boxDimenticare per sempre i problemi legati al box model grazie ad un... |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |