In questa guida illustreremo il funzionamento di CSS3, l’ultima versione, o livello secondo la terminologia W3C, dei fogli di stile con i quali si dovrebbe descrivere la formattazione delle pagine HTML. Questa guida deve essere intesa come un completamento della nostra guida base ai CSS che altro non è che una guida, molto dettagliata, alla versione 2.1 del linguaggio. Per una corretta e completa comprensione dei CSS3, pertanto, è indispensabile conoscere le basi di CSS rinvenibili nella precedente guida cui si invita il lettore a far riferimento.
E’ importante sottolineare fin da subito che CSS3 non altera il core del linguaggio rispetto a CSS2 ma si limita ad aggiungere nuove proprietà. In questa guida, pertanto, daremo per scontati argomenti quali la sintassi, i selettori, l’ereditarietà, ecc. e ci concentreremo sulle effettive novità di CSS3 rispetto alla versione precedente.
Una curiosità: CSS3 non ha un vero e proprio logo ufficiale, tuttavia è come se ne avesse uno:
Il logo di rappresentato qui sopra, non è altro che una rielaborazione del logo ufficiale di HTML5 che, tuttavia, ha assunto una tale diffusione da poter essere considerato a tutti gli effetti il logo di CSS3 (almeno sino a quando il W3C non ne formalizzerà uno diverso).
CSS3 e HTML5
CSS3 si accoppia bene con HTML5, ma è utilizzabile anche con le precedenti versioni del linguaggio. Diciamo che CSS3 e HTML5 sono spesso citati in coppia in quanto rappresentano i moderni standard per la creazione di pagine web, ma nulla vieta di utilizzare regole e proprietà di CSS3 anche all’interno di vecchi siti web sviluppati in HTML4.
Lo sviluppo di CSS3
A differenza delle versioni precedenti, CSS3 è stato diviso in moduli, ossia parti più piccole che incorporano specifiche proprietà ed aspetti del linguaggio. Questa suddivisione ha permesso di rendere più agevole lo sviluppo di CSS3 e di facilitarne, seppur in modo frammentato, il passaggio allo stato di "raccomandazione". Ad oggi sono solo 5 i moduli di CSS3 che hanno raggiunto questo stato, tuttavia quasi tutte le principali funzionalità sono già state incorporate nelle nuove versioni dei browser.
Novità di CSS3
Tra i principali novità di CSS3 segnaliamo fin da subito:
- nuovi selettori e pseudo-classi;
- nuove proprietà e metodi per la gestione dei colori e trasparenze;
- nuove proprietà per la gestione di sfondi e bordi;
- possibilità di utilizzare font non standard (@font-face);
- possibilità di creare layout a più colonne;
- possibilità di definire fogli di stile ad hoc in base alle caratteristiche del dispositivo in uso (media queries)
- effetti dinamici quali transizioni, trasformazioni e animazioni.
Nel proseguo della nostra guida passeremo in rassegna le principali caratteristiche di CSS3 con la raccomandazione al lettore di verificarne debitamente l’effettivo supporto da parte dei browser prima di utilizzarle in produzione.
