Primi passi con i CSS3

I CSS3 hanno visto l'inizio del loro processo di definizione
da parte del W3C già nel 1999. A distanza di oltre nove anni, tale processo
è ancora in corso, e ci vorranno forse ancora diversi anni prima che
diventino una raccomandazione e si possano usare
con sicurezza sui diversi browser.

La raccomandazione ufficiale del W3C per quanto riguarda i CSS è rappresentata dai CSS2, anche se molti produttori di browser utilizzano come riferimento per l'aderenza agli standard anche i CSS2.1, una revisione della specifica ufficiale rimasta però allo stato di working draft (ad oggi i CSS2.1 sono supportati nella quasi totalità dalle ultime versioni di Firefox, Safari e Opera, un po' indietro risulta invece
Internet Explorer 7, il cui supporto è buono ma non
totale).

Molti web designer e autori del panorama internazionale iniziano a
chiedersi quando sarà possibile usare i CSS3. Tra i tanti, da evidenziare la proposta di Andy Budd sulla definizione
dei CSS2.2 di cui abbiamo parlato sul blog. Si tratterrebe di una specifica intermedia che racchiuderebbe le proprietà CSS3 che attualmente contano almeno un'implementazione sui browser. La proposta di Budd sta facendo discutere, e ha quanto meno risvegliato l'interesse sui CSS3.

Che vengano implementati i CSS 2.2 ancora non è possibile stabilirlo,
come non è possibile sapere quando i web designer potranno beneficiare in
maniera cross-browser delle utilissime proprietà CSS3. Ma è bene iniziare
a conoscerle, soprattutto quelle che sono parzialmente implementate sui
browser attuali: è questo lo scopo di questo articolo, in cui introdurremo
i CSS3 e vedremo come sia possibile utilizzare alcune delle caratteristiche
da subito e imparare ad osare.

La struttura dei CSS3

I CSS3, a differenza dei CSS2.1, sono costituiti da moduli,
ovvero gruppi di proprietà affini e con scopi simili. Il W3C
spiega così la decisione di adottare i moduli:

"Piuttosto che tentare di forzare dozzine di aggiornamenti in una singola
specifica monolitica, sarà più facile e più efficiente essere in grado di aggiornare
in una maniera più puntuale e precisa singole parti della specifica.
I moduli consentiranno quindi una più flessibile e veloce evoluzione delle specifiche nella loro totalità."

Tra i diversi moduli del W3C, vale la pena di citare il modulo per i selettori,
per il box model, quello per il layout, per
gli sfondi e i bordi e per il testo multicolonne.

In questa pagina vengono
presentati brevemente i moduli CSS3 e il loro stato attuale nel processo di definizione.
Ciascun modulo, prima di arrivare a diventare parte integrante di una specifica, dovrà
attraversare le seguenti fasi:

• Working draft: la fase di stesura e definizione
• Last call, ovvero l'annuncio del termine fase iniziale
• Candidate raccomandation in cui il modulo viene proposto a raccomandazione
• Proposed reccomandation in cui il modulo viene sottoposto al Comitato Consultivo (Advisory Committee) per il vaglio finale
• Reccomandation: il modulo viene accettato e diventa parte delle specifiche

Si tratta di un lungo iter, soprattutto considerando che fino allo stato di reccomandation
un singolo modulo può anche arretrare nei vari step se non dovessero esserci le condizioni
per procedere al passo successivo.

Come si potrà notare molti dei moduli sono allo stato iniziale, ma ciò per fortuna
non ha impedito a browser vendor quali Opera, Firefox e Safari
di implementare alcune utili proprietà. In generale, è buona l'aderenza
dei selettori CSS3 sui browser attuali; ma per quanto riguarda le proprietà,
a volte si tratta di implementazioni non standard e soluzioni proprietarie
fin tanto che il lavoro sui CSS3 porti a delle specifiche definitive, ovvero
delle reccomandations.

Firefox e Safari per convenzione hanno su
alcune di esse rispettivamente i prefissi -moz
e -webkit. Si possono trovare ben documentate
nel sito CSS3.info, un pratico riferimento per tutto ciò che
riguarda il mondo dei CSS3.

Dopo questa breve introduzione teorica ai CSS3, vedremo nel prossimo
appuntamento lo stato attuale dei CSS3 sui browser, insieme ad un semplice
metodo per poterli usare da subito. Non mancate!

Usare i CSS3 oggi

Ci sono alcuni punti da considerare se volessimo ad oggi avvantaggiarci
delle potenzialità CSS3 disponibili sui browser.

Il primo e più importante concetto è che dovremo introdurre soluzioni simili
attraverso quello che è il progressive enhancement, ovvero
l'arricchimento progressivo.
Dovremo fare quindi in modo che i browser capaci siano in grado di beneficiarne,
ma garantire soprattutto che sugli altri browser non vengano compromessi
aspetti fondamentali quali resa visuale, usabilità, accessibilità e fruibilità
dei contenuti. In sostanza, allo stato attuale delle cose, l'unico uso
possibile dei CSS3 è per scopi puramente decorativi ed effetti grafici
non indispensabili, che magari sarebbero possibili altrimenti solo
attraverso l'uso di immagini.

Il secondo punto è la mantenibilità: mentre sappiamo
ad oggi che i CSS2 sono una raccomandation, i CSS3 sono ancora
in fase di sviluppo. Utilizzare soluzioni CSS3, ancor più se si tratta
di soluzioni proprietarie, potrà richiedere un intervento sul CSS di un sito
ad ogni evoluzione delle specifiche o qualora venga rilasciata una nuova versione
di un browser.

Il terzo punto è la separazione, che deriva dal punto precedente.
A parer mio, il modo migliore per poter sfruttare oggi le caratteristiche CSS3
è tenerle separate dal CSS principale, che dovrà aderire alle specifiche
CSS2. Ciò dovrebbe garantire una buona stabilità, confinando eventuali aggiornamenti
nel CSS dedicato.

Quarto ed ultimo punto, ma non meno importante, è la validazione.
Il validatore CSS accompagnerà la definizione delle specifiche CSS3 fino allo stato
di reccomandation. In ogni caso poi, servirsi di soluzioni proprietarie con
prefisso -moz e -webkit non consente la validazione.

Alla luce di quanto appena detto, ho ideato una piccola soluzione per poter
usare i CSS3 e garantire una buona separazione dal foglio di stile principale,
oltre che la mantenibilità e validalizione. Vediamola.

Aggiungere un foglio di stile CSS3 con JavaScript

Potrà sembrare all'apparenza una soluzione poco ortodossa, ma in effetti
l'aggiunta di fogli di stile che fanno uso di CSS3 o proprietà non standard mediante Javascript risulta a parer mio la soluzione più pratica.

Ciò consente infatti di mantenere il foglio di stile principale intatto
e senza la necessità di modifiche, oltre a permetterne la validazione.
Unico difetto è la dipendenza da Javascript: se risulta disabilitato
sul browser dell'utente non è possibile caricare il CSS aggiuntivo.
C'è da evidenziare che comunque una percentuale che oscilla tra il 95 e il 99%
degli utenti ha Javascript abilitato. Inoltre, quello che andremo ad aggiungere
attraverso Javascript è un CSS che per logica dovrebbe presentare caratteristiche di presentazione non essenziali, e più che altro decorative per i browser che potrebbero beneficiarne.

Siamo così pronti a presentare un esempio: si tratta di un semplice div che se visto con Firefox o Safari (versione 3 o con una versione recente di Webkit), dovrebbe avere gli angoli arrotondati. Torneremo sull'implementazione del CSS in seguito: quello su cui vorrei concentrare l'attenzione adesso è l'uso di Javascript per la parte CSS3 della pagina.

Se guardate il codice nella sezione head della pagina di esempio, noterete che ci sono due elementi script:

La prima riga serve per includere il piccolo script esterno, che pesa meno di mezzo Kbyte. Non sono necessarie conoscenze di Javascript per poterlo usare, ma per i curiosi e chi è un po' pratico di Javascript ho preparato la pagina con il suo codice da consultare. Tornando alle due righe viste sopra per incorporare lo script: salvo necessità di ridefinire il percorso del file, la prima riga per incorporare necessita di modifiche.

Attraverso il secondo blocco script verrà specificato invece il nome del file CSS da aggiungere alla pagina. All'interno del blocco script in questo caso, come si può notare, c'è un'istuzione ovvero AddCSS('border.css'). Tra i singoli apici basterà indicare il nome del file CSS da incorporare nella pagina, eventualmente con il percorso, e lo script si preoccuperà del resto. Da evidenziare che è possibile mediante lo script aggiungere diversi file CSS, e che lo script non dovrebbe dare conflitti con altri eventuali script della pagina.

A questo punto non ci resta che procedere ad introdurre le caratteristiche dei CSS3
in pratica: nel prossimo appuntamento partiremo dai selettori. Alla prossima!

I selettori CSS3

I selettori sono da sempre stati uno degli aspetti più affascinanti dei CSS: costituiscono infatti un vero e proprio "ponte" tra la struttura (ovvero l'HTML) e la presentazione, ed è grazie ad essi che è possibile creare regole specifiche e mirate per i vari elementi di
pagina. In tal senso, i selettori CSS3 estendono non di poco la versatilità e la potenza dei selettori CSS2.1. Vedremo qui una breve panoramica di quelli che sono, a parer mio, i più interessanti, mentre per il dettaglio rimando alla sezione del W3C dedicata ai selettori CSS3 oltre che all'ottima mini-reference CSS3 Selectors Explained di Roger Johansson. In quanto a quest'ultimo articolo, c'è da dire che è stato scritto a Gennaio 2006, ma riflette perfettamente l'ultimo Working Draft del W3C che risale al 15 Dicembre 2005.

Per quanto riguarda il supporto dei browser: generalmente i selettori CSS3 sono ben supportati da Opera, Firefox e Safari; la nomenclatura adottata dai browser è aderente al modulo del W3C. C'è da dire anche che, sebbene si tratti di una parte potente e versatile dei CSS3, è forse ad oggi quella da usare con più cautela: infatti proprio per la loro natura, un
selettore non supportato è in grado di inibire l'intera regola a cui appartiene.

I selettori di attributo

Uno classe di selettori utilissima nei CSS3 è quella dedicata ai selettori di attributo, gli unici ad essere tra l'altro supportati anche da IE7, oltre che ovviamente da Opera, Firefox e Safari. Vediamo brevemente di cosa si tratta:

• selettore[att^="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che inizia con la stringa "val"
• selettore[att*="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che contiene la stringa "val"
• selettore[att$="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che termina con la stringa "val"

Abbiamo visto nell'articolo Link con mini-icone come questi selettori siano molto pratici per individuare, ad esempio, il tipo di file a cui punta un link per aggiungere un'icona che ne identifichi la tipologia. Questa forse è l'unica classe di selettori che si può usare con relativa sicurezza, dato il loro
supporto esteso.

Le pseudo-classi strutturali

Questa è a parer mio una delle parti potenzialmente più utili dei selettori CSS3, ma il loro supporto è purtroppo scadente allo stato attuale dato che buona parte di essi è implementata solo in Konqueror e lo sarà probabilmente in Opera 9.5. Vediamoli in breve.

La pseudo-classe della forma selettore:nth-child(a+bn), dove a e b sono numeri interi con segno mentre n è una costante,
definisce una regola attraverso la quale è possibile individuare un elemento individuato da "selettore" che sia il figlio con ordine corrispondente al numero o alla formula espressa tra parentesi. Alcuni esempi:

• p:nth-child(3) individua i paragrafi che siano terzi figli di un qualsiasi elemento.
• tr:nth-child(2n) individua tutte le righe pari di ogni tabella, dato che n assume valori interi e maggiori o uguali a zero.
  L'espressione è equivalente a tr:nt-child(even)
• tr:nt-child(2n) individua tutte le righe dispari di ogni tabella. L'espressione è equivalente a tr:nt-child(odd)
• div#content div:nth-child(n-3) individua i div all'interno del div con id="content" che siano il primo, il secondo o il terzo
  elemento figlio. Da notare che se il div con id="content" non ha tra i primi suoi tre figli almeno un div, la regola che usa
  questo selelettore non verrà applciata
• tr:nth-child(5n): individua tutte le righe all'interno di una tabella che come indice sono multiple di cinque.

Il funzionamento della pseudo classe selettore:nth-lasth-child(n) è del tutto analogo, con la differenza che il conteggio parte dal basso, ovvero dall'ultimo figlio. Per esempio il selettore *:last-child(0) individua tutti gli elementi che sono ultimi figli di qualsiasi contenitore.

Molto più intuitive e versatili le pseudo-classi della forma selettore:nth-of-type(a+bn) e
selettore:nth-last-of-type(a+bn), il cui funzionamento è simile a quello delle due appena viste per
quanto riguarda l'espressione tra parentesi, ma con la differenza sostanziale che il conteggio viene effettuato
non su tutti i figli ma solo quelli individuati dal selettore a cui sono applicate. Ecco alcuni esempi:

• p:nth-of-type(3) individua i terzi paragrafi di qualsiasi elemento
• div#menu li:nth-of-type-child(5)>a individua il quinto link contenuto all'interno del div id="menu"
• div p:nth-last-of-type(0) individua tutti gli ultimi paragrafi che siano contenuti all'interno di un div

In aggiunta a first-child già inclusa nelle specifiche 2.1, si aggiungono alcuni casi speciali delle pseudo-classi appena viste:

• selettore:last-child: individua gli elementi identificati da "selettore" che siano anche ultimi figli del loro contenitore
• selettore:first-of-type per ogni elemento, individua il primo figlio identificato da "selettore"
• selettore:last-of-type per ogni elemento, individua l'ultimo figlio identificato da "selettore"

Queste in breve le pseudo-classi strutturali, una delle caratteristiche più appetitose per quanto riguarda i selettori CSS3. Il loro supporto allo stato attuale è scarso o assente, ed è un vero peccato vista la loro potenzialità espressiva.

Le pseudo-classi di stato

Una novità dei CSS3 specificatamente ideata per i form, sono le UI element states pseudo-classes, in grado di creare regole specifiche per elementi di form e i loro stati dinamici. Vediamole brevemente:

• selettore:enabled definisce una regola per gli elementi individuati da "selettore" (necessariamente elementi di form) che siano abilitati
• selettore:disabled definisce una regola per gli elementi individuati da "selettore" (necessariamente elementi di form) che siano disabilitati
• selettore:checked definisce una regola per gli elementi individuati da "selettore" (necessariamente checkbox o radio button)
  che siano attivi

Da quanto ho potuto verificare, al momento solo Firefox 2 e Opera 9.2 hanno supporto parziale per queste pseudo-classi, e in particolare solo per :checked. D'altra parte, non so se sia una buona idea permettere di ridefinire il look and feel di elementi
di form disabilitati; e personalizzare la resa di elementi di form si è da sempre rivelato problematico in quanto intervengono fattori quali il browser e il sistema operativo in uso.

La pseudo-classe ::selection

Dopo questa breve carrellata introduttiva ai selettori CSS3, arriviamo finalmente ad una di quelle caratteristiche già parzialmente implementate sui browser, ovvero la pseudo-classe ::selection, che consente
di specificare l'apparenza del testo selezionato dall'utente. Da notare per prima cosa la presenza di una coppia di due punti, al contrario delle altre pseudo-classi. Siamo ora pronti a presentare l'esempio: se viene visualizzato con Firefox 2 o Safari 3 e si seleziona il testo, ecco cosa risulta:

La pseudo-classe ::selection permette di definire una regola per controllare l'apparenza del testo selezionato dall'utente. Regola che potrà includere, almeno dai test che ho potuto svolgere,
solo il colore di sfondo e del testo della selezione.

Mentre Safari aderisce alla nomenclatura dei CSS3, per Firefox e i browser Gecko in generale, necessitano del prefisso "-moz-". Ecco le due regole utilizzate nell'esempio per far si che il testo selezionato risulti rosso su sfondo giallo:

È auspicabile che nelle future versioni di Firefox la pseudo-classe aderirà alla nomenclatura delle specifiche, e magari anche che qualche altro browser la supporti. Nel frattempo, per consentire la validazione del CSS principale, è preferibile tenere le due regole viste sopra confinate in un foglio di stile ad hoc. Nell'esempio ho salvato le due regole
nel file "selection.css" e le ho incluse nella pagina con lo script che abbiamo presentato lo scorso appuntamento.

Questo è tutto per quanto riguarda i selettori. Non ci resta che vedere alcune delle
potenti proprietà CSS3. Saranno argomento del prossimo appuntamento. Non mancate!

Effetto ombra sul testo

La proprietà CSS text-shadow è stata introdotta con i CSS2, per poi essere eliminata nei CSS2.1 . È finalmente tornata con i CSS3, ed è attualmente supportata solo da Safari. Vediamo subito l'esempio e il suo screenshot:

Ecco il CSS dell'esempio per quanto riguarda l'ombra:

La proprietà text-shadow accetta 4 valori, che sono nell'ordine:

• il colore dell'ombra
• la sua traslazione orizzontale: un valore positivo la traslerà verso sinistra, mentre uno negativo verso destra
• la sua traslazione verticale: un valore positivo la traslerà verso il basso, mentre uno negativo verso l'alto
• Il raggio di sfuocatura dell'ombra: al valore zero corrisponde un ombra netta, non sfumata

C'è da evidenziare che, sebbene l'effetto ottenuto con questa proprietà risulti molto accattivante, andrebbe usata con parsimonia. In particolare, potrebbe essere indicata su titoli e menu, ma a parer mio non andrebbe mai usata sul corpo del testo di una pagina web, per non comprometterne troppo la leggibilità. Inoltre è indispensabile ovviamente assicurarsi una leggibilità sufficiente soprattutto in assenza del supporto di questa proprietà nei vari browser e garantire quindi e comunque un buon contrasto tra testo e sfondo indipendentemente dall'ombra.

Drop shadow

L'effetto ombra non è solo possibile sul testo: i CSS3 infatti consentono di ottenere ombreggiature anche su altri elementi arbitrari di pagina attraverso la proprietà box-shadow. Al momento in cui scrivo, solo Safari (versione 3 o con Webkit aggiornato) implementa questa proprietà, a cui antepone il prefisso -webkit-. Vediamo l'esempio e un suo screenshot di resa proprio su Safari:

Ecco la parte del CSS dell'esempio relativo all'ombra, aggiunto come negli altri esempi da Javascript:

I valori ammessi dalla proprietà box-shadow sono nell'ordine: la traslazione orizzontale, quella verticale, la profondità dell'ombra e il suo colore. Da notare che nel codice dell'esempio ho anche incluso la proprietà standard box-shadow, così da averla già pronta nel caso in cui venga implementata dalle future versioni dei browser. Un accorgimento è da tenere però sempre presente: quando succederà, bisognerà accertarsi se il numero o l'ordine dei valori ammessi dovesse cambiare. Da notare che questa proprietà, attualmente supportata solo da Safari, è utilizzabile anche in combinazione con gli angoli arrotondati, che sono il prossimo argomento.

Angoli arrotondati

Gli angoli arrotondati sono da sempre croce e delizia dei web designer. Necessitano di una discreta preparazione grafica, dei necessari agganci grafici nel markup -soprattutto su elementi a larghezza variabile- e di un po' di lavoro con i CSS. I CSS3 da questo punto di vista sono in grado di ridurre non di poco i tempi di sviluppo in questi casi, dato che prevedono la proprietà border-radius per realizzare angoli e bordi arrotondati.

Attualmente, solo Safari e Firefox li supportano, con le soluzioni proprietarie -webkit-border-radius
e -moz-border-radius. Vediamo per prima cosa l'esempio e il suo screenshot:

Ora il codice CSS dell'esempio per quanto riguarda la parte sugli angoli arrotondati:

La proprietà border-radius (e le sue derivate non standard) utilizzano un solo valore nell'esempio, ovvero il raggio dell'angolo arrotondato. Alcune cose da evidenziare:
Firefox ha la tendenza a rendere gli angoli più piccoli rispetto a Safari; sempre in Firefox angoli e bordi arrotondati risultano privi di antialiasing, il che li rende non troppo curati. Da notare infine che se per ottenere i bordi arrotondati su un elemento, basta assegnargli un bordo.

Sfondi multipli

Una proprietà utilissima dal punto di vista grafico e rivista sostanzialmente è la proprietà background, che ammette con i CSS3 immagini di sfondo multiple per un solo elemento. Attualmente è supportata solo da Safari già dalla versione 1.3, ma si tratta a parer mio di una proprietà con la quale non conviene osare per non sacrificare
la resa sui browser attuali che non supportano gli sfondi multipli.

Roger Johansson ha pubblicato già a settembre 2005
Custom borders with advanced CSS che presenta due esempi (primo e secondo) di utilizzo degli sfondi multipli. A distanza di quasi due anni, sono a parer mio ancora da considerare come un'ottima sperimentazione.

Questo è tutto per ora per la parte grafica delle proprietà CSS3 Nel prossimo e ultimo appuntamento vedremo un esempio riassuntivo
e introdurremo le colonne multiple. Non mancate!

Esempio: un menu senza grafica

Ho pensato di preparare un piccolo esempio che potesse riassumere
alcune delle proprietà viste finora: si tratta di un menu a tab arrotondate e effetto ombra
sulle tab e sul testo. Vediamo lo screenshot con la resa su Safari, Firefox e Internet Exporer:

Si può notare che su Safari le tab hanno gli angoli arrotondati con una leggera ombra,
e anche il testo è ombreggiato. Firefox invece mostra solo le tab arrotondate, mentre
Internet Explorer 7 (e le sue versioni precedenti, insieme agli altri browser) mostreranno
semplicemente le tab squadrate.

Come negli altri esempi, anche in questo caso la parte relativa alle proprietà CSS3
e quelle specifiche per Safari e Firefox sono confinate in un CSS esterno, aggiunto
mediante Javascript con la consueta soluzione. Vediamo le due righe della sezione
head dell'esempio:

Vediamo quindi il CSS specifico per gli effetti grafici sul menu, che non richiede
immagini. Ecco le regole contenute nel file "menu.css":

Il foglio visto sopra potrà richiedere aggiunte o aggiustamenti man mano che i browser
implementano le proprietà CSS3 usate, o qualora Firefox o Safari dovessero usare la nomenclatura
standard. Ma è importante evidenziare un concetto di fondo, ovvero il progressive enhancement
di cui abbiamo parlato in apertura: il menu, sebbene non così accattivante come su Safari, resta
totalmente fruibile e non ha difetti di resa sugli altri browser.

Multicolonne con i CSS3

Il modulo per le multicolonne con i CSS è
stato presentato con un rivisto working draft di recente, ovvero il 6 Giugno 2007. Questo modulo consente di suddividere il testo su più colonne, con un'impostazione molto simile a quella della carta stampata.

Questo modulo è composto da relativamente poche proprietà, che sono:

• column-count che esprime il numero di colonne con cui suddividere il testo all'interno di un elemento
• column-width che esprime la larghezza delle colonne con viene suddividiso il testo all'interno di un elemento
• column-gap che esprime la larghezza delle colonne con viene suddividiso il testo all'interno di un elemento

Queste tre proprietà, che costituiscono il core del modulo, sono già implementate su Safari 3 e Firefox 2, con i soliti prefissi -webkit- e -moz-.
Ci sono alcune proprietà che, al momento in cui scrivo non sono supportate da alcun browser, e sono:

• column-rule che permette di definire presenza e aspetto della riga di separazione tra le colonne
• column-break-before e column-break-after che stabiliscono le interruzioni di colonna
• column-span che consente ad un elemento inserito in un contesto colonnare di occupare in larghezza un numero di colonne a piacere

Dopo questa breve introduzione, possiamo presentare l'esempio e il suo screenshot:

L'esempio è composto da tre sezioni a colonne multiple. La prima è costituita da 3 colonne con un column-gap abbastanza ampio,
ovvero 3em:

Nella seconda sezione viene solo definita la larghezza di ciascuna colonna e la spaziatura tra di esse: in questo caso il browser disporrà il testo su un numero di colonne tale da occupare lo spazio orizzontale
disponibile, cercando di mantenere per ciascuna di esse una larghezza vicina a quella impostata:

Il terzo e ultimo caso dell'esempio è una sezione a larghezza impostata
suddivisa su due colonne, ecco il codice:

Conclusioni e download

Termina qui questa piccola anteprima ai CSS3, in cui abbiamo attraversato parte della teoria accompagnandola con esempi pratici. Attualmente i CSS3 sono ancora distanti dal diventare raccomandation, ma browser quali Firefox, Safari, Opera e Konqueror iniziano già ad implementarne alcune caratteristiche
interessanti.

Conoscere e sviluppare con i CSS3 oggi non è fondamentale, né indispensabile: finché non avranno un buon supporto cross-browser andranno usati come soluzioni estetiche in modo da arrichire l'esperienza
visiva degli utenti che consultano le nostre pagine con browser capaci. Abbiamo però ritenuto utile presentarne una piccola anteprima, insieme ad alcuni esempi pratici che potranno costitutire una base di partenza per le vostre sperimentazione. Codice, script ed esempi sono disponibili per il download. Alla prossima.