Introduzione

Circa 10 anni fa HTML.it pubblicava la Guida di base ai CSS. Dalla prospettiva di chi sviluppa siti web si tratta di un'epoca ormai remota. Era da poco uscito Internet Explorer 6; Firefox non esisteva, se non nelle vesti di quello che può considerarsi il suo papà, Mozilla; a dare i grattacapi più grossi a designer e sviluppatori alle prese con i CSS era soprattutto Netscape 4. Nessuno avrebbe allora immaginato che Apple avrebbe prodotto un browser, né che lo avrebbe fatto Google, allora solo il motore di ricerca emergente. 'Mobile' significava telefoni cellulari con cui parlare e scambiarsi SMS. A dare un tocco di dinamicità al web era solo Flash, framework Javascript potenti, leggeri e tuttofare alla jQuery erano pura utopia. Eppure...

Eppure quella guida è ancora oggi una risorsa valida per quanto riguarda i contenuti. L'impianto di base dei CSS, la parte che tutti usiamo come fondamento della parte visuale dei nostri siti ancora oggi è tutta in quelle 36 lezioni.

Web standard e browser: una storia complicata

La base di quella guida era rappresentata dalla versione 2 della specifica CSS del W3C. Risale al 1998. La versione 2.1, che non ha mai raggiunto lo stato di raccomandazione, è più che altro una revisione che poco o nulla aggiunge in termini di nuove proprietà. Bene, per avere un pieno supporto di queste specifiche su tutti i browser più diffusi si è dovuto attendere il 2008, data in cui Microsoft ha rilasciato Internet Explorer 8, la prima versione del browser della società di Redmond ad offrire una compatibilità totale rispetto agli standard fissati dal W3C. Il traguardo era stato raggiunto da tempo dai concorrenti.

Queste semplici considerazioni bastino per rammentare come l'incrocio tra il lavoro del W3C e l'evoluzione dei browser abbia costituito in questi anni il contesto in cui sviluppatori e designer hanno dovuto muoversi, non senza difficoltà. Da una parte c'è stato l'emergere di nuove esigenze di fronte alle quali i CSS si sono dimostrati spesso uno strumento inadeguato o poco flessibile. E anche quando l'ingegno di questo o quello sviluppatore è riuscito ad elaborare tecniche efficaci per risolvere specifici problemi, ci si è spesso scontrati con l'ostacolo della compatibilità cross-browser. Per anni si è avuta l'impressione che lo sfruttamento di tutte le potenzialità dei CSS dovesse rimanere confinato a gallerie sperimentali seppur pregevolissime. Oppure che a fare le veci dei CSS su molti fronti dovesse essere necessariamente Javascript.

Negli ultimi tre anni, invece, abbiamo assistito ad un'accelerazione importante.

Sul versante del W3C, con i CSS3, ha prevalso l'idea di una suddivisione in moduli della specifica, con l'aggiunta di proprietà, tecniche e metodi finalmente tarati sulle esigenze reali di chi fa siti web.

D'altra parte, i produttori hanno abbracciato, tutti, l'idea di cicli di sviluppo più serrati per le varie versioni dei browser. Ciò si traduce in un supporto alle nuove funzionalità CSS3 che si estende in tempi molto più rapidi. Di conseguenza, la gran parte di quanto è oggetto di questa guida può essere implementato già oggi sulle versioni più recenti di tutti i principali browser.

Cosa cambia nei CSS3

Come si accennava, le specifiche legate ai CSS3 hanno tre caratteristiche fondamentali:

1. Lasciano inalterato il core del linguaggio: tutto quello che è valido e funzionante dei CSS 2 continua ad esserlo nei CSS3.
2. Aggiungono un gran numero di nuove proprietà. Come si ricava da questa tabella curata da Jens Meiert, dai CSS 2 ai CSS3 il numero di proprietà passa da 120 a 245, e la cifra potrebbe salire con l'introduzione di nuovi moduli. Basta questo dato per capire che i CSS3 coprono le aree più disparate nel contesto della presentazione visuale (e non solo) dei contenuti distribuiti via web.
3. Sono organizzati in moduli. Piuttosto che riproporre un'unica specifica, il W3C ha organizzato la specifica in moduli, ciascuno dei quali copre una determinata area dei CSS. Ognuno ha una vita propria e al momento un diverso grado di avanzamento sulla via che porta alla definizione come raccomandazione. Su questa pagina costantemente aggiornata è possibile farsi un'idea dello stato dell'arte. L'idea che se ne ricava è quella di un lavoro in fieri, di un cantiere aperto ben lungi dall'aver raggiunto nel complesso una qualche forma di stabilità.

Ciò non significa che oggi non si possa iniziare a lavorare con quelle funzionalità ormai mature e supportate. I contesti in cui i CSS3 rivelano già oggi tutte le loro potenzialità sono:

• I selettori.
• Le nuove proprietà e i nuovi metodi per la definizione del colore.
• Le nuove proprietà dedicate alla gestione di bordi e sfondi.
• Funzionalità legate al testo e ai font come la possibilità di usare caratteri tipografici non presenti sul computer dell'utente (web fonts con @-fontface).
• Nuovi modi per impostare il layout (layout multi-colonna, flexible box model).
• La possibilità di servire fogli di stile ad hoc in base alle caratteristiche dei dispositivi (media queries).
• Metodi e tecniche per dare dinamicità alla pagina (transizioni, trasformazioni, animazioni).

Argomenti della guida

Non potendo contare su una specifica stabile come riferimento, nel selezionare gli argomenti di questa guida abbiamo dovuto compiere delle scelte. Questa che può considerarsi una versione di base verterà sulle aree qui sopra elencate e su proprietà/funzionalità supportate al momento da almeno due browser tra i cinque più diffusi (Internet Explorer, Firefox, Safari, Chrome, Opera).

Una sintesi degli argomenti è ricavabile anche dalla tabella della compatibilità sui browser dei CSS3 che fa da complemento alla guida. Buona lettura.