Adottando
i fogli di stile gli sviluppatori di pagine html potranno esercitare
un controllo più accurato sulle pagine ed eliminare codice superfluo,
rendendo in tal modo più
leggere e navigabili le pagine
ed assicurando nel contempo una piena accessibilità ai disabili,
comprese le persone con problemi di vista di cui ci stiamo in particolare
occupando. Con i fogli di stile, inoltre, si consentono tempi di caricamento
delle pagine più rapidi a tutti indistintamente gli utenti di Internet.
È
possibile predisporre un file a sé stante con estensione .css nel
quale introdurre in formato testo le indicazioni di stile da applicare
a tutte le pagine html contenute in un sito web. Tali stili potranno riguardare
tutti gli elementi da inserire nelle pagine stesse, quali, per esempio:
- caratteri e loro formattazioni
H1 {font-size: 20pt; font-weight:bold}]
H2 {font-size: 16pt; font-weight:bold} - paragrafi
P {margin-left: -20px; margin-right:
-20px; margin-top: 30px}
oltre alle indicazioni per lo
sfondo, le liste, i rientri, ecc.
Con un file esterno come
quello cui si è fatto ora cenno sarà sufficiente inserire
in tutte le pagine del sito
<HEAD>
<LINK REL=STYLESHEET
hrEF="Url del foglio di stile" TYPE="text/css">
</HEAD>
Per inserire le disposizioni
di stile in ogni pagina del sito, si collocheranno le definizioni di stile
(contenute in parentesi graffe) all'interno del comando <STYLE> ...
< /STYLE>
Esempio
<HEAD>
<STYLE TYPE="text/css">
BODY {font-family: arial;
font-size: 10pt; font-style: normal}
P {margin-left: 40px; margin-right:
40px; margin-top: 20px}
</STYLE>
</HEAD>
Un utilizzo
corretto degli elementi di strutturazione fa sì che i browsers possano
garantire una migliore navigazione nel documento. Un esempio di uso scorretto
è, per esempio, quello di servirsi dell'elemento H1 per ottenere
un testo a caratteri grandi e in grassetto, mentre questo elemento deve
essere usato solo per identificare una frase di rilievo nella strutturazione
del documento, come il titolo di un capitolo, distinguendolo da quello
dei sottocapitoli che possono essere organizzati in una struttura gerarchica
fino a 6 livelli (H1-H6).
Nell'utilizzazione dei fogli di stile sarà essenziale:
- nidificare adeguatamente gli heading (H1-H6);
- codificare la struttura e i componenti di una lista con gli elementi appropriati. (UL, LI, ecc.);
- identificare le citazioni con gli elementi Q e BLOCKQUOTE, evitando invece di usare questi ultimi per
creare effetti di rientro del testo; - usarli per l'impaginazione e la presentazione non appena la maggior parte dei browsers sarà in
grado di gestirli.
Avvalersi dei fogli di stile nella progettazione delle pagine web significa eliminare
definitivamente l'utilizzo di tabelle per impaginare
gli ipertesti. Fino a un paio d'anni fa, tra l'altro, le tabelle non erano
riconosciute dagli screen readers e, salvo rare eccezioni, navigare tra
tabelle multicolonne o nidificate rappresentava un problema irrisolubile
per i non vedenti. Ora ci si augura che l'eccezione diventi regola e che,
sia pure con i tempi tecnici necessari, l'utilizzo dei fogli di stile si
diffonda a tappeto nella cultura dei webmasters.
In
attesa che la crescente diffusione dell'utilizzo dei fogli di stile ne
faccia lo strumento privilegiato per l'organizzazione delle pagine web,
si potranno contenere testi e immagini in una tabella di impaginazione
a colonna unica, evitando altre soluzioni più complesse che
renderebbero le pagine non accessibili.
