I Fogli di stile (CSS, cascading style sheet) sono una tecnologia che
si sta lentamente imponendo all’attenzione di coloro che realizzano siti.
Si tratta di un linguaggio per il visual design, ovvero per controllare
l’aspetto visivo degli elementi che costituiscono la vostra pagina HTML.
I CSS sono una specifica diversa da HTML. HTML può contenere al
suo interno delle istruzioni CSS associate ai tag HTML, oppure può
fare riferimento, con un’apposita dichiarazione, ad un foglio di stile
separato, che ha un URI proprio.

HTML e CSS: alle origini dei due codici

Perché il W3C si è preso la briga, nel 1996, di progettare
una cosa come i CSS? La risposta è piuttosto semplice: per dare
agli sviluppatori il pieno controllo dell’aspetto delle pagine web, senza
che nell’HTML venissero usati tag e attributi che si occupassero della
presentazione: ovvero, dell’aspetto visivo. Per separare, insomma, struttura
e contenuto da una parte, e visualizzazione o presentazione dall’altra.

In origine, infatti, HTML è stato pensato per scopi più
ristretti che per definire un visual design. Ciò che HTML fa o
dovrebbe fare è definire il ruolo strutturale che gli elementi
contenuti nella pagina hanno all’interno del documento: ovvero se si tratti
di paragrafi, di titoli, di link, di tabelle, di immagini, di liste…

Come questi elementi dovrebbero essere presentati sullo schermo del computer
dal browser, be’, non dovrebbe essere HTML a deciderlo. Perché
non è nato per quello, e perché la sua logica di lavoro
è un’altra. In questo modo, indipendentemente da come ogni singolo
browser presenta un paragrafo o una lista, si avrà la certezza
che il documento sia portabile, comprensibile e riutilizzabile senza difficoltà.
Il web nasce infatti proprio come ambiente di scambio e condivisione di
documenti. Già molti formati esistevano per definire in maniera
accurata la formattazione visiva dei documenti, ma ciascuno di essi aveva
specifici problemi di portabilità e di compatibilità con
alcuni sistemi operativi o con software specifici. HTML è leggibile
da qualunque editor testuale, su qualunque sistema operativo, e qualunque
browser ne dovrebbe consentire una presentazione che ne rispetti almeno
la struttura.

L’evoluzione del web

La storia del web ha preso un’altra direzione: esigenze di pubblico e
commerciali hanno spinto verso un design di pagine che tentasse di replicare
il design complesso che siamo abituati a vedere su riviste e giornali,
sui manifesti e persino alla tv. Non c’è nulla di male in questa
pratica: è solo che HTML non è adatto allo scopo, mentre
è adatto alla condivisione di documenti.
Per un certo periodo si sono usati degli stratagemmi per controllare la
presentazione delle pagine web. Tag HTML nati per marcare elementi specifici
come le tabelle di dati sono stati usati per creare "gabbie"
di impaginazione, all’interno delle quali tag non previsti dalle specifiche
ma creati e incoraggiati dai principali produttori di browser consentivano
di impostare il testo con la precisione del pixel. Colori e stili diventavano
realtà, ma i tag strutturali diventavano sempre meno usati e conosciuti.
A parte il tradimento "ideale" degli scopi del web, questa pratica
porta anche a problemi concreti.

Se un documento nasce per essere presentato visivamente in un certo modo,
ebbene, non appena lo si visualizzerà con una tecnologia diversa
da quella per cui è stato progettato, immediatamente si avranno
degli svantaggi:

1. la tecnologia ‘imprevista’ potrebbe essere inadeguata a presentare
   quel design (dato che, come abbiamo visto, utilizza impropriamente alcuni
   tag HTML e ne usa di altri non previsti dalle specifiche)
2. La risoluzione del monitor potrebbe essere diversa
3. potrebbero non essere visualizzate le immagini;

Inoltre potrebbero esserci specifici problemi di fruizione della pagina
per determinati utenti:

1. i caratteri potrebbero essere troppo piccoli e potrebbe non essere
   possibile ingrandirli
2. I colori potrebbero non essere adeguati per daltonici e discromatici,
   e potrebbe essere impossibile cambiarli

E così via.
I fogli di stile sono nati per superare questa situazione di fatto: separando
istruzioni di visualizzazione dai tag strutturali dell’HTML, è
possibile conservare i vantaggi di portabilità e di condivisione
dei documenti, e avere un ottimo design sui browser e sulle piattaforme
in grado di "capire" i CSS. La stessa pagina sarebbe comunque
fruibile in versione solo testo dai browser e dalle tecnologie che i CSS
non li capiscono.

Compatibilità e scelte

Tutto a meraviglia, dunque? No. Perché per lungo tempo i produttori
di browser non hanno supportato adeguatamente i CSS, rendendoli di fatto
inutilizzabili. Ora, dopo sei anni dalla loro nascita e due versioni successive
(CSS1 e CSS2), i fogli di stile si avvicinano ad un’adolescenza turbolenta
ma promettente. Come dimostra il recente redesign di Usabile.it e quello
di numerosi altri siti, è ora possibile utilizzare i CSS assieme
ad un codice valido, cioè che rispetta le specifiche del W3C, per
realizzare documenti compatibili con la più vasta quantità
di dispositivi, e fornendo al tempo stesso ai principali browser visuali
un design ricco ed elegante.

Il problema nell’uso di questo tipo di web design costituito da un’impiego
di (X)HTML valido e CSS2 è che alcuni vecchi browser non visualizzano
correttamente i fogli di stile. Questo problema può essere affrontato
in diversi modi a seconda del tipo di sito e del suo target. Il browser
più problematico rimane Netscape 4. Se il sito ha un’ampia utenza
che utilizza ancora questo browser, è possibile usare un approccio
di transizione al design, usando sempre i fogli di stile, ma mantenendo
anche le tabelle per l’impostazione grafica.

In caso contrario, è possibile fare scelte più radicali
e fornire ai browser più vecchi un foglio di stile ad hoc o addirittura
il solo (X)HTML, che verrà così visualizzato privo del design,
con le impostazioni di default del browser. E’ da notare che in questo
modo il contenuto sarà comunque pienamente accessibile: a non essere
compatibile all’indietro è solo il visual design. E’ importante
però "nascondere" con tecniche opportune i CSS ai browser
più datati, ma che hanno un lieve e imperfetto supporto dei CSS:
in quei browser il rischio è quello di una situazione "ibrida",
ovvero un visual design sballato, che comprometta anche la fruizione normale.
Per fortuna, anche per questo ci sono delle tecniche. Dunque, a seconda
delle esigenze è possibile adottare l’approccio migliore per il
singolo sito.

Naturalmente, il visual design ha un impatto decisivo sull’usabilità.
Non parliamo tanto della grafica o dello stile, quanto proprio della disposizione
degli elementi e della loro affordance percepita, cioè quello che
gli oggetti (ad esempio i link) comunicano all’utente in termini di significato
e funzionalità. Privare i documenti del design, significa rendere
sì, i dati accessibili, ma probabilmente significa incidere in
qualche modo sull’usabilità. Il gioco vale comunque la candela,
perché un documento ben strutturato difficilmente ha un’usabilità
pessima, e perché questi utenti sono una schiacciante minoranza.
Per essi, è necessario progettare una versione lineare del testo
il più semplice e usabile possibile, da arricchire poi con i CSS
per la maggioranza degli utenti. Queste pratiche di design non escludono
nessuno e non portano a doppie versioni del documento, ma solo a multiple
versioni della sua visualizzazione: dalla più semplice alla più
complessa. Ognuna di esse deve funzionare a dovere.

I vantaggi dei CSS per l’usabilità

Poiché l’argomento più usato contro i CSS è che
non hanno compatibilità all’indietro (che è vero, ma solo
con browser di 5 anni fa e più… e comunque il contenuto rimane
accessibile), bisogna anche abituarsi a vedere il bicchiere mezzo pieno.
L’uso dei CSS, infatti, può contribuire a rendere l’interazione
più ricca e il sito più usabile.

Come? In diversi modi.

1. Innanzitutto, rendendo l’HTML più leggero, e dunque facendolo
   caricare più velocemente. In questo sito, ogni pagina ridisegnata
   con i CSS ha 3-4 Kbyte in meno della versione precedente. Una media
   del 15-20% in meno per ogni documento! Questi Kilobyte sono a carico
   dei CSS, che vanno caricati assieme all’HTML, ma è bene notare
   che vengono caricati una volta sola: tutte le pagine sono infatti controllate
   dagli stessi CSS. Le pagine successive alla prima rimangono più
   leggere.
2. Migliorando l’interazione attraverso l’ampliamento della zona sensibile
   dei link. Un esempio sono i menu a destra in questo sito. In questa
   pagina (in alto) potete provare a ingrandire il testo con le tre opzioni
   offerte. Un tempo, la zona sensibile (quella in cui si attiva la "manina")
   sarebbe stata solo quella del testo. Con i CSS è possibile ampliarla
   a tutta la larghezza della colonna, rendendo più comodo il click
   (ai test di usabilità è frequente incontrare utenti che
   SBAGLIANO a cliccare perché mancano il link senza accorgersene,
   a causa dello scarso controllo che hanno sul mouse e dell’area insufficiente
   del link).
3. Sfruttando al meglio effetti di rollover senza l’uso di javascript.
4. Dando la possibilità di ingrandire il testo e di modificare le impostazioni
   anche del design senza ricorrere a Javascript e ad applicazioni server-side.
5. Eliminando la necessità di una versione stampabile separata. L’utente
   può stampare direttamente dal browser.
6. Arricchendo l’interazione con la creazione di menu contestuali a scomparsa
   attivabili solo con i CSS, con un uso minimo di eventi javascript. In
   alcuni siti, infatti, avere molte voci di menu può comportare
   un elevato aumento della complessità della pagina. Questi menu
   possono essere organizzati in gruppi e resi disponibili alla pressione
   di un link utilizzando la proprietà display dei
   CSS. (Attenzione: questi espedienti non sono usabili in sè, ma
   vanno valutati caso per caso. Contribuiscono comunque a rendere più
   divertente la navigazione, anche se a volte questo può andare
   a scapito dell’efficacia).
7. Migliorando la coerenza visiva delle pagine. Basandosi su regole che
   valgono per l’intero sito, i CSS aiutano a dare coerenza visiva alle
   diverse pagine, e un senso di ordine che contribuisce a rendere la visita
   più piacevole.

Inoltre i CSS consentono di modificare in meglio il design con prove
successive in maniera economica, anche mentre il sito è online,
accorciando di fatto i tempi e i costi del processo di miglioramento e
modifica. Poiché la modifica di un sito per sopperire a problemi
di usabilità riscontrati dagli utenti o nei test è il processo
fondamentale in un design centrato sull’utente, i CSS, consentendo di
svolgere questo processo senza toccare l’html, si dimostrano una tecnologia
particolarmente utile e orientata all’usabilità.

Naturalmente, non basta usare i CSS per dire di aver fatto un sito usabile.
Un buon uso dei colori, dei posizionamenti, degli spazi bianchi dipende
dalla capacità del designer. Una navigazione coerente e un labeling
system adeguato all’utenza, delle procedure che supportino il compito
che l’utente vuole svolgere, sono tutti aspetti cruciali, che i CSS possono
contribuire a rendere al meglio, ma che non possono certo prescindere
dalle capacità del progettista e dai risultati dei test di usabilità.
Ci sono molti siti brutti o mediocri realizzati con i CSS, così
come con le tabelle. Ma questo dipende dall’uomo, come sempre, e non dalla
tecnologia.