ISSN 1722-375X
[Vai al menu di navigazione principale]


Home > Tutorial > Progettare con stile > Progettare con i CSS

[Vai al piè di pagina]

Progettare con i CSS

Progettare un sito web, il cui layout debba basarsi sui CSS, impone uno schema logico diverso da quello solitamente usato. In questo articolo saranno brevemente illustrati i punti chiave per progettare un sito web "con stile".

Contenuti e impaginazione: due oggetti ben distinti

Le pagine web non sono la carta stampata. La precedente affermazione, senza il necessario approfondimento, può apparire un banale dato di fatto. La differenza principale fra la carta stampata e le pagine web, oltre all'evidente differenza nella dinamica della pubblicazione, è che la carta stampata è non mutevole. A differenza della locuzione "immutabile", forse più legata a un concetto temparale, credo che il termine "non mutevole" sia maggiormante legato a un concetto geometrico della mutabilità. Si consideri ad esempio un quotidiano. Chi stabilisce l'impaginazione di un articolo sa già che ogni lettore vedrà l'articolo impaginato esattamente come stabilito. Il caratterà sarà esattamente quello voluto, la grandezza dei caratteri esatta al millimetro. La pagina avrà una larghezza ed un'altezza prestabilita. Tutti gli elementi grafici saranno posizionati come predisposto. La pagina web è estremamente mutevole. La sua rappresentazione dipende dal tipo di dispositivo (PC, PDA, WebTV, Stampante) browser (Internet Explorer, Linx, Screen Reader), dal sistema operativo, dalla risoluzione del monitor, dai font disponibili.

Non c'è nessun reale controllo su come apparirà una pagina web (Flash richiede tutt'altro tipo di discorso).

Appare dunque chiaro come l'informazione che è contenuta in una pagina web debba essere del tutto separata dall'impaginazione. Quando ciò non accade, quando cioè l'informazione comunicata dipende dall'impaginazione, c'è un problema nell'organizzazione dei contenuti.

In ultima analisi l'(X)HTML dovrà essere usato esclusivamente per i contenuti, mentre il layout sarà realizzato con i CSS. Dunque nel codice (X)HTML non dovranno comparire tag quali il <font> e il >center<. Saranno invece benvenuti i tag che servono a struttutare i contenuti come <h1>..<h6>, <p>, <b>.

Una struttura per i contenuti

Per realizzare una valida separazione fra i contenuti e la loro impaginazione, è necessario strutturare i contenuti stessi. Sarà dunque opportuno separare, magari con uno schema su carta, la pagina in sezioni e sottosezioni come ad esempio un'intestazione e un piè di pagina, un corpo con i contenuti principali, una sezione contenente link di approfondimento e una contenente un menù di navigazione.

[immagine: esempio di struttura per i contenuti]

Una strutturazione dei contenuti è una buona norma per ogni tipo di pubblicazione, sia sul web sia su tutti gli altri canali di comunicazione.

Ogni sezione dovrebbe essere associata ad un tag <div>, caratterizzato dal proprio selettore ID o dalla propria classe. E' di seguito riportato un esempio di codice XHTML che realizzi la struttura precedentemente illustrata.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio di strutturazione dei contenuti</title>
</head>
<body>

<div id="intestazione">

<div class="contenuti">............</div>

<div id="menu-nav">............</div>

</div>

<hr />

<div id="principale">

<div class="contenuti">............</div>

<div id="approfondimenti">............</div>

</div>

<hr />

<div id="pie-di-pagina">............</div>

</body>
</html>

Le tre sezioni principali sono separate da degli orizontal rule, per una migliore leggibilità dei contenuti. L'orizontal rule non è propriamente un elemento grafico e può essere considerato a tutti gli effetti parte dei contenuti.

Si noti come, finora, non si sia assolutamente parlato di come impaginare i contenuti. In effetti, a questo punto potremmo anche non avere nessuna idea su come sarà il layout.

Applicare i layout

E' a questo punto possibile applicare i vari layout al documento. Essendo la pagina web indipendente dal tipo di dispositivo o browser utilizzato è possibile specificare un particolare foglio di stile per vari media come lo schermo di un computer, il foglio di una stampante, uno screen reader, un PDA.

body { ... }

hr { ... }

#intestazione { ... }
#intestazione .contenuti { ... }
#intestazioni #menu-nav { ... }

#principale { ... }
#principale .contenuti { ... }
#principale #approfondimenti { ... }

#pie-di-pagina { ... }

Per alcuni media è consigliabile eliminare alcune parti del contenuto della pagina. Ad esempio, per la visualizzazione su schermo è possibile progettare un layout più o meno complesso. In questo caso gli horizontal rule potrebbero risultare inutili, essendo la struttura del documento chiarita dal layout

hr { display: none; }

Oppure, per la stampante, può risultare utile eliminare il menu di navigazione.

#intestazioni #menu-nav { display: none; }

Il (non)problema della retro compatibilità

I CSS sono uno strumento estremamente potente, non possono esserci dubbi. I limiti alla loro diffusione sono essenzialmente due:

Se per il primo problema si tratta di un limite culturale a cui non possiamo porre molto rimedio, se non ribadendo che lavorando con i CSS tutto diventa più semplice, possiamo affermare che il secondo problema è in realtà inesistente.

Per definizione, gli standard web, come i CSS e l'XHTML, sono retrocompatibili. Semmai sono gli sviluppatori dei browser che si sono mossi con colpevole ritardo. Comunque i problemi vengono risolti dagli stessi browser che li provocano. Se trascuriamo problemi minori, come ad esempio il box model di IE5/Win, i browser più recenti interpretano i CSS in maniera piuttosto valida.

Browser piuttosto datati come IE4 e NN4 hanno invece una pessima interpretazione dei CSS. Il supporto ai CSS di IE4 e NN4 è talmente scarso che le pagine potrebbero divenire illegibili. Se IE4 è quasi del tutto estinto e può dunque essere trascurato, NN4, pur essendo un browser piuttosto mediocre, è ancora utilizzato da una buona percentuale degli utenti di internet. Per risolvere il problema ci sono essenzialmente tre metodi:

  1. creare un foglio di stile compatibile anche con NN4;
  2. non utilizzare nessun foglio di stile per NN4;
  3. creare un foglio di stile apposito per NN4.

La prima soluzione, che a prima vista può sembrare la più conveniente, è quella più radicale e meno consigliabile. Creare un CSS che venga interpretato correttamente da NN4 significa rinunciare a quasi tutte le potenzialità dei CSS. Il gioco non vale la candela.

La seconda e la terza soluzione sono quelle consigliabili (soprattutto la terza) e possono essere realizzate attraverso la regola '@import'.

Per associare un foglio di stile esterno ad una pagina ci sono essenzialmente due comandi:

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

ovvero

<head>
<style type="text/css">
@import url("foglio_di_stile.css");
</style>
</head>

Il primo metodo viene permette di importare i CSS su tutti i browser compatibili con i CSS, NN4 compreso. Il secondo metodo, basato su @import, non viene interpretato da browser datati come IE4 e NN4. Per impedire che il CSS venga (disastrosamente) interpretato da NN4 è sufficiente caricare il foglio di stile con il metodo @import. In questo modo la pagina sarà priva di layout, ma, avendo strutturato con cura l'(X)HTML il sito darà totalmente accessibile anche senza grafica.

Se invece si decidesse di utilizzare un CSS apposito per NN4 è sufficiente utilizzare ambedue i metodi per associare un foglio di stile ad una pagina web:

<head>
<link rel="stylesheet" type="text/css href="css_x_nn4.css" />
<style type="text/css">
@import url("css_avanzato.css");
</style>
</head>

Nel foglio di stile css_x_nn4.css ci sono solo quelle regole che vengono correttamente interpretate da NN4, nel foglio di stile css_avanzato.css ci sono le regole che NN4 non è in grado di intepretare. Se in css_avanzato.css ci sono delle regole presenti anche in css_x_nn4.css, quest'ultime vengono sovrascritte. Se ad esempio in css_x_nn4.css si definisce un colore di sfondo bianco per il body e in css_avanzato.css si definisce un colore di sfondo grigio per il body, le pagine su NN4 appariranno su uno sfondo bianco mentre in NN6, ad esempio, appariranno su uno sfondo grigio.

Avviso ai naviganti

Qualora si decidesse di applicare un css particolare per NN4, ovvero di non applicare affatto un foglio di stile per questo e altri browser datati, sarebbe opportuno avvisare i naviganti, attraverso un messaggio nascosto ai browser più recenti, che, pur presentando i medesimi contenuti, esiste una versione più "piacevole" del sito.

Il messaggio dovrebbe precisare come le due versioni presentino gli stessi contenuti e come le differenze si limitino al solo aspetto grafico. L'avviso non dovrebbe apparire, come spesso si legge su alcuni siti, un rifiuto al pieno accesso al sito, bensì dovrebbe essere un invito all'utilizzo di browser più performanti.

Messaggi come "sito ottimizzato per IE5 e NN6" sono un inutile autogol. Inutile perché il sito, se ben progettato e rispettoso degli standard, risulta accessibile con ogni browser, compreso lo storico Mosaic. Autogol poiché il messagio lascia intendere che si sono trascurati gli utenti dei browser più datati, quando l'utilizzo degli standard e dei CSS si preoccupa proprio del contrario.

Per nascondere l'avviso ai browser standard si può utilizzare la proprietà display:none da associare ad un selettore ID nel foglio di stile avanzato associato alla pagina web attraverso il metodo @import.

codice (X)HTML
[...]
<head>
<style type="text/css">
@import url("css_avanzato.css");
</style>
</head>
<body>
<div id="avvisoNN4">
Questo sito è costruito secondo ...
</div>
[...]

file css_avanzato.css
[...]
#avvisoNN4 { display: none; }
[...]

Validare il codice

Affinché tutto funzioni al meglio, vi consigliamo di validare il codice (X)HTML e quello CSS attraverso i validatori automatici del W3C [(X)HTML, CSS] ovvero quelli del WDG [(X)HTML, CSS].

Commenti sull'articolo

G.T. -- ultima revisione: 01.09.2002

File correlati

Articoli correlati:


Strumenti



l'indirizzo di questa pagina è: http://www.constile.org/tutorial/progettare_con_stile/index.php