Definire il layout solo per lo schermo



Abbiamo presentato una buona quantità di layout, ma c'è ancora una questione da trattare: come preparare una pagina per la stampa. Provate a fare un anteprima di stampa dei siti web che visitate abitualmente. Risulterà che una buona percentuale di siti viene stampata decisamente male. È un aspetto importante e che merita un approfondimento.

Il punto centrale da considerare è che la larghezza sicura per la stampa di una pagina web è 560 pixels. Ciò significa, per fare un esempio, che una pagina realizzata con layout fisso largo 760pixels rischia di essere tagliata da uno o entrambi i lati. In questa prima sezione vedremo velocemente come preparare il layout alla stampa. Per ulteriori approfondimenti vi rimando agli articoli Css design: going to print (in inglese) di Eric Meyer e all'articolo "Stampe perfette di pagine web con i CSS".

Ci sono diversi modi per definire le regole per la stampa, li vedremo nel dettaglio spiegando come applicarli.

Definire il layout solo per lo schermo

Il modo più semplice per consentire una buona stampa è non definire regole per la stampa, e cioè lasciare che il foglio di stile venga usato solo a schermo. Ecco come fare:

<head>
    <title>Html</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">
        @import url("stilisito.css");
    </style>
</head>

Specificare il foglio di stile in questo modo ha due vantaggi fondamentali:

  • i browser moderni applicheranno il foglio di stile solo a schermo;
  • la pagina di stampa verrà quindi resa senza stili associati.

Per la stampa verranno usati gli stili di default del browser. Uno degli svantaggi di questa tecnica è che gli elementi della pagina verranno quindi stampati tutti, e nell'ordine di codice HTML.

Ultimi articoli CSS

Bordi multipli con 'box-shadow' di CSS3

Il 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 SVG

Utilizzare la funzione linear-gradient CSS per creare sfumature...

Stili specifici per l'orientamento dell'iPad con le Media Queries

Gestire con gli stili e le media queries le modalità di...

Campo per la ricerca con i CSS

Dedicare la giusta attenzione al modulo per le ricerche, componente...

Box model 'naturale' con border-box

Dimenticare per sempre i problemi legati al box model grazie ad un...

Altri articoli

Guide CSS

Guida CSS3

Scoprire e usare al meglio tutte le novità dell'ultima versione dei...

Guida CSS Tecniche essenziali

Testo, immagini, layout, form, liste, tabelle: soluzioni pronte per...

Guida CSS di base

I CSS servono per gestire tutto il layout di un sito Web. E'...

Altre guide

Newsletter @CSS

Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti