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}

41 / 41

Indice dei layout presentati nella guida

I Video di HTML.it

Alessandro Palumbo, Design per MongoDB