Usare i fogli di stile

I CSS sono stati adottati dal W3C alla fine del 1996 e nel 1998 è stata adottata la versione 2, allo scopo di separare il contenuto e gli elementi strutturali delle pagine dagli elementi di presentazione. Vedremo tra breve cosa si intenda per separazione tra elementi strutturali e di presentazione.

Vediamo in dettaglio gli enormi vantaggi dei CSS. Un elemento di struttura di una pagina può essere un paragrafo, un titolo, un elenco, ecc. (tag <p>, <hx>; <li>), ma questi tag di per se nulla dicono su quale aspetto debba avere la pagina, al massimo possiamo sapere che un titolo <h1> equivarrà nella maggior parte dei browser ad un testo di dimensioni 6 in grassetto, oppure che il testo in genere, se non si specifica il tipo di font, la sua dimensione ed il suo colore, sarà rappresentato come "Times New Roman" dimensione 3 nero.

Gli elementi di presentazione - peraltro molto limitati - degli attributi e tag HTML permettono di intervenire su questo modo di visualizzare gli elementi di una pagina, ma non potremo certamente intervenire sul grassetto o sulla dimensione dei titoli o sull'interlinea delle righe di un paragrafo.

Per ottenere i risultati voluti i designer dell'era pre-CSS erano costretti ad intervenire con complicati artifizi che comunque rendevano una pagina molto più difficile costruire, da mantenere ed in ogni caso più pesante da scaricare.

I CSS invece nascono allo scopo di fornire gli elementi di presentazione, con una vasta possibilità di scelta di stili. Essi si dividono in:

• Stili in linea
• Stili interni
• Stili esterni

Gli stili in linea non presentano quasi nessun vantaggio, in quanto vengono applicati elemento per elemento, esattamente come gli attributi HTML.

Gli stili interni, ma ancor più quelli esterni invece presentano enormi vantaggi. Vediamo un esempio pratico. Sappiamo che con il tag p,il tag font ed i suoi attributi possiamo in una certa misura controllare il layout di una pagina.

Ad esempio il paragrafo presentava questo codice:

Questo vuol dire che se abbiamo una pagina con molti paragrafi con uno stile uniforme, caso molto probabile, dovremo applicare lo stesso set di tag ed attributi ad ogni paragrafo e ad ogni pagina.

Se creiamo uno stile in linea otteniamo un codice simile a questo:

Il vantaggio in questo caso è assolutamente relativo. Infatti, a parte l'aderenza agli standard e la possibilità di utilizzare un sistema di unità di misura per il font-size molto più potente e flessibile come, gli stili in line vanno applicati paragrafo per paragrafo come i tag e gli attributi HTML, dunque i vantaggi in termini di gestione e manutenzione sito e leggerezza delle pagine vengono meno.

Mentre se trasportiamo gli elementi di formattazione e layout in un foglio di di stile interno avremo, all'interno del tag head, un tag style con la seguente sintassi:

Questo stile comanderà tutta la pagina all'interno della quale i paragrafi saranno marcati da un semplice <p>. È chiaro che, più numerosi saranno i paragrafi, maggiore sarà l'alleggerimento in termini di codice, dunque tempi di scaricamento da parte degli utenti. Ma soprattutto il momento che vorremo cambiare l'aspetto dei paragrafi, piuttosto che dovere intervenire paragrafo per paragrafo, sarà sufficiente cambiare lo stile della pagina per cambiare in un istante l'aspetto di tutti i paragrafi.

Se poi questo stile diventa un file esterno con estensione css che viene collegato alla pagina con il tag link, sempre posizionato nell'head della pagina, ad esempio

Ecco che sarà sufficiente cambiare questo stile esterno per cambiare istantaneamente aspetto a decine, centinaia o migliaia di pagine, senza considerare il peso in kb inferiore di queste pagine. Inoltre immaginiamo di volere anche aumentare l'interlinea dei paragrafi per renderli più leggibili, basterà aggiungere il seguente stile: line-height: 150%; per avere un'interlinea più spaziosa.

Poiché gli stili possono ridefinire qualsiasi elemento della pagina: titoli, paragrafi, elenchi, sfondi, collegamenti, tabelle, livelli, ecc. applicando un CSS esterno ad un sito abbiamo un solo file da controllare e modificare, quindi tempi di lavoro drasticamente ridotti, manutenzione del sito estremamente semplificata, possibilità di errori, omissioni o dimenticanze ridotta al minimo e siti con pagine più leggere da scaricare, dunque visitatori più soddisfatti.

A questo si aggiunga che, per mezzo dei fogli di stile possiamo controllare il layout della pagina e adattarlo alle nostre esigenze molto di più di quanto saremmo in grado con i tag e gli attributi dell'HTML e che solo in questo modo saremo in grado di realizzare pagine aderenti agli standard ed accessibili.

Anche il semplice esempio qui illustrato - a prescindere dalla possibilità di intervenire sull'interlinea - mostra delle sostanziali differenze con il suo equivalente HTML. Infatti una dimensione 4 del font è ridimensionabile dalle impostazioni di visualizzazione dei browser. Ciò non sarebbe, in termini generali, un fatto negativo, qualora si potesse contare su un'utenza di visitatori con un buon livello di alfabetizzazione informatica.

Purtroppo è vero il contrario. Per cui un utente potrebbe visualizzare in maniera anomala una pagina web semplicemente perché le impostazioni di visualizzazione dei caratteri sono impostate a "Molto Grande" o "Molto Piccolo" e l'utente essere assolutamente inconsapevole dell'esistenza di queste impostazioni.

Con la varietà di unità di misura dei CSS possiamo impostare le dimensioni dei font in base alle nostre esigenze. Ad esempio se le dimensioni del font sono impostate in punti (pt) non sono più modificabili da IE. Impostate in pixel, come nell'esempio, anche NN non può modificarle, ma Mozilla si.

Potremmo infine privilegiare l'accessibilità ed impostare una unità di misura relativa, che consente il ridimensionamento del font. Ad esempio impostando lo stesso testo ad una misura di 1.13 em oppure al 113% otterremo un testo identico a font size 4 dell'HTML e a 18 px dei CSS, e se sceglieremo em il ridimensionamento sarà più accentuato di quello percentuale. In definitiva un'ampia possibilità di scelta e dunque una flessibilità molto superiore.