[CSS] Stampare in internet

Premessa: un ringraziamento a html.it dove potete trovare nei dettagli la procedura e l’intera spiegazione sintattica.

Oggi ho dovuto rendere un sito stampabile in ogni sua pagina. Dopo un primo momento di crisi mi sono ricordato dei CSS (magici) e dell’attributo del tag di collegamento dei CSS media.

Esempio:

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

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

Questo collegamenti (inclusioni) permettono di utilizzare per qualsiasi media il primo CSS (stili.css) e di utilizzare "in aggiunta" il secondo CSS (stiliPrint.css) solamente per il media Print, cioè la stampante (reale o virtuale tipo pdfcreator).

A questo punto, con una buona strutturazione del sito, è possibile ridefinire solamente zone (ID) e classi dei CSS per fare in modo che il sito abbiamo una formattazione più stampabile possibile. Ad esempio:

• togliere alcune navigazioni inutili in una stampa
• togliere immagini troppo invasive e visualizzare al loro posto dei testi / titoli (H1,H2, …)
• impostare le dimensioni delle aree in percentuale, in modo possano adattarsi a qualsiasi formato della pagina
• impostare le dimensioni del testo in EM o in %, in luogo di una rigida dimensione in pixel
• varie ed eventuali a seconda del gusto

Se, ad esempio, il sito è tutto all’interno di una tabella ID="work" di dimensioni 860px potremo procedere così.

foglio stili.css

#work{width: 860px; color: …; background-color: …; border: …;}

#stampaButton{float:right; padding: 10px}

foglio stiliPrint.css (ridefiniamo solamente quello che ci serve)

#work{width: 100%}

/* nascondo il bottone di stampa */

#stampaButton{display:none}

Questa modalità di utilizzo è proprio quel CASCADING che fa parte dell’acronimo CSS (Cascading Style Sheet), cioè la possibilità di definire a cascata uno stile ridefinendo (top-bottom) lo stile in fasi successive del foglio, o meglio ancora dei fogli di stile collegati.

Sottolineo inoltre che nascondendo, o operando su una ID con più figli al suo interno, le modifiche sono propagate chiaramente ai figli.

Esempio:

<div id="work">

   <div id="text">

      <div id="intro">

      </div>

   </div>

   <div id="menu">

   </div>

<div>

Nascondendo nel CSS di stampa l’ID "text" (#text{display:none}) anche intro non sarà più visibile, in quanto il "contenitore padre" non è visibile.

Tutto ciò permette di avere un sito fatto in un modo "internettiano" ed un sito fatto appositamente per la stampa.

Lo stesso procedimento è applicabile anche per siti accessibili, senza la necessità di dovere ridefinire completamente lo schema CSS per sito "grafico" e sito "accessibile".

Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: [CSS] Stampare in internet scritto da Merlinox.