I CSS 2 nacquero con lo scopo preciso di separare struttura e presentazione nei documenti HTML. Se si guarda con attenzione le specifiche
di tale linguaggio, si noterà come quasi tutti gli esempi presi in considerazione riguardano l'HTML (all'epoca, HTML 4), con scarsi riferimenti ad altri
linguaggi di marcatura, come l'XML. Questa caratteristica deriva dal fatto che i CSS 2 sono nati in un periodo in cui la tendenza dominante nei siti
web era quella di un uso massivo delle tabelle a scopo di presentazione e di alcuni marcatori presentazionali (come font) per definire
la presentazione finale dei documenti. Possiamo dire che i CSS 2 rappresentano la risposta ad uno stato di emergenza nel Web, stato che oggi si
può dire ampiamente superato.
Già nella revisione 2.1, sviluppata dal 2000 a oggi, si cominciarono ad affermare prepotentemente nuovi problemi nella struttura delle specifiche, problemi derivanti da un progressivo mutamento nel Web di allora (e di oggi). In primis, l'affermarsi di nuovi linguaggi di marcatura derivati da XML (come XHTML, SVG, MathML ecc.) mise in luce alcune carenze strutturali nei CSS 2, quali la mancanza di un adeguato sistema di selettori capaci di operare su strutture XML complesse. Alle carenze strutturali si aggiunsero più in là anche quelle presentazionali, in quanto gli autori chiedevano caratteristiche avanzate in grado di permettere loro di controllare aspetti avanzati del layout (font particolari, immagini di sfondo multiple, layout multicolonna, ecc.). Il W3C decise allora che non era sufficiente ampliare l'attuale specifica 2.1, ma che era necessario crearne una nuova che riflettesse il cambiamento avvenuto sul Web.
Fu così che nacquero i CSS3, che si differenziano dal loro predecessore per il fatto di essere modulari. In altre parole, invece di scrivere una sola specifica unitaria suddivisa in vari capitoli, si è proceduto alla realizzazione di altrettanti moduli separati, ciascuno dei quali è dedicato ad un particolare aspetto dei CSS3 (sintassi, selettori, box model, testo, colori, ecc.). In questo modo i browser non sono più costretti ad implementare le intere specifiche in toto, ma possono supportare questo o quel modulo in base alle loro esigenze. L'unica limitazione è che quando un browser vuole supportare un modulo, il suo supporto deve essere completo. Di fatto, tuttavia, nel corso degli ultimi anni si è assistito ad un'implementazione incrementale dei moduli, nel senso che i browser hanno raggiunto il supporto completo ai moduli solo dopo un certo numero di release.
Tale supporto è aumentato in modo considerevole negli ultimi anni, e oggi possiamo dire che, a parte l'eccezione di Internet Explorer, tutti i maggiori browser hanno un supporto molto avanzato ai moduli CSS3. Si ricordi che questo supporto è destinato ad aumentare col tempo, e quindi è più che probabile che anche i browser che oggi hanno uno scarso supporto lo miglioreranno nelle release che verranno.
Una specifica a moduli
Ecco una breve panoramica dei principali moduli CSS3.
Media Queries
Le media queries CSS3 sono un'aggiunta alle normali regole @media in grado di assegnare stili in base
a nuovi parametri quali la dimensione dello schermo e le proporzioni di quest'ultimo.
Selectors
I selettori CSS3 sono stati pensati per funzionare anche con complessi documenti XML. Sono in grado di attraversare la gerarchia ad albero di un documento e di selezionare gli elementi in base a nuove relazioni tra essi (come ad esempio il fatto di essere l'n-esimo figlio del proprio genitore.
CSS Template Layout
Questo modulo, precedentemente noto come Advanced Layout, specifica nuovi modi per posizionare gli elementi in base alle relazioni intercorrenti tra di loro al fine di garantire la massima flessibilità.
CSS Backgrounds and Borders
Questo modulo descrive nuove funzionalità per gli sfondi e i bordi, tra cui la possibilità di estendere le immagini di sfondo e di arrotondare gli angoli dei bordi.
CSS Basic User Interface
In questo modulo vengono introdotti nuovi metodi e proprietà per assegnare degli stili all'interfaccia utente di un documento web (come ad esempio i form).
CSS Basic Box Model
Questo modulo tiene conto delle differenze esistenti tra scritture orizzontali e verticali all'atto di definire il box model degli elementi.
CSS Marquee
Questo modulo propone una soluzione CSS per evitare l'uso del proprietario elemento marquee.
CSS Cascading and Inheritance
Vengono qui descritti i modi con cui gli stili vengono assegnati agli elementi tramite la cascata e la specificità.
CSS Color
Vengono introdotti nuovi concetti e valori per descrivere i colori CSS.
CSS Fonts
Nuove proprietà e valori per i font CSS, come l'uso dei font scaricabili tramite la direttiva @font-face.
CSS Generated Content for Paged Media
Questo modulo estende le comuni proprietà CSS per la stampa con l'introduzione di note a piè di pagina e riferimenti incrociati.
CSS Generated and Replaced Content
In questo modulo viene introdotto il nuovo concetto di sostituzione del contenuto effettivo di un elemento con quello generato dai CSS.
CSS Hyperlink Presentation
Questo modulo estende il normale trattamento CSS dei link ipertestuali dando maggior controllo agli autori sullo stato di questi ultimi.
CSS Line Layout
Viene qui definito con maggiore precisione il layout degli elementi inline all'interno di una riga.
CSS Lists
Questo modulo affronta con maggior dettaglio e precisione il layout delle liste (ordinate e non-ordinate).
CSS Multi-column Layout
Vengono qui definite nuove proprietà e valori per gestire i layout su più colonne.
CSS Namespaces
Vengono qui definiti i modi per selezionare gli elementi in base alla presenza di un determinato namespace. Indispensabile per la formattazione di documenti XML.
CSSOM View Module
Questo modulo consente agli autori di reperire informazioni sugli elementi senza far ricorso allo scripting.
CSS Paged Media
Si estendono le proprietà CSS per la stampa al fine di ottenere header, footer e numeri di pagina.
CSS Presentation Levels
Questo modulo introduce il concetto di presentazioni multiple di uno stesso documento, al fine di facilitare particolari layout come quelli delle slide di una presentazione.
Grid Positioning
Nel nuovo modello di layout CSS3, un elemento posizionato viene a formare una griglia di presentazione. Questo modulo propone un insieme di coordinate per il posizionamento degli elementi flottati e posizionati in modo assoluto.
CSS Text
Questo modulo tiene conto delle nuove necessità di internazionalizzazione nel definire nuove proprietà e valori per controllare il testo tramite i CSS.
CSS 2D Transforms Module
Questo modulo introduce nei CSS i concetti già presenti in SVG di trasformazione, rotazione e scalamento degli elementi.
CSS3D Transformations Module
Questo modulo estende il precedente tramite nuove specifiche per le trasformazioni.
CSS Transitions Module
Questo modulo introduce il concetto di transizione e ritardo nei passaggi di stato tra gli elementi (per esempio quando un elemento riceve il focus e poi lo perde).
CSS Animations Module
In questo modulo vengono introdotte nuove proprietà in grado di controllare gli stadi intermedi dell'animazione degli elementi (per esempio in sequenza).