Introduzione ai CSS3
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 CSS 3, 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 CSS 3 (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 CSS 3. 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 CSS 3.
Media Queries
Le media queries CSS 3 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. Attualmente sono allo stadio di
Candidate Recommendation.
Selectors
I selettori CSS 3 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. Attualmente sono allo stadio di Candidate Recommendation.
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à. Attualmente è allo stato di Working Draft.
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. Attualmente è allo stato di Last Call.
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). Il suo stadio attuale è di Candidate Recommendation.
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. È nello stadio di Working Draft.
CSS Marquee
Questo modulo propone una soluzione CSS per evitare l'uso del proprietario elemento marquee.
Attualmente è allo stadio di Proposed Recommendation.
CSS Cascading and Inheritance
Vengono qui descritti i modi con cui gli stili vengono assegnati agli elementi tramite la cascata e la specificità. Working Draft.
CSS Color
Vengono introdotti nuovi concetti e valori per descrivere i colori CSS. Last Call.
CSS Fonts
Nuove proprietà e valori per i font CSS, come l'uso dei font scaricabili tramite la direttiva @font-face.
Working Draft.
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. Working Draft.
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. Working Draft.
CSS Hyperlink Presentation
Questo modulo estende il normale trattamento CSS dei link ipertestuali dando maggior controllo agli autori sullo stato di questi ultimi. Working Draft.
CSS Line Layout
Viene qui definito con maggiore precisione il layout degli elementi inline all'interno di una riga. Working Draft.
CSS Lists
Questo modulo affronta con maggior dettaglio e precisione il layout delle liste (ordinate e non-ordinate). Working Draft.
CSS Multi-column Layout
Vengono qui definite nuove proprietà e valori per gestire i layout su più colonne. Last Call.
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. Candidate Recommendation.
CSSOM View Module
Questo modulo consente agli autori di reperire informazioni sugli elementi senza far ricorso allo scripting. Working Draft.
CSS Paged Media
Si estendono le proprietà CSS per la stampa al fine di ottenere header, footer e numeri di pagina. Working Draft.
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. Working Draft.
Grid Positioning
Nel nuovo modello di layout CSS 3, 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. Working Draft.
CSS Text
Questo modulo tiene conto delle nuove necessità di internazionalizzazione nel definire nuove proprietà e valori per controllare il testo tramite i CSS. Working Draft.
CSS 2D Transforms Module
Questo modulo introduce nei CSS i concetti già presenti in SVG di trasformazione, rotazione e scalamento degli elementi. Working Draft.
CSS 3D Transformations Module
Questo modulo estende il precedente tramite nuove specifiche per le trasformazioni. Working Draft.
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). Working Draft.
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). Working Draft.