CSS3 a piccoli passi: questo il titolo di un articolo di Alessandro Fulciniti uscito in questa sezione nel 2007. Si trattava di una panoramica sulle caratteristiche fondamentali della nuova specifica e sulle strategie per implementare sin da ora alcune delle interessanti funzionalità proposte.
E a piccoli passi tali funzionalità stanno guadagnando il supporto su alcuni dei browser più diffusi, soprattutto Safari e Chrome (basati sul rendering engine WebKit) e Firefox.
"Troppo poco..." commenterà qualcuno. E non è un'obiezione trascurabile. Come non tenere conto, infatti, degli altri browser, a partire da quell'Internet Explorer che ancora oggi detiene le quote di mercato più alte?
A prima vista, insomma, potrebbe sembrare che lo sviluppatore desideroso di sfruttare quanto di nuovo e buono viene proposto nei CSS3 debba attendere un'altra era geologica in attesa, intanto, che il W3C porti a termine il lavoro sulle specifiche ufficializzandole ma soprattutto che tutti i produttori di browser estendano il supporto alle nuove funzionalità.
Se ne può uscire? Qualche mese fa uno dei massimi esperti ed evangelizzatori mondiali in fatto di CSS, Eric Meyer, ha pubblicato sul suo blog un intervento il cui titolo tradotto in italiano suona più o meno così: Javascript salverà tutti noi. Cosa intendeva? Semplice: grazie allo sviluppo di framework sempre più performanti e ricchi di opzioni possiamo contare sulla disponibilità di uno strumento in grado di garantirci sin da ora l'estensione del supporto delle parti più interessanti dei CSS3 su tutti i browser.
Nello specifico Meyer pensava soprattutto ai selettori CSS3, ma tanti sono i casi che possono essere citati. Quello forse più eclatante riguarda la proprietà border-radius, quella, per intenderci, che consente di ottenere elementi con angoli arrotondati con pochissime righe di codice CSS senza dove ricorrere ad immagini ed elementi HTML aggiuntivi. Le soluzioni Javascript per ottenere tale effetto con tutti i framework più diffusi non si contano.
In questo articolo parleremo proprio di questo, proponendo tre soluzioni basate su jQuery per implementare in maniera cross-browser tre proprietà/funzionalità dei CSS3: gli sfondi multipli, l'ombreggiatura sugli elementi HTML e i layout multi-colonna.
Prima di iniziare vi segnalo questa pagina del sito CSS3.info che sintetizza le proprietà CSS3 ad oggi supportate nei vari browser fornendo per ciascuna una piccola guida all'uso e degli esempi.
Sfondi multipli
La specifica CSS3 prevede la possibilità di indicare per un dato elemento più di un'immagine di sfondo.
Si tratta di un'estensione della proprietà background-image già prevista nelle specifiche precedenti. La differenza di fondo consiste nel fatto che nei CSS3 è possibile definire più di un'immagine attraverso il rispettivo URL. Si può passare dunque da
body { background-image: url("sfondo.jpg") }
a
body { background-image: url(sfondo.jpg), url(sfondo2.jpg) }
È prevista ovviamente la possibilità di impostare oltre all'immagine anche la posizione, la ripetizione o meno dell'elemento, etc. Vediamo subito un esempio (funziona su Safari dalla versione 1.3 e su Google Chrome).
Questo il codice CSS utilizzato per definire lo sfondo dell'header:
div#header{background: url(htmlit.gif) top left no-repeat,
url(back.jpg) repeat;}
Abbiamo impostato come sfondo un piccolo logo di HTML.it posizionato nell'angolo superiore sinistro e non ripetuto; poi un'immagine texture (back.jpg) ripetuta su tutta l'area del div.
Ecco uno screenshot di dettaglio a beneficio di chi non usa questi browser:
Attenzione all'ordine, soprattutto se si usano texture ripetute come quella dell'esempio! La specifica prevede esplicitamente che la prima immagine definita venga visualizzata sul primo livello e tutte quelle successive un livello dietro. In pratica, se avessimo definito le immagini nell'ordine inverso, la texture avrebbe 'coperto' il loghetto rendendolo invisibile (figura 2):
L'esempio è minimale. Per usi più creativi vi propongo questo esempio ma anche questa particolare applicazione di un effetto che ha dei limiti solo nella fantasia di chi lo adotta.
Usando il plugin jquery.background_layers.js possiamo facilmente proporre gli sfondi multipli a tutti i browser (almeno quelli recenti che supportano jQuery...). Ecco l'esempio.
Il codice è estremamente semplice:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.background_layers.js"></script>
<script type="text/javascript">
$(function(){
$('#header').add_layer("url('back.jpg') repeat");
$('#header').add_layer("url('htmlit.gif') top left no-repeat");
});
</script>
Dopo aver incluso nel documento jQuery e il nostro plugin, passiamo all'inizializzazione dello script. Impostiamo il selettore giusto (il div #header) e aggiungiamo l'URL delle immagini e i settaggi già visti per posizione e ripetizione.
Attenzione anche in questo caso all'ordine! Il plugin prevede un comportamento esattamente opposto a quello visto prima per i CSS3. Nel nostro caso, quindi, l'immagine texture va definita come prima.
Ombreggiatura
Oltre che l'ombreggiatura sul testo (text-shadow), i CSS3 prevedono la possibilità di aggiungerne una anche ad altri elementi (div, paragrafi, immagini, etc) attraverso la proprietà box-shadow. Ecco l'esempio (funziona su Safari 3+, Google Chrome e Firefox 3.1 beta).
Anche in questo caso uno screenshot per gli utenti di altri browser:
Ed ecco il codice:
img#foto{
border: 5px solid #000;
-webkit-box-shadow: 5px 5px 7px #333;
-moz-box-shadow: 5px 5px 7px #333;}
Nella parte HTML abbiamo inserito una semplice immagine. Nei CSS abbiamo aggiunto intorno ad essa un bordo nero spesso 5px e un'ombreggiatura.
Osservate che la proprietà box-shadow è attualmente implementata sui browser basati su WebKit e su quelli basati su Mozilla attraverso prefissi proprietari (-webkit- e -moz-). Bisogna pertanto adottare due regole.
Come vanno letti i valori? Da sinistra a destra:
- lo spostamento orizzontale dell'ombra: valori positivi collocano l'ombra a destra, valori negativi a sinistra;
- lo spostamento verticale dell'ombra: valori positivi collocano l'ombra in basso, valori negativi in alto;
- il livello di blur (sfocatura): un valore uguale a 0 crea un'ombra senza sfumatura;
- il colore.
Anche per questa proprietà possiamo contare su una soluzione basata su un plugin per jQuery: jquery.dropshadow.js.
È un caso esemplare per certi versi. Perché se è vero che grazie a questo plugin possiamo ottenere un supporto cross-browser per l'effetto, è anche vero che la resa visiva è di gran lunga inferiore e che certe situazioni, come quella dell'immagine vista nell'esempio, richiedono l'aggiunta di ulteriori elementi HTML (l'autore del plugin sottolinea comunque questo e altri 'limiti' nella documentazione). Intanto un raffronto visivo (i test sono stati effettuati su Mac) e l'esempio.
Ecco un dettaglio su Safari dell'esempio con i CSS, occhio all'ombreggiatura:
Ed ecco un dettaglio dell'esempio con jquery.dropshadow.js:
Inoltre, come si accennava, applicando l'ombreggiatura alla sola immagine, non c'è verso di ottenerla con il colore specificato. È stato necessario racchiuderla all'interno di un div:
<div class="wrapper"> <img id="foto" src="sea.jpg" alt="" /> </div>
Ecco il risultato che si otteneva senza compiere questa operazione:
A parte ciò, il codice Javascript è molto intuitivo:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropshadow.js"></script>
<script type="text/javascript">
window.onload = function()
{
$(".wrapper").dropShadow({left: 5, top: 5, blur: 2, opacity: 0.9, color: "#333"});
}
</script>
Come nel caso precedente, richiamiamo la libreria e il plugin e poi inizializziamo lo script. I valori applicati al div con classe wrapper (.wrapper) sono autoesplicativi e ricalcano quelli visti per i CSS con l'unica aggiunta di un valore per impostare l'opacità.
Anche in questo caso, volendo, poniamo, un'ombreggiatura a sinistra e in alto sarà sufficiente impostare valori negativi per i parametri left e top.
Layout multi-colonna
Uno dei nuovi moduli previsti nei CSS3 offre la possibilità di disporre il testo presente all'interno di un dato elemento su più colonne. Il risultato è quello di ottenere un layout che ricorda quello dei tradizionali quotidiani cartacei. Le colonne multiple sono supportate da Safari 3+, Google Chrome e Firefox 2/3.
Partendo dunque da questa situazione di partenza, è possibile arrivare facilmente a questo schema. Vediamo come.
Il div che ci interessa è quello con id content. Nella parte HTML utilizziamo regolarmente i paragrafi di testo, senza alcun accorgimento particolare. La formattazione su tre colonne è demandata a questa semplice dichiarazione CSS3:
div#content {
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;
}
Anche in questo caso il tutto risulta un po' verboso perché è necessario specificare le proprietà precedute dai prefissi proprietari. L'aggiunta della parte senza prefissi è una buona norma da adottare in queste situazioni: quando la specifica sarà ufficiale e i prefissi non più necessari, ci ritroveremo la regola già bella e pronta.
Attraverso column-count stabiliamo su quante colonne desideriamo distribuire il testo (3); con column-gap definiamo la distanza tra le colonne (1em); grazie a column-rule possiamo impostare un bordo (la proprietà non è supportata da Firefox).
Il modulo presenta altre interessanti opzioni e modalità per definire le colonne, ma questo può bastare. Ora proveremo a replicare tutto ciò con il plugin per jQuery Columnizer. Ecco l'esempio.
Numerose sono le opzioni di configurazioni disponibili (vi rimando per esse alla documentazione ufficiale), ma per replicare quanto visto in precedenza è sufficiente questo codice minimale:
<script src="jquery.js" type="text/javascript"></script>
<script src="autocolumn.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function(){
$('#content').columnize({columns : 3 });
});
</script>
Una volta specificato il div che ci interessa (#content) basta impostare il valore desiderato per il parametro columns.
Volendo è anche possibile intervenire con ulteriori personalizzazioni via CSS. Il plugin, infatti, crea di fatto tanti div con classe column per quante sono le colonne. Aggiunge inoltre la classe first alla prima colonna e la classe last all'ultima. Creando delle regole specifiche nel nostro CSS saremo quindi in grado, per esempio, di aggiungere dei bordi come nell'esempio visto per i CSS3.
Conclusioni
Che Javascript possa in certi casi essere utile per estendere il supporto di specifiche parti dei CSS su tutti i browser è dunque certo. Altrettanto certo è che sta al buon senso dello sviluppatore valutare tutti gli scenari e i possibili problemi di implementazione.
Tutti gli esempi sono disponibili per il download.
