Nonostante il CSS3 non sia ancora un vero e proprio standard, i cambiamenti nel web design iniziano ad assere visibili, e i moderni browser implementano già molte delle sue funzioni, e ne aggiungono sempre di nuove ogni volta che il W3C pubblica nuove specifiche.
Il CSS (Cascading Style Sheet) è un particolare linguaggio utile a definire la formattazione di pagine HTML, XHTML e XML. I CSS2 sono nati con lo scopo preciso di separare struttura e presentazione nei documenti html, periodo in cui la tendenza dominante nel web design era quella di un uso massivo delle tabelle e di alcuni marcatori presentazionali (come font) per definire la presentazione finale dei documenti.
L'affermarsi di nuovi linguaggi di marcatura derivati da XML (come XHTML, SVG, MathML ecc.) hanno messo in luce alcune carenze strutturali nei CSS2, quali la mancanza di un adeguato sistema di selettori capaci di operare su strutture XML complesse. Alle carenze strutturali si sono aggiunte anche quelle relative alla presentazione, in quanto gli autori chiedevano caratteristiche avanzate in grado di permettere loro di controllare aspetti evoluti del layout (font particolari, immagini di sfondo multiple, layout multicolonna, ecc.) in modo da potenziare gli strumenti per il web design.
Caratteristiche nel nuovo CSS3:
Modularità CSS3
I CSS3, si differenziano dal loro predecessore per il fatto di essere modulari; 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.
Con l'introduzione dei moduli, l'intero standard CSS3 sarà suddiviso in moduli diversi, ognuno riguardante particolari funzioni. Grazie a questa suddivisione, i vari software che utilizzano css potranno scegliere quali moduli adottare e quali no (ad esempio un reader non implementerà il modulo video e così via).
I Selettori
I selettori saranno ancor più utili in CSS3, e permetteranno di creare selettori per selezionare livelli della pagina più avanzati di quanto possibile adesso. Alcuni browser stanno già supportando questa funzione, per cui è già possibile sperimentarla. Mentre nel CSS2 era necessario inserire una classe per ogni elemento, pdf, word, zip e associare uno sfondo, nel CSS3 è possibile utilizzare lo stesso selettore per individuare che tipo di icona inserire.
Layout e effetti sui testi
Queste nuove potenzialità portano con sé nuovi scenari per chi si occupa di web design. Sarà possibile controllare approfonditamente interlinee, giustificazione del testo, sfondi multipli ecc.
- Ombreggiatura dei testi
Così come per i box, anche i testi possono essere resi con una gradevole ombreggiatura, completamente personalizzabile e gestibile da foglio di stile. Ed anche in questo caso senza ricorrere ad immagini, javascript o (come nell'esempio seguente) alla sovrapposizione di due testi identici ma dicolore diverso. - Utilizzo di font non convenzionali
Un a'altro problema nel web design era quello dell'utilizzo di font che non appartenevano alla categoria dei cosiddetti safe fonts o web fonts, e cioè font non presenti in tutti i sistemi operativi e che quindi non verrebbero riprodotti in un sistema nel quale non sono installati (con tutti i problemi estetici e di formattazione che ne derivano). I metodi utilizzati attualmente sono quelli di replacement che fanno uso di javascript o di flash per sostituire dinamicamente il testo inserito con corrispondenti elementi grafici (flash o immagini) che fanno uso di un font specifico. Grazie al CSS3 sarà possibile implementare direttamente il font desiderato e chiedere al browser che legge il foglio di stile di utilizzarlo. - Funzionalità Speech per l'accessibilità
Questa nuova proprietà chiamata Speech permette, qualora il browser sia abilitato, di far leggere porzioni di testo a un sintetizzatore vocale.
Gli Effetti grafici
CSS3 permetterà di generare automaticamente le ombreggiatura dei box, come anche di ruotare box ed immagini, di creare effetti polaroid e molto altro ancora.
- I Bordi arrotondati
I bordi arrotondati rappresentavano uno dei problemi più banali del moderno web design. Per ottenere un box dagli angoli smussati al momento era necessario utilizzare una (o più) immagini appositamente posizionate, oppure ricorrere a JavaScript. - Ombreggiatura dei box
L'ombreggiatura dei box è sempre stato un problema ricorrente nel web design. E' frequente l'esigenza di dare un effetto ombreggiatura agli elementi ed è frequente, anche in questo caso, ricorrere ad immagini o javascript per ottenerla.
CSS3 avrà questa funzionalità già integrata, e basta un po' di codice per creare l'ombreggiatura di un elemento.Utilizzando CSS3 quindi, si potrà ottenere questo gradevole effetto e si eviterà il rischio che qualche utente possa perderselo ad esempio perchè ha javascript disabilitato sul proprio browser. - Opacità
Un altro problema dei web design specialist era quello di rendere un'immagine semitrasparente. E' chiaro che è possibile fare ricorso ad immagini png create già semitrasparenti, incorrendo però in qualche dispiacere su Internet Explorer (che delle immagini png non è proprio innamorato). Il problema con il CSS viene risolto fornendo informazioni direttamente al browser che presenta l'immagine con l'opacità richiesta. CSS pensa anche a questo e questa funzione è già largamente presente, se non fosse sempre per il solito Internet Explorer che preferisce utilizzare una proprietà tutta sua anzicchè quella standard.
CSS3 quindi ha l'obiettivo di cancellare la differenza di proprietà causata da Internet Explorer ed imporre (com'è giusto che sia) una unica proprietà. - RGBA
La proprietà RGBA si impone come una delle più unteressanti novità nel web design. Si tratta della possibilità di controllare il colore di un elemento sia nella sua tonalità RGB (la miscelazione dei colori base rosso, verde, blu) che nel suo canale Alpha, e cioè nella sua opacità. Da qui appunto RGBA. - Sfondi multipli e trasformazioni in due dimensioni
Finalmente non sarà più necessario creare diversi div per avere diversi sfondi. Basterà sfruttare la potenza di CSS3. La specifica CSS3 prevede due proprietà molto interessanti: transform e transform-origin, che consentono di eseguire trasformazioni in due dimensioni quali rotazioni, scalature, inclinazioni e loro composizioni su un elemento della pagina. - Animazioni
Le animazioni sono un'ottima soluzione per migliorare la grafica complessiva del sito e renderla più dinamica. Al momento gli unici browser che supportano questa funzionalità sono quelli basati su Webkit. L'unico altro modo di ottenere questo risultato è il solito javascript. CSS3 porta con se alcuni moduli per creare delle vere e proprie animazioni 2D e 3D su oggetti. Sono state introdotte tre tipologie di animazioni, Transition, Transform e Animation.
