css-stampa

Come molti web design sanno, uno degli elementi essenziali per creare pagine web è l’utilizzo dei CSS (Cascading Style Sheets, Fogli di stile a cascata) che permettono di modificare l’aspetto del testo e organizzare tutto il layout. Pochi però non sono a conoscenza che tramite CSS è possibile creare pagine ad hoc per la stampa.

Molte volte infatti, ci troviamo a dover stampare un testo o magari la ricevuta del pagamento della vacanza ed il risultato non è come quello sullo schermo; questo perché non c’è stata una particolare attenzione da parte dello sviluppatore.

Ad oggi sono diversi i metodi per stampare al meglio i contenuti del vostro sito web, andiamo a vederli:

L’attributo <link>

Il metodo più conosciuto per collegare un foglio di stile alla pagina HTML è il tag link. Esso viene accompagnato da tre attributi:

  1. rel, per indicare la natura della relazione tra il documento corrente e quello collegato;
  2. type, per indicare il mime type del documento collegato;
  3. href, che indica l’URI del file.

La sintassi è la seguente:

<link rel="stylesheet" type="text/css" href="foglio_di_stile_generico.css" />

C’è un altro attributo che possiamo omettere ed è “media”, che indica proprio a quali piattaforme deve essere applicato il foglio di stile. Il valore predefinito per questo attributo è “all”, quindi:

<link rel="stylesheet" type="text/css" href="foglio_di_stile_generico.css" media="all" />

Esistono diversi tipi di media type, ma quello che ci interessa è naturalmente “print”. Viene definito all’interno del nostro documento così:

<link rel="stylesheet" type="text/css" href="css_generico.css" />

<link rel="stylesheet" type="text/css" href="css_per_la_stampa.css" media="print" />

In questo modo la visualizzazione del sito da qualsiasi dispositivo utilizzerà il css generico, mentre per la stampa verrà utilizzato il secondo.

Naturalmente questo metodo prevede che possiamo accedere al file HTML e modificarlo (spesso nelle aziende ciò non è possibile, dato che c’è una rigida divisione tra codice back-end e codice di interfaccia).

C’è però da fare una considerazione: ogni foglio di stile dichiarato tramite il tag link provoca una richiesta HTTP, che dunque andrà ad aumentare il traffico sul nostro server. Ecco perché si preferisce usare uno dei metodi sotto, bisogna comunque dire che l’utilizzo del tag link è l’unico modo per filtrare Internet Explorer utilizzando i commenti condizionali.

Regola @import

Questo secondo metodo lo cito solo per correttezza, perché purtroppo non è compatibile con Internet Explore, quindi lascio a voi l’utilizzo.

Si collega il foglio di stile senza specificare il media type nella nostra pagina HTML, all’intrno del tag <head>:

<link rel="stylesheet" type="text/css" href="foglio_di_stile_generale.css" />

e si inserisce la regola @import nel file collegato:
/**
* file foglio_di_stile_generale.css
*/

@import url("foglio_di_stile_per_la_stampa.css") print;

Metodo @media

L’ultimo metodo che andiamo ad esaminare è secondo me il migliore, perché permette di definire in un unico css tutte le informazioni in modo da evitare inutili scaricamenti sul server. Su siti web che hanno un alto traffico di utenti è consigliabile optare per questa opzione.
L’uso è semplicissimo, basta racchiudere il css all’interno della dichiarazione @media, una per ogni tipo:

/**
* file foglio_di_stile_generale.css
*/
@media print {

/* regole css per la stampa */
}

@media screen {

/* regole css per lo schermo */

}

Purtroppo non esiste un css pronto all’uso, poiché le specifiche variano da pagina a pagina, ma posso elencarvi delle linee guida da tenere in considerazione:

  • Eliminate tutti gli elementi interattivi: questo va fatto usando l’attributo display:none sulle classi e gli id interessati.
  • Eliminate lo sfondo del background (background:none;), eviterete di far sprecare inchiostro al vostro cliente.
  • Togliete la sottolineatura ai link (se non lo avete già fatto per la visualizzazione normale) poiché a chi stampa non interesseranno più i collegamenti.
  • Un’importante questione da tenere in considerazione per il CSS di stampa è che le regole float e il posizionamento assoluto possono “tagliare” alcune parti della pagina, rendendole di fatto non stampabili. Per impedire che questo accada, è sufficiente impostare il comportamento predefinito per tutti gli elementi della pagina come mostrato sotto:

    @media print {
    body, h1, h2, div, ol, ul {
    float:none;
    margin:0;
    padding:0;
    position:static;
    }
    }

Se anche tuoi hai un’idea migliore o vuoi condividere la tua esperienza, scrivimi!

Condividi la pagina!