I CSS - acronimo per Cascading Sheet Styles, altrimenti noti come style sheets
ovvero fogli di stile - 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.
Purtroppo il mondo dei browser si è adeguato parzialmente e tardivamente agli
standard. Per troppo tempo un browser marginale come Opera ha fornito il miglior
supporto ai CSS. Fortunatamente la situazione adesso è radicalmente cambiata,
se da un lato IE 5.X e 6 che rappresentano oltre il 90% dei browser utilizzati
supportano i CSS Level1 ed in parte anche i CSS Level 2, anche i diretti concorrenti,
Opera, ma ancor di più Netscape 6 +/Mozilla, sono browser che forniscono
un eccellente supporto ai CSS. Mentre i browser del passato, ovvero quelli della
quarta generazione ed inferiore, rappresentano l'8% dei browser, nella migliore
delle ipotesi, e con un trend costantemente in discesa.
Dreamweaver, fin dalle sue origini, ha rappresentato questa situazione ambigua,
fornendo da un lato un eccellente supporto ai CSS, ma anche orpelli del passato
come gli HTML Styles.
Attraverso le varie versioni il CSS editor di Dreamweaver è rimasto
immutato, riflettendo la situazione del mondo reale. Dalla versione MX, Dreamweaver,
adeguandosi alla mutata realtà dei browser, offre un più robusto supporto ai
CSS.
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 con il tag p e con 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:
<p align="justify"><font color="#3399CC" size="4" face="Georgia, Times New Roman, Times, serif">
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. Dreamweaver,
in questo caso ci viene incontro con i deprecati HTML
Styles.
Se creiamo uno stile in line avremo la seguente sintassi:
<p style="text-align:justify;
font-family: Georgia, Times New Roman, Times, serif; font-size: 18px; color:
#3399CC;">
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 vedremo oltre, 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 leggerezzadelle 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:
p {font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px; color: #3399CC; text-align: justify}
Questo stile comanderà
tutta la pagina all'interno della quale i paragrafi saranno marcati da un semplice
<p>. E' 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 linkato
alla pagina con il tag link, sempre posizionato nell'head della pagina, ad esempio
<link href="my_style.css" rel="stylesheet" type="text/css">,
ecco che, se abbiamo numerose pagine con tanti paragrafi con lo stesso aspetto,
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à
aggiumgere 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, link, tabelle, layer, 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 più
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 ed 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. Potremmo infine privilegiare
l'accessibilità ed impostare una unità di misura relativa, che
consente il ridimensionamento del font. Ad esempio impostando lo stessto testo
ad una misura di1.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 %. In definitiva una possibilità di scelta
e dunque una flessibilità molto superiore.