Sei qui: CSS Zibaldone

Impaginare una tesi di laurea con i CSS

Sommario

  1. 1. Introduzione
  2. 2. Requisiti necessari per la preparazione del lavoro
  3. 3. Le parti della tesi
  4. 3.1 Il frontespizio
  5. Testo o immagini?
  6. 3.2 La pagina principale
  7. 3.3 Le pagine dei capitoli o sezioni
  8. Hack per Internet Explorer
  9. 3.4 Le note
  10. Testo giustificato
  11. 3.5 Numerazione
    1. 3.5.1 Numerazione dei capitoli o sezioni
    2. 3.5.2 Numerazione dei sommari
  12. 4. Usare fogli di stile già pronti
  13. 5. Stampa delle pagine web

1. Introduzione

Le tesi di laurea hanno spesso vita difficile. Frutto del lavoro appassionato degli studenti, di frequente finiscono in angoli bui degli archivi universitari, avendo visto la luce solo al momento della discussione. Ma, grazie al Web, è oggi possibile fare in modo che il lavoro degli studenti non finisca nel dimenticatoio. Di fatto, possedendo un proprio spazio web o uno spazio messo a disposizione dall'università, è possibile pubblicare la propria tesi come un sito web, farla indicizzare dai principali motori di ricerca e condividerla con una comunità molto più ampia del circuito universitario.

Grazie ai CSS possiamo rendere la nostra tesi più accessibile, più snella, operando al contempo un controllo completo sulla sua visualizzazione. Scopo del presente articolo è quello di illustrare alcune tecniche di impaginazione con i CSS, senza con questo avere la pretesa dell'esaustività completa sull'argomento.

In questo documento si farà riferimento a browser come Internet Explorer, Firefox ed Opera. Nello specifico sono stati presi come riferimento Internet Explorer 6 per Windows, Firefox 1.5 ed Opera 8.x e 9. Si può scaricare l'articolo completo di esempi in formato ZIP.

Torna al sommario

2. Requisiti necessari per la preparazione del lavoro

I requisiti principali per la realizzazione del nostro lavoro non sono meramente tecnici, ma di approccio. Dobbiamo sgombrare la nostra mente da quei pregiudizi secondo cui il fine giustifica i mezzi, e che alla fine ciò che conta è solo la visualizzazione finale del lavoro, escludendo i mezzi usati.

Ancora una volta, quindi, torniamo a parlare dell'annoso problema (e non solo) delle tabelle usate per l'impaginazione. Secondo il W3C, il Consorzio che si occupa dello sviluppo e della diffusione degli standard del Web, le tabelle devono essere usate per rappresentare dati tabulari (come orari, dati statistici ecc.) e non per l'impaginazione. Si legge nelle specifiche HTML 4.0:

“Le tabelle non dovrebbero essere usate come mezzo per impaginare il contenuto di un documento, poichè ciò può presentare problemi quando tale documento viene reso a media non visuali. In aggiunta, se usate con la grafica, queste tabelle possono forzare gli utenti a scrollare orizzontalmente il documento per vedere una tabella progettata su un sistema con un'area di visualizzazione più ampia. Per ridurre questi problemi, gli autori dovrebbero usare i fogli di stile per controllare l'impaginazione piuttosto che le tabelle.”

L'uso delle tabelle per l'impaginazione è un retaggio di un'epoca in cui non c'erano ancora i CSS (più di dieci anni fa!), e quindi gli autori erano costretti ad usare elementi HTML come <table> per controllare il posizionamento delle immagini, dei paragrafi di testo, ecc. Con l'andare del tempo si sono scoperti anche molti effetti e danni collaterali dell'uso delle tabelle per l'impaginazione, quali:

Con questo non significa che una pagina strutturata con i CSS debba essere necessariamente scarna. Al contrario, può essere incredibilmente ricca di immagini ed effetti grafici, come testimonia il progetto CSS Zengarden, di cui è recentemente uscito il libro Lo zen e il design CSS, edito in Italia da Arnoldo Mondadori Informatica.

L'obiezione più comune rivolta ai fogli di stile è quella secondo cui non si otterrebbero risultati simili tra i vari browser (Internet Explorer, Firefox, Opera, Safari ecc.) a causa delle loro differenti interpretazioni del codice CSS. L'obiezione si riferisce, nello specifico, ai bachi di alcuni browser (come Internet Explorer) nell'implementazione dello standard CSS (le specifiche W3C CSS2 e CSS2.1, queste ultime ancora nella fase di bozza di lavoro).

È bene precisare subito che per questi problemi (e bachi) esistono delle soluzioni ben testate, come quelle presenti sul sito Position Is Everything. Inoltre spesso una soluzione vincente consiste nel trovare un punto di equilibrio tra i vari browser, senza dimenticare i già citati benefici dell'uso dei CSS.

Fin qui ci siamo occupati dell'aspetto delle nostre pagine, ossia della loro presentazione (gestita dai CSS). Ora occupiamoci della struttura delle nostre pagine e del loro contenuto. Strutturare il contenuto è fondamentale: solo grazie a una strutturazione rigorosa possiamo ottenere buoni risultati di posizionamento nei motori di ricerca, indipendentemente da altri fattori (quali la popolarità del nostro sito) che spesso dipendono da elementi che possiamo controllare solo in parte.

Dobbiamo innanzitutto imparare a scrivere scrivere codice HTML semantico, ossia usare ogni elemento HTML per la funzione (o ruolo semantico) per cui è stato creato. Così <em> servirà ad enfatizzare il testo, <strong> a dargli maggior risalto rafforzandolo, <p> a marcare i paragrafi, <h1>...<h6> i titoli (o intestazioni) e così via.

Un altro articolo interessante sull'argomento è La nuova filosofia di progettazione web di Piero Fissore, formatosi presso Html.it, sito da sempre all'avanguardia nella didattica e nell'approfondimento delle tematiche relative agli standard del Web.

A tal proposito è utile soffermarsi sulla scelta del tipo di linguaggio da usare per le nostre pagine web. In altre parole, HTML o XHTML? Attualmente, secondo le tendenze odierne del Consorzio e della comunità web, il linguaggio da utilizzare dovrebbe essere XHTML. Sono disponibili due versioni di tale linguaggio: XHTML 1.0 e XHTML 1.1 (si consultino a tal proposito le FAQ e alcuni link (collegamenti) utili).

È bene precisare subito che per gli scopi da noi prefissati la scelta del linguaggio è interamente facoltativa. In altre parole, per la nostra tesi non esiste un "obbligo" perentorio verso questo o quel linguaggio. Da tenere presenti sono tuttavia tre aspetti fondamentali:

  1. Scrivere codice semantico, come descritto in precedenza.
  2. Evitare elementi presentazionali (come <font>) nel codice a favore dell'uso dei CSS.
  3. Evitare le tabelle nell'impaginazione in favore dei CSS.

Chiariti questi punti, è bene ricordare che anche un "guru" dei CSS come Eric Meyer usa per il suo sito HTML, fermo restando il fatto che l'impaginazione è affidata interamente ai CSS.

Incidentalmente abbiamo citato il tema dell'accessibilità delle nostre pagine, tema assai attuale in un Web divenuto sempre più globale. È uno degli obiettivi primari del W3C quello di raggiungere l'accessibilità universale al Web, ossia l'accesso di tutti ai contenuti del Web. Vi sono vari fattori che possono incidere su tale accessibilità:

Questo elenco è ovviamente incompleto. Per maggiori informazioni si consulti il documento Handimatica 2004. Favorire l'accesso delle persone disabili agli strumenti informatici: non solo ad Internet presso la sezione italiana del W3C, e la Web Accessibility Iniziative del Consorzio.

Addentrandoci nell'argomento ne scopriamo l'incredibile complessità. Una guida fondamentale sull'argomento è Siti ad elevata accessibilità di Michele Diodati, il cui sito è un punto di riferimento in Italia per chi si occupa di accessibilità ai contenuti del Web.

Quello che possiamo fare noi nel concreto della nostra pubblicazione è rispettare le norme di buona scrittura del codice (X)HTML e usare i CSS per l'impaginazione, oltre a osservare le pratiche di accessibilità proposte dai siti dedicati all'argomento (e ovviamente le linee guida tracciate dal Consorzio). Quello che resta da fare è spesso affidato alla logica ed al buon senso.

Per esempio, alcuni utenti potrebbero trovare disagevole navigare da un capitolo all'altro della nostra tesi. Potremmo, come alternativa, inserire tutto il contenuto in un unico file HTML, avvertendo l'utente delle sue dimensioni (e dare anche l'opportunità di scaricarlo in formato compresso), o inserire tutto il sito-tesi in una cartella che poi comprimeremo. Se proponiamo per il download anche un unico file PDF, sarebbe bene fornirlo anche in versione compressa se questo supera una certa dimensione (per esempio oltre i 200 Kb), onde non mettere in difficoltà chi ha una connessione lenta.

Ancora: se usiamo immagini di particolare significato per la comprensione della nostra tesi (come schemi, diagrammi, formule ecc.), sarebbe bene inserire accanto ad esse un collegamento (link) ad una pagina di descrizione dell'immagine, in cui illustreremo dettagliatamente il contenuto dell'immagine. Questo si rivela utile non solo per gli utenti non-vedenti, ma anche per chi trova di difficile comprensione schemi o formule. Un esempio di tale tecnica si trova nelle specifiche CSS2 e CSS2.1. Detto questo, è tempo di metterci al lavoro.

Torna al sommario

3. Le parti della tesi

Quelle che proporrò di seguito sono delle parti puramente indicative di una tesi di laurea. È chiaro che ogni tesi, a seconda dell'argomento trattato, può aver bisogno di un numero maggiore o minore di parti, come pure di un tipo di impaginazione differente. Questi aspetti sono ad ovvia discrezione dell'autore, il che vuol dire che questo articolo non può sostituirsi alla sua fantasia e creatività, fermo restando il fatto che tale fantasia e creatività dovrebbero tenere in considerazione l'accessibilità stessa delle pagine, come detto in precedenza.

Il tipo di impaginazione che proporrò è volutamente essenziale, onde meglio evidenziare le tecniche CSS di base e lasciare spazio a future implementazioni. Per ogni esempio vedremo le parti salienti del codice CSS, ma sappiate fin da ora che potete visualizzare l'intero codice per ogni pagina semplicemente selezionando l'opzione di visualizzazione del sorgente nel vostro browser (per esempio, in Internet Explorer, cliccate su "Visualizza" e poi su "HTML").

Torna al sommario

3.1 Il frontespizio

Il frontespizio è il portale d'ingresso della nostra tesi. Di solito, nella versione stampata, è composto dalle seguenti parti:

Questo esempio mostra un frontespizio di base che ricalca quasi fedelmente il modello sopra proposto. Per prima cosa stabiliamo un contenitore di base in cui inserire i contenuti della pagina:

html {background: #ccc;}

body {
margin: 2em;
padding: 0;
background: #fff;
color: #000;
font: 100% Georgia, serif;
border: 0.4em double #000;
}

Queste regole CSS formattano gli elementi <html> e <body>. Quest'ultimo diventa il nostro contenitore di base. Notiamo subito che, impostando la proprietà stenografica (o abbreviata) 'background' su <html>, lo sfondo della pagina sarà grigio, mentre <body>, per contrasto, avrà uno sfondo bianco (#fff), con il colore del testo in nero (#000) impostato tramite la proprietà 'color'. Il font con cui è visualizzato il testo è Georgia, impostato tramite la proprietà stenografica 'font', con cui stabiliamo anche le dimensioni del font (100%).

Si noti come sia stata usata una misura percentuale invece del più usuale px (pixel), questo perchè Internet Explorer non permette di modificare le dimensioni dei caratteri se queste sono espresse in pixel. Oltre a Georgia, nella proprietà 'font' abbiamo specificato anche una famiglia generica di font, in questo caso serif. È sempre bene specificare una famiglia generica di font, nel caso in cui sul computer dell'utente non fosse installato il font Georgia. In tal caso verrebbe selezionato un font simile al Georgia, appartente come lui alla famiglia serif.

Nella scelta dei font in genere si sceglie il criterio della leggibilità, ma è bene precisare che tale criterio non dipende esclusivamente dal tipo di font, ma anche da fattori quali la spaziatura tra le lettere, la grandezza dei caratteri, l'interlinea, l'allineamento del testo ecc. In genere sul Web si tende a preferire i font della famiglia sans-serif (senza grazie) perchè, a parità di dimensioni, i loro caratteri risulterebbero di più facile lettura rispetto ai corrispettivi font della famiglia serif (con grazie). Questo è vero solo in parte. Se si paragonano, ad esempio, due tipi di font come il Verdana e il Times New Roman, a parità di dimensioni l'esito del confronto volgerà sicuramente a favore dei font sans-serif. Se invece, come in questo caso, usassimo il font Georgia, unitamente agli altri fattori citati sopra, noteremo come la leggibilità del font serif aumenti di molto. In definitiva, non esiste una scelta obbligata verso questa o quella famiglia, poichè i fattori da tener presente sono molteplici. La cosa fondamentale da tenere presente è che occorre sempre usare misure relative per i font, in modo da consentire all'utente di modificarne a piacimento le dimensioni.

Tornando al nostro CSS, <body> è centrato nella pagina tramite la proprietà stenografica 'margin', che imposta in un'unica dichiarazione rispettivamente il margine superiore (top), destro (right), inferiore (bottom) e sinistro (left) dell'elemento. Notiamo infine il bordo applicato all'elemento tramite la proprietà stenografica 'border', che imposta in un'unica dichiarazione rispettivamente il bordo superiore, destro, inferiore e sinistro dell'elemento. Il bordo appare raddoppiato ('double') e di colore nero.

A questo punto passiamo a definire l'intestazione principale della pagina. Il codice (X)HTML è:

<body>
<h1>
Università degli studi
<span>Gabriele D'Annunzio</span>
</h1>
...
</body>

Ed ecco il codice CSS:

h1 {
margin: 0;
padding: 1.5em 2em;
font-size: 2em;
font-weight: 600;
color: #666;
background: #fbfbff;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid;
}

h1 span {
color: #000;
font-size: 90%;
font-weight: 600;
font-family: "Times New Roman", Times, serif;
text-transform: capitalize;
letter-spacing: 0.1em;
display: block;
margin-top: 1.2em;
}

Per l'elemento <h1> impostiamo il posizionamento questa volta attraverso la proprietà stenografica 'padding', con due valori: il primo (1.5em) si riferirà al cuscinetto (padding) superiore ed inferiore dell'elemento, mentre il secondo (2em) a quello destro e sinistro. Abbiamo usato l'unità di misura relativa em, che si riferisce alla misura del font in uso nell'elemento genitore (<body>). Considerando che l'elemento genitore ha una dimensione del font pari al 100%, un'uguaglianza (approssimativa) è 100% = 1em = 14px (circa), da cui calcoleremo poi le altre misure. Per ulteriori dettagli sulle misure, si consulti il relativo capitolo delle specifiche.

Con questo elemento facciamo la conoscenza di tre importanti proprietà del testo: 'text-align', 'text-transform' e 'letter-spacing'. Con la prima impostiamo l'allineamento del testo (in questo caso al centro con 'center'), con la seconda controlliamo se le lettere del testo saranno maiuscole o minuscole (in questo caso saranno tutte maiuscole grazie ad 'uppercase'), mentre con la terza gestiamo lo spazio tra le lettere del testo (in questo caso lo spazio sarà di 0.1em). Per ulteriori informazioni su tali proprietà si consulti il relativo capitolo delle specifiche.

A questo punto dobbiamo formattare la parte di testo relativa a "Gabriele D'Annunzio". Abbiamo deciso di usare un generico elemento <span> che ben si presta allo scopo, essendo tale parte di testo concettualmente legata a "Università degli studi". Per selezionarlo usiamo un selettore discendente (<h1> <span>) che seleziona un elemento se e solo se tale elemento discende da <h1> (per i selettori, si consulti il relativo capitolo delle specifiche). Vogliamo che tale parte di testo compaia su una nuova riga. Tradizionalmente avremmo dovuto usare l'elemento <br />, ma i CSS ci consentono un controllo più preciso. Impostando infatti l'elemento <span> su 'block' (blocco) tramite la proprietà 'display' otteniamo l'effetto desiderato, poichè ogni elemento a livello di blocco crea automaticamente una nuova riga.

Testo o immagini?

Ora, i più esigenti si saranno certamente accorti del fatto che in questa intestazione sono stati usati font comuni come il Georgia e il Times New Roman. E se avessimo voluto usare un font come Morpheus? Questo font è molto suggestivo e di sicuro effetto, ma purtroppo non è molto diffuso. In origine, le specifiche CSS2 prevedevano delle proprietà per il download (scaricamento) dei font dal Web da parte del browser. Istruito da tali proprietà, il browser avrebbe dovuto scaricare il font Morpheus da un sito web e visualizzarlo nella pagina se l'utente non aveva tale font installato sul proprio pc.

Il condizionale purtroppo in questo caso è d'obbligo, in quanto nessun browser ha poi supportato tali proprietà, costringendo il Consorzio a rimuoverle nella revisione 2.1 (si confronti in tal senso il capitolo sui font delle specifiche CSS2 e il suo corrispettivo nei CSS2.1).

Che fare? La soluzione più immediata è stata quella di usare dei programmi di grafica per creare un'intestazione con il font Morpheus e poi inserirla ovviamente come immagine tramite l'elemento <img />, affidando all'attributo alt il compito di riportarne il contenuto testuale. Tuttavia, come ha giustamente fatto notare Gianluca Troiani nel suo libro CSS. Guida completa, tale tecnica entra in crisi quando si tratta di realizzare qualcosa di più complesso di una semplice stringa testuale.

Entrano qui in gioco quelle tecniche che cadono sotto la definizione di sostituzione del testo con immagini (text replacement). Per far ciò si sfrutta una caratteristica dello sfondo degli elementi impostato tramite i CSS, ossia la possibilità di avere un'immagine di sfondo (tramite la proprietà 'background-image'), di gestirne la posizione (tramite la proprietà 'background-position') e controllarne la ripetizione (tramite la proprietà 'background-repeat'). Tutte queste proprietà possono essere espresse insieme grazie alla proprietà stenografica 'background'.

Quello che vogliamo, sostanzialmente, è che sulla pagina venga visualizzata la nostra scritta col font Morpheus, ma non il contenuto testuale, per esempio, di un elemento <h1>, ossia solo l'immagine di sfondo di tale elemento. Per prima cosa, creiamo il nostro titolo con un programma di grafica, per esempio realizzando un'immagine trasparente di 600 x 100 pixel. Poi applichiamo la proprietà stenografica 'background' all'elemento <h1>:

h1 {
background: url(titolo-morpheus.gif) no-repeat top left;
width: 600px;
height: 100px;
}

Si noti come 'url(titolo-morpheus.gif)' si riferisca alla proprietà 'background-image', 'no-repeat' a 'background-repeat' e 'top left' alla proprietà 'background-position'. Il percorso del file richiamato da 'background-image' qui si riferisce ad un file che si trova nella stessa directory del nostro file CSS. Se il file si trova in un'altra directory dovremo specificarne il percorso. Abbiamo dovuto inoltre specificare una larghezza ed un'altezza per l'elemento <h1> tramite, rispettivamente, le proprietà 'width' e 'height' usando i pixel come unità di misura a causa delle dimensioni intrinseche dell'immagine di sfondo.

Con questo non abbiamo eliminato però il problema di fondo, ossia la visualizzazione del contenuto testuale dell'elemento <h1>. Poichè sarebbe inutile e scorretto inserire un elemento <h1> vuoto (in quanto i lettori di schermo degli utenti non-vedenti in questo caso non leggerebbero nulla), dobbiamo pensare a qualcosa di diverso. Cominciamo col rivedere il codice (X)HTML della nostra pagina:

<h1><span>Titolo Morpheus</span></h1>

Quindi dobbiamo trovare un modo di far "sparire" l'elemento <span>, che racchiude il contenuto testuale dell'elemento <h1>, dalla finestra del browser:

h1 span {
position: absolute;
top: -1000em;

La proprietà 'position', impostata su 'absolute', rimuove completamente il contenuto dell'elemento dal flusso del documento, spostandolo rispetto al limite di riferimento del suo blocco contenitore. In questo caso 'top' specifica di quanto viene spostato al di sotto del limite del suo blocco contenitore. Tuttavia, poichè è stato specificato un valore negativo, lo spostamento avviene sopra il limite superiore del suo blocco contenitore. Qui il valore è così alto (-1000em) che il contenuto dell'elemento sparisce dalla finestra del browser. Era quello che volevamo. L'esempio completo mostra il risultato finale. Per ulteriori informazioni sul concetto di blocco contenitore, di limite e di posizionamento, si consultino i capitoli 8, 9 e 10 delle specifiche. Vi sono molte altre tecniche di sostituzione del testo che meriterebbero di essere citate, ma rischieremmo di andare troppo oltre l'argomento specifico di questo articolo. Si faccia comunque riferimento alla guida di Gianluca Troiani.

Torna al sommario

Riprendiamo dunque il discorso continuando con la parte del nostro frontespizio che racchiude il logo dell'università. Il codice (X)HTML è:

<body>
<div id="logo">
<img src="logo.gif" alt="Logo dell università" />
</div>
...
</body>

Avrete notato come <img> è scritto come <img />. Questo perchè il tipo di linguaggio usato negli esempi è XHTML 1.1 e non HTML. Bisogna sempre tenere in considerazione queste differenze. Il CSS:

div#logo {
margin-bottom: 1.6em;
margin-top: 1.6em;
padding: 0;
text-align: center;
}

div#logo img {
display: block;
margin: 0 auto;
padding: 5px;
background: #eee;
width: 200px;
height: 254px;
border: 1px solid #000;
}

La cosa interessante da notare qui è il metodo con cui è stata realizzata la centratura dell'immagine, metodo che si può applicare anche a tutti gli altri elementi della pagina. A norma di regola, per centrare un elemento sarebbe sufficiente impostare i suoi margini destro e sinistro su 'auto'. Tuttavia, Internet Explorer non rispetta tale direttiva, centrando invece gli elementi con la proprietà 'text-align' impostata su 'center' per il genitore dell'elemento da centrare. Per ottenere una piena compatibilità tra browser, è necessario utilizzare contemporaneamente entrambe le tecniche. Se l'elemento centrato dovrà contenere del testo, per ripristinare l'allineamento originario si può specificare un valore per 'text-align' diverso da 'center' (per esempio, 'text-align: left').

Significativo, infine, è il posizionamento del nome del relatore/relatrice e del laureando/laureanda nel nostro frontespizio. L'(X)HTML:

<body>
<div id="firme">
<p class="relatore">...</p>
<p class="laureando">...</p>
</div>
...
</body>

Il CSS:

div#firme {
margin: 3em 0;
margin-bottom: 0;
padding: 0;
height: 100%;
}

.relatore, .laureando {
width: 16em;
font-size: .9em;
margin: 0;
padding: 1em;
}

.relatore {float: left;}
.laureando {float: right;}

p {
margin: 0;
padding: 0;
}

I problemi cominciano proprio in questo punto. La proprietà 'float' serve a rimuovere il contenuto di un elemento dal flusso del documento, ma, a differenza del posizionamento assoluto (la proprietà 'position' impostata su 'absolute'), il contenuto degli altri elementi circonda il flottante. Qui il posizionamento flottante viene usato per avere i due paragrafi rispettivamente a sinistra ('float: left') e a destra ('float: right'), l'uno di fronte all'altro.

Purtroppo Internet Explorer presenta notevoli problemi nella gestione di tale proprietà, problemi splendidamente esposti sul sito Position Is Everything. Nello specifico, si è dovuto impostare la sola proprietà 'padding' per i due elementi, al fine di ottenere lo scostamento dai lati del contenitore (<body>), invece che 'margin', proprio per i problemi di Internet Explorer nella gestione dei margini di un flottante. Inoltre si è dovuto impostare l'altezza del <div> #firme sul 100% poichè Internet Explorer visualizzava in modo errato l'altezza del blocco.

Per avere una panoramica completa delle problematiche relative all'impaginazione con i CSS su Internet Explorer, si consulti il documento Su hasLayout. Si veda inoltre la sezione test sui CSS del sito di Bruno Fassino.

Torna al sommario

3.2 La pagina principale

Questo esempio mostra una possibile pagina principale della nostra tesi. Tale pagina è divisa in tre parti logiche:

  1. L'intestazione con il titolo della tesi.
  2. Un menu di navigazione per spostarsi fra i vari capitoli (o sezioni).
  3. I contenuti della pagina.

Il codice (X)HTML della pagina è:

<body>
<div id="container">

<div id="header">
<h1>Titolo della tesi</h1>
</div>

<div id="nav">
<ul>
<li><a href=" " accesskey="1">
Capitolo 1</a></li>
(omissis)
</ul>
</div>

<div id="content">
<p>Lorem ipsum dolor...</p>
</div>

</div>
</body>

Per prima cosa centriamo il nostro contenitore (#container) sulla pagina, il quale conterrà tutte le altre parti:

body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font: 100% Georgia, serif;
text-align: center;
}

#container {
width: 50em;
margin: 0 auto;
padding: 0 0 1px 0;
background: #fff;
color: #000;
text-align: left;
}

Abbiamo usato la tecnica già vista in precedenza per la centratura dell'immagine nel frontespizio. L'unica differenza è che qui abbiamo specificato 'text-align: left' per #container al fine di ripristinare l'allineamento a sinistra. La pagina è dimensionata in em, una misura relativa che ci permette di adattare la nostra struttura anche a risoluzioni di schermo basse (come 800 x 600). Ora definiamo l'intestazione con il titolo della tesi:

#header {
margin: 0 0 1.5em 0;
padding: 1px 0;
}

h1 {
margin: 0.5em;
padding: 0;
padding-bottom: 0.2em;
color: #666;
background: transparent;
border-bottom: 1px dashed;
}

Passiamo quindi a formattare il nostro menu di navigazione:

#nav {
float: left;
width: 6em;
padding: 1em;
background: transparent;
color: #000;
font: 80% Arial, Helvetica, sans-serif;
border-top: .2em solid #999;
border-bottom: .2em solid #999;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
margin: 0 0 .2em 0;
padding: 0;
display: block;
}

#nav a:link, #nav a:visited {
display: block;
width: 6em;
padding: .2em;
margin: 0;
text-decoration: none;
background: transparent;
color: #00f;
text-transform: uppercase;
}
#nav a:hover {
text-decoration: none;
color: #fff;
background: #3960a8;
}

Per spostare il menu di navigazione sulla sinistra abbiamo optato per la proprietà 'float' impostata su 'left'. Questa è una pratica abbastanza comune, ma come tutte le pratiche non la si deve abusare, come testimonia questa riflessione di David Baron, sviluppatore del progetto Mozilla e di Firefox.

Comunque sia, dobbiamo ricordarci che l'elemento flottante deve sempre precedere l'elemento che segue nel codice (X)HTML della pagina (in altre parole, #nav deve sempre precedere #content).

Ora dedichiamoci più da vicino al nostro menu. Come avrete notato guardando la pagina d'esempio, si tratta di un menu a blocchi verticale. Per ottenerlo, abbiamo usato un elenco non ordinato (<ul>). Future implementazioni dell'XHTML prevederanno l'introduzione degli elenchi di navigazione (navigation lists, <nl>), creati appositamente per lo scopo. Tuttavia, al momento l'uso dell'elemento <ul> rimane una delle scelte obbligate.

Per prima cosa, azzeriamo i margini e il cuscinetto (padding) di <ul>, poichè i browser, per impostazione predefinita, fanno rientrare gli elenchi usando alcuni 'margin', altri 'padding'. Leggiamo infatti nel Foglio di stile esemplificativo per HTML 4.0 le impostazioni orginarie date dalle specifiche:

OL, UL, DIR,
MENU, DD { margin-left: 40px }
OL { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL { margin-top: 0; margin-bottom: 0 }

Aggiriamo il problema impostando appunto 'margin' e 'padding' su 0. Quindi eliminiamo il caratteristico puntino delle voci di elenco impostando la proprietà stenografica 'list-style' su 'none'. A questo punto dichiariamo di blocco l'elemento <li> tramite la proprietà 'display' impostata su 'block' (per impostazione predefinita, le voci di elenco hanno la dichiarazione 'display: list-item'), se non altro per evitare problemi con Internet Explorer.

Passiamo ora ad esaminare i collegamenti (elemento <a>). I collegamenti possiedono diversi stati, a seconda se siano attivati (a:active), visitati (a:visited), se vi venga passato sopra il puntatore del mouse (a:hover), se ricevano il fuoco (a:focus) o siano nello stato iniziale (a:link, ossia con l'attributo href presente). Per ciascuno di questi stati è possibile definire una pseudo-classe CSS, nel seguente ordine:

Le prime due pseudo-classi sono quelle specifiche per i collegamenti, mentre le ultime tre sono le cosiddette pseudo-classi dinamiche, ossia che rispondono ad azioni compiute dall'utente sulla pagina, e possono essere associate anche ad altri elementi. Nel nostro esempio abbiamo usato solo le prime tre. È bene ricordare che è necessario rispettare sempre l'ordine sopra descritto, onde non incorrere in risultati indesiderati.

Abbiamo deciso di dare le stesse dichiarazioni ad a:link e a:visited e, per contrasto, di creare un effetto rollover al passaggio del mouse grazie ad a:hover. Per ottenere l'effetto dei blocchi, abbiamo dichiarato tali collegamenti come 'display: block', gli abbiamo assegnato una larghezza esplicita ('width: 6em'), abbiamo creato dello spazio tra il testo e i limiti del riquadro dei collegamenti impostando 'padding' su '.2em'. Inoltre abbiamo eliminato la sottolineatura tipica dei collegamenti grazie alla proprietà 'text-decoration' impostata su 'none'. Per creare l'effetto rollover, abbiamo semplicemente cambiato il colore del testo (proprietà 'color') e lo sfondo (proprietà stenografica 'background') su a:hover.

Da notare come nel codice (X)HTML abbiamo specificato l'attributo accesskey per i collegamenti del menu. I tasti di accesso rapido consentono la navigazione da tastiera, e sono particolarmente indicati per migliorare l'accessibilità delle nostre pagine. Per ulteriori informazioni sull'uso dei tasti di accesso rapido, si consulti questa pagina.

Infine, i contenuti della pagina:

#content {
margin: 0 1.5em 0 9.5em;
}

p {
margin: 1.4em 0;
padding: 0;
line-height: 1.4;
}

Quando ci sono quattro valori per la proprietà 'margin', il primo si riferisce al margine superiore (top), il secondo a quello destro (right), il terzo a quello inferiore (bottom) e il quarto a quello sinistro (left). In questo caso la misura di 9.5em serve a scostare i contenuti dal vicino menu di navigazione, il quale è largo 6em (9.5em - 6em = 3.5em di distanza). La proprietà 'margin' per i paragrafi (elemento <p>) ha invece solo due valori: in questo caso il primo valore si riferisce al margine superiore ed inferiore, mentre il secondo a quello destro e sinistro. Se vi fosse stato un solo valore, come in precedenza, questo si sarebbe riferito a tutti e quattro i margini. Per i paragrafi è stata inoltre specificata un'interlinea con la proprietà 'line-height', al fine di agevolare la lettura.

Torna al sommario

3.3 Le pagine dei capitoli o sezioni

Questo esempio mostra un possibile modello di pagina per i capitoli (o sezioni) della nostra tesi. La prima cosa da notare è il particolare menu di navigazione, il cui codice (X)HTML è il seguente:

<body>
<ul id="navigazione">
<li>
Sei qui:
<strong class="qui">
Capitolo 1
</strong>
</li>
<li>
<a href=" " accesskey="1">
Precedente
</a>
</li>
<li>
<a href=" " accesskey="2">
Successivo
</a>
</li>
<li>
<a href=" " accesskey="3">
Indice
</a>
</li>
</ul>
</body>

Si tratta di un menu di navigazione orizzontale realizzato con un elenco non ordinato. La prima voce è un indicatore di posizione, e serve ad aiutare l'utente ad orientarsi durante la navigazione. Le altre voci sono collegamenti che puntano, rispettivamente, al capitolo precedente, al capitolo successivo e alla pagina principale della nostra tesi. Il codice CSS è il seguente:

body {
margin: 2em 15em;
padding: 0;
background: #fff;
color: #000;
font: 100% Georgia, serif;
}

a:link, a:visited {
color: navy;
background: transparent;
}
a:hover {
text-decoration: none;
color: #fff;
background: navy;
}

#navigazione {
margin: 1.5em 0;
padding: 0;
list-style: none;
padding-bottom: .7em;
border-bottom: 1px dashed;
}
#navigazione li {
margin: 0 0.5em;
padding: 0;
display: inline;
}
#navigazione a {
padding: 3px;
margin: 0;
text-decoration: none;
}

* html body #navigazione {margin-top: auto;}

strong.qui {
padding-bottom: 2px;
border-bottom: .2em solid #000;
font-variant: small-caps;
margin-left: .2em;
}

Per allineare le voci in orizzontale abbiamo specificato 'display: inline' per l'elemento <li>, ossia le abbiamo disposte in riga (inline). Si noti come lo spazio orizzontale tra le voci sia di 0.5em, che rappresenta la misura standard per la distanza tra i collegamenti secondo le comuni norme di accessibilità.

Hack per Internet Explorer

A questo punto sorge un problema con Internet Explorer, che raddoppia il margine superiore di #navigazione. Per risolverlo abbiamo dovuto usare questo espediente ( o hack):

* html body #navigazione {
margin-top: auto;
}

Per comprenderlo, bisogna soffermarsi sul modo in cui i browser interpretano la gerarchia degli elementi della pagina. Per i browser più aderenti agli standard del W3C, l'elemento radice (root) della pagina, ossia quello che comprende tutti gli altri elementi, è <html>. Internet Explorer ritiene invece che vi sia un misterioso elemento che comprende <html>. Il perchè probabilmente non lo sapremo mai. Tuttavia è possibile sfruttare questa sua errata interpretazione per fornirgli delle regole CSS che solo lui può interpretare.

Poichè non conosciamo il nome del misterioso elemento, per selezionarlo usiamo il selettore universale (*), che seleziona tutti gli elementi. Poi, in modo combinato, usiamo il selettore discendente per <html>, <body> e #navigazione (notate come vi sia uno spazio tra di loro). Quello che diciamo ad Internet Explorer è sostanzialmente questo: “Seleziona quell'elemento da cui discende <html>, da cui discende <body>, da cui a sua volta discende #navigazione ad applicagli questi stili”. Detto, fatto: Internet Explorer applica 'margin-top: auto' e come per "magia", tutto torna a posto.

Gli altri browser semplicemente ignorano il nostro hack, perchè per loro non ha senso. Per ulteriori informazioni sui metodi di risoluzione dei problemi con Internet Explorer, si consulti l'articolo Come attaccare un bug di visualizzazione di Internet Explorer (Win).

Torna al sommario

L'ultima cosa da notare nella nostra pagina è l'immagine con didascalia alla sinsitra del testo. Il codice (X)HTML è il seguente:

<body>
...
<div class="edicola">
<img src="logo.gif" alt="Logo universitario" />
<p>...</p>
...
</body>

Il foglio di stile:

.edicola {
float: left;
width: 220px;
margin: 0 8px 8px 0;
background: #fbfbff;
color: #000;
padding: 5px;
text-align: center;
border: 1px solid #000;
}

.edicola img {
width: 200px;
height: 254px;
display: block;
margin: 1em auto;
padding: 3px;
}

.edicola p {
margin: 1.2em 0;
padding: 0;
font-size: .9em;
font-style: italic;
border-top: 1px dashed #000;
padding-top: 3px;
}

Grazie all'uso del selettore discendente, andiamo a selezionare solo ed esclusivamente l'immagine ed il paragrafo all'interno del <div> a cui viene applicata la classe edicola. Gli stili applicati fanno si che l'immagine ed il testo della didascalia siano centrati. Il margine inferiore e destro del <div> flottato separano i contenuti di destra da tale elemento. Si noti come i contenuti avvolgano il <div> flottato. Se quest'ultimo fosse stato fatto flottare a destra ('float: right'), avremmo dovuto impostare il margine inferiore e sinistro per ottenere la spaziatura dai contenuti.

Torna al sommario

3.4 Le note

Le note possono essere di vari tipi:

Le prime si inseriscono in fondo alla pagina del capitolo (o della sezione), le seconde in una pagina separata, in genere collegata al capitolo (o alla sezione), mentre le ultime nel margine destro o sinistro della pagina. Per i primi due tipi di note non esiste una difficoltà particolare a livello di realizzazione con i fogli di stile, in quanto si tratta di creare un collegamento tra il termine nel testo e la nota corrispondente.

Questo si può realizzare creando dei punti di ancoraggio a livello di codice (X)HTML tramite l'elemento <a>. Si può anche creare un effetto di apici e pedici tramite gli elementi <sup> e <sub>. Esempio:

<p>
Nel "De Vulgari Eloquentia"
<sup><a href="#nota1" id="termine1">
1
</a></sup>
...
</p>

Questo codice presuppone che la nota con ID "nota1" si trovi nella stessa pagina, ossia in calce. Se avessimo voluto specificare una nota in una pagina separata, avremmo dovuto scrivere:

<a href="note-capitolo1.html#nota1">...</a>

Abbiamo assegnato un ID anche al collegamento all'interno dell'elemento <sup>, in modo da assicurarci un punto di ritorno dalla nota al testo. Poniamo che la nota abbia questo codice (X)HTML:

<p id="nota1">Lorem ipsum...
<a href="#termine1">Torna al testo</a>
</p>

Ovviamente, come prima, questo vale se la nota e il termine di riferimento si trovano nella stessa pagina. Se invece sono in due pagine diverse, dovremmo scrivere:

<a href="capitolo1.html#termine1">...</a>

Concentriamoci ora sulle note a margine, che sono il vero problema quando si usano i fogli di stile. Quando ad esempio usiamo un editor di testo (come Microsoft Word), non ci preoccupiamo dei problemi di formattazione, perchè in genere è l'editor che li gestisce. Ma con i CSS il discorso è completamente diverso. Il problema principale è quello di garantire che le note a margine non influiscano sull'uniformità del testo principale, lasciandolo scorrere come se loro non ci fossero.

Questo esempio mostra del testo con delle note sul margine sinistro. Il codice (X)HTML è:

<body>
...
<p>
<span class="nota">
Testo di Orazio
</span>
Lorem ipsum...
</p>
</body>

Il codice CSS che segue è un adattamento di una geniale intuizione avuta da Bert Bos ed Håkon Wium Lie nella pubblicazione online di un capitolo del loro libro Cascading Style Sheets. Designing for the Web (edito da Addison Wesley):

body {
margin: 2em 15em;
padding: 0;
background: #fff;
color: #000;
font: 100% Georgia, serif;
}

p {
margin: 1.5em 0;
padding: 0;
line-height: 1.4em;
text-align: justify;
letter-spacing: .1em;
}

span.nota {
font-size: .9em;
float: left;
margin: 0 0 0 -14em;
width: 13em;
text-indent: 0;
text-align: left;
position: relative;
line-height: normal;
letter-spacing: normal;
padding: 0;
}

Come si evince dal codice, l'elemento <span> con classe "nota" è stato fatto flottare a sinistra, ed inoltre gli è stato assegnato un margine sinistro negativo (-14em). Una cosa importante da notare è che tale margine negativo è comunque inferiore alla misura del margine sinistro dell'elemento <body> (15em). Questo si rivela fondamentale ai fini del posizionamento e per evitare la comparsa della barra di scorrimento orizzontale. Ancora: anche la larghezza dell'elemento <span> con classe "nota" è inferiore ('width: 13em') al margine sinistro dell'elemento <body>. La dichiarazione 'position: relative' si rende necessaria esclusivamente per Internet Explorer, il quale, altrimenti, fa letteralmente sparire l'elemento dall'area di visualizzazione. Come si può notare, permangono delle differenze fra i vari browser nel posizionamento dell'elemento <span> con classe "nota", dovute alla difficoltà intrinseca di gestire una posizione flottante con un margine negativo. Tuttavia si può altresì notare come i paragrafi del testo principale scorrano in modo normale ed uniforme.

Testo giustificato

Si sarà certamente notato come il testo all'interno dei paragrafi sia giustificato ('text-align: justify'). Il testo giustificato è di solito sconsigliato ai fini della leggibilità, in quanto i browser devono adattare gli spazi tra le parole in modo arbitrario. Tuttavia, come dimostra questo demo di Mark Schenk, è possibile rendere leggibile anche il testo giustificato tramite l'uso opportuno delle proprietà 'letter-spacing' e 'line-height', come è stato fatto nel nostro esempio.

Torna al sommario

3.5 Numerazione

Numerare i capitoli (o le sezioni), le voci di un sommario o le sottosezioni di una pagina, è un compito che di solito viene svolto manualmente dall'autore delle pagine, inserendo i numeri (1, 1.1, 1.2, 1.2.1 ecc.) nel codice (X)HTML. Tuttavia, grazie ai fogli di stile, è possibile ottenere questi risultati senza dover inserire nulla nel sorgente della pagina, ma usando semplicemente un caratteristica dei CSS chiamata contenuti generati.

Attualmente i browser che supportano al meglio i contenuti generati sono le ultime versioni di Firefox ed Opera. Internet Explorer 6 (e versioni inferiori) non supporta affatto i contenuti generati. Per questo motivo, se la numerazione riveste un ruolo importante nella nostra tesi, allora sarà bene usare la via manuale tradizionale, per ovvi motivi di compatibilità. Per ulteriori informazioni, si consulti l'articolo I contenuti generati in dettaglio.

Torna al sommario

3.5.1 Numerazione dei capitoli o sezioni

Questo esempio mostra un'intestazione di primo livello (<h1>), un'intestazione di secondo livello (<h2>) e tre intestazioni di terzo livello (<h3>) con numerazione progressiva e annidata (1, 1.1, 1.1.1, 1.1.2, 1.1.3). I numeri appaiono prima del contenuto testuale delle intestazioni. Il codice (X)HTML è:

<body>
<h1>Introduzione</h1>
<h2>Sezione</h2>
<h3>Sottosezione</h3>
<h3>Sottosezione</h3>
<h3>Sottosezione</h3>
</body>

Il foglio di stile:

body {
margin: 2em 15em;
padding: 0;
background: #fff;
color: #000;
font: 100% Georgia, serif;
counter-reset: sezione sottosezione capitolo;
}

h1:before {
counter-increment: capitolo;
content: counter(capitolo) "." " ";
}

h2:before {
counter-increment: sezione;
content: counter(capitolo) "." 
counter(sezione) "." " ";
}

h3:before {
counter-increment: sottosezione;
content: counter(capitolo) "." 
counter(sezione) "."
counter(sottosezione) "." " ";
}

La tecnica qui usata è quella dei contatori. I contatori devono avere un nome (id) univoco che li identifichi. In questo caso i nomi sono capitolo, sezione e sottosezione. La scelta dei nomi è assolutamente arbitraria, ma va mantenuta coerente in tutte le successive dichiarazioni (in altre parole, se abbiamo dato un nome ad un contatore poi non possiamo cambiarlo).

Tramite la proprietà 'counter-reset' inizializziamo il contatore azzerandolo e tramite la proprietà 'counter-increment' lo incrementiamo (per impostazione predefinita di 1).

Per inserire quindi i contatori per gli elementi designati (in questo caso le intestazioni) ci serviamo degli pseudo-elementi :before ed :after e di una delle proprietà che a tali elementi si applica, ossia la proprietà 'content'.

Come indica il loro nome, gli pseudo-elementi :before ed :after inseriranno i contenuti generati rispettivamente prima (:before) e dopo (:after) il contenuto di un elemento, secondo la notazione:

elemento:before {...}
elemento:after {...}

Dal canto suo la proprietà 'content' serve in questo caso ad inserire stringhe di testo racchiuse tra apici (' ') o doppi apici (" "). Tali stringhe sono sensibili agli spazi: scrivere quindi "." è diverso da ". ", in quanto nel secondo caso, dopo il punto, apparirà sulla pagina uno spazio bianco. La notazione della proprietà 'content' nel nostro esempio è:

content: counter(nome-contatore) "stringa";

Si noti la funzione 'counter()' che richiama il contatore. Nello specifico, in questa pagina sono avvenuti i seguenti passaggi:

  1. Abbiamo azzerato i tre contatori capitolo, sezione e sottosezione nell'elemento <body>, genitore degli elementi <h1>, <h2> e <h3>.
  2. Abbiamo incrementato capitolo sull'elemento <h1>, inserendolo.
  3. Abbiamo incrementato sezione sull'elemento <h2>, inserendolo con capitolo.
  4. Abbiamo incrementato sottosezione sull'elemento <h3>, inserendolo con capitolo e sezione.

La progressione è chiara. Tuttavia vi sono delle limitazioni che risolveremo nel prossimo paragrafo.

Torna al sommario

3.5.2 Numerazione dei sommari

Come mostrato in questo esempio, un criterio simile al precedente lo applichiamo ai sommari, realizzati con l'ausilio di elenchi ordinati (<ol>). Tuttavia, in questo caso, se si vuole realizzare qualcosa come 1, 1.1, 1.2, 1.2.1, 1.2.2, 1.3, 2, 2.1 ecc. lo si può ottenere con la funzione 'counters()'. Il codice (X)HTML dell'esempio è:

<body>
...
<ol>
<li><a href=" ">Introduzione alla filosofia</a>
<ol>
<li><a href=" ">Origini</a></li>
<li><a href=" ">Àmbiti</a></li>
<li><a href=" ">Scopi</a></li>
<li><a href=" ">Bibliografia</a>
<ol>
<li><a href=" ">Bibliografia antica</a></li>
<li><a href=" ">Bibliografia contemporanea</a></li>
</ol>
</li>
</ol>
</li>
<li><a href=" ">Storia della filosofia</a></li>
</ol>
</body>

Il foglio di stile:

ol {
margin-left: 1.2em;
padding-left: 0;
counter-reset: voce;
list-style: none;
}

li {
margin: 1.3em 0;
padding: 0;
display: block;
}

li:before {
counter-increment: voce;
content: counters(voce, ".") "." " ";
}

L'espressione 'counters(voce, ".") "." " "' prende il contatore voce per ogni àmbito di applicazione, lo visualizza con un punto ed uno spazio, e collega insieme tutti i contatori con àmbito di applicazione per l'elemento dato. Ad ogni annidamento dell'elemento <ol> corrisponde un livello di annidamento del contatore. Si noti come siano stati specificati 'list-style: none' per l'elemento <ol> e 'display: block' per l'elemento <li>, al fine di eliminare i contatori predefiniti degli elenchi ordinati. Per l'elemento <li>, infatti, l'impostazione predefinita è 'display: list-item', come già detto in precedenza (si consulti in tal senso il foglio di stile esemplificativo per HTML 4.0).

Torna al sommario

4. Usare fogli di stile già pronti

Questa pagina di esempio mostra uno degli stili messi a disposizione dal W3C per chi inizia ad usare i fogli di stile. Si tratta di CSS semplici e facilmente modificabili. Si posssono aggiungere anche ulteriori informazioni di stile con altri CSS addizionali, tenendo sempre a mente il principio della cascata.

Torna al sommario

5. Stampa delle pagine web

Fino ad ora ci siamo occupati di un tipo di media relativo allo schermo del computer (screen). Parlando ora di stampa, dobbiamo necessariamente spostarci su un tipo di media differente, i media a pagine, ossia relativi alla stampa delle nostre pagine web (print).

Se prima un nostro foglio di stile poteva essere:

<link rel="stylesheet" href=""stile.css"
type="text/css" media="screen" />

ora ne possiamo aggiungere anche un altro, come:

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

che darà le istruzioni necessarie per la stampa qualora l'utente dovesse cliccare sul tasto "Stampa" del suo browser.

Fondamentalmente dobbiamo capire che ora la destinazione del nostro foglio di stile non è più una pagina web visualizzata su schermo, ma su un foglio di stampante (in genere in formato A4). Ecco dunque alcuni consigli per una corretta scrittura del foglio di stile per la stampa:

Ecco il foglio di stile per la stampa usato per questo articolo:

* {
margin: 0;
padding: 0;
background: #fff;
color: #000;
border: none;
letter-spacing: normal;
}
	
body {
font: 12pt/20pt "Times New Roman", Times, serif;
}
	
#centra, #banner, #navigazione, img {
display: none;
}
	
#pagina {
margin: 2cm;
padding: 0;
}
	
h1, h2, h3, h4 {
font-family: Georgia, serif;
margin: 10pt 15pt;
padding: 0;
letter-spacing: 2pt;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 16pt;
}
h3 {
font-size: 14pt;
}
h4 {
font-size: 12pt;
font-weight: bold;
}
	
p, blockquote, pre, ul, ol {
margin: 10pt 15pt;
padding: 0;
text-indent: 0;
}
	
blockquote p {
margin: 5pt 0;
}
	
ul {
list-style: square inside;
}
	
ol {
list-style-position: inside;
}
	
li {
margin: 12pt 0;
padding: 0;
}

li.scosta {
margin-left: 12pt;
padding-left: 0;
}
	
li.rientra {
margin-left: 24pt;
padding-left: 0;
}
	
	
h4.dig {
font: bold 12pt "Times New Roman", Times, serif;
color: #000;
background: #fff;
float: none;
margin: 10pt 5pt;
padding: 0;
}
	
p.no {
text-indent: 0;
font-size: 11pt;
}

I più attenti avranno notato come si sia volutamente evitato di citare le proprietà per la stampa delle specifiche CSS. Il motivo è purtroppo semplice: tali proprietà sono scarsamente supportate dai browser, o supportate in modo troppo difforme. Una soluzione potrebbe essere quella di inserire un avviso nella pagina che informi l'utente della differenza di visualizzazione all'atto della stampa, consigliandogli, come alternativa, di salvare la pagina e poi di copiarla su un editor di testi (come Microsoft Word) o di copiarne il contenuto negli appunti e poi incollarlo sul suddetto editor di testi. Questa soluzione è consigliabile quando l'utente si trova a navigare presso strutture che addebitano costi sui fogli stampati.

La speranza è che nel futuro le proprietà per la stampa vengano supportate ed implementate al meglio, nell'ottica di fornire agli utenti e agli autori il massimo che i fogli di stile possono offrire.

Torna al sommario

Gabriele Romanato