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:
<script type="text/javascript" src="addCSS.js"></script>
<script type="text/javascript">AddCSS('border.css')</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.
function AddCSS(fn){
var head = document.getElementsByTagName("head"),
s=head[0] ? document.createElement("link") : null;
if(s){
s.setAttribute("href",fn);
s.setAttribute("rel", "stylesheet");
s.setAttribute("type", "text/css");
head[0].appendChild(s);
}
else
setTimeout(function(){AddCSS3(fn)},10);
}
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"
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.
- 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
- 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"
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
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:
Figura 1 - selezioni personalizzate con i CSS3
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:
*::selection{background: #FF0;color: #C00}
*::-moz-selection{background: #FF0;color: #C00}
� 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:
Figura 2 - testo con ombra con i CSS3 e Safari
Ecco il CSS dell'esempio per quanto riguarda l'ombra:
h1{text-shadow: #999 3px 4px 5px}
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
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:
Figura 3 - div con effetto ombra
Ecco la parte del CSS dell'esempio relativo all'ombra, aggiunto come negli altri esempi da Javascript:
div#box{-webkit-box-shadow: 2px 2px 5px #777; box-shadow: 2px 2px 5px #777}
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:
Figura 4 - Angoli e bordi arrotondati su Safari
Ora il codice CSS dell'esempio per quanto riguarda la parte sugli angoli arrotondati:
div#box1{-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px}
div#box2{-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px}
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!