Lo scorso mese di dicembre è stata presentata l'edizione 2008 di 24Ways, la rassegna di articoli dedicati al web design che accompagna da qualche anno le giornate che portano al Natale.
In molti hanno commentato positivamente, oltre che la consueta qualità degli articoli, anche la nuova veste grafica del sito. A colpire sono stati soprattutto gli accattivanti effetti di trasparenza sparsi un po' dovunque sulla pagina, sulle aree fisse così come a livello di rollover su specifici elementi.
I molti che hanno commentato positivamente erano certamente utilizzatori delle ultime versioni di Safari, Firefox e Google Chrome, semplicemente perché gli unici in grado di godere appieno del supporto della trasparenza RGBa, una funzionalità introdotta nei CSS3 che promette e permette esiti davvero interessanti a livello visuale (una tabella riepilogativa del supporto nei vari browser è presente in calce a questo articolo di Chris Coyier).
Gli utenti di Opera e Internet Explorer si sono dovuti accontentare di una versione del sito perfettamente funzionante ma priva degli effetti di trasparenza ottenuti con RGBa. Il confronto tra questo screenshot (Safari su Mac) e questo (IE7) chiarisce abbastanza bene la situazione, anche se solo la navigazione diretta sulla pagina rende al meglio ciò che qui intendiamo dire (il riferimento è soprattutto ai rollover).
In questo articolo vedremo dunque cos'è la trasparenza RGBa e come usarla già oggi sui browser che la supportano offrendo agli utenti di Opera e IE un'esperienza accettabile in termini di fruizione della pagina e dei suoi contenuti.
Opacity e RGBa
Prima di procedere oltre è necessario chiarire un punto preliminare. Nei CSS è già prevista una proprietà in grado di rendere trasparente l'elemento a cui è applicata. Si tratta di opacity.
Supportata nativamente da tutte le versioni più recenti di Safari, Firefox, Opera e Chrome, può essere implementata su IE tramite i filtri proprietari di Microsoft. Chiariamo con degli esempi.
Nel primo abbiamo un box a cui abbiamo assegnato come sfondo un colore solido (background-color:rgb(0,0,255);). Nel secondo abbiamo impostato per il div un valore pari a 0.5 per la proprietà opacity:
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color:rgb(0,0,255);
opacity:0.5;
}
Chi utilizza IE, in qualunque versione, continuerà però a vedere il colore solido. Per ottenere la trasparenza dobbiamo ricorrere ai filtri:
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color:rgb(0,0,255);
filter: alpha(opacity=50);
opacity:0.5;
}
Ecco il risultato.
Qual è il problema di opacity? Il principale consiste nel fatto che l'effetto di trasparenza è applicato a tutti gli elementi figli dell'elemento a cui è assegnato. Nel nostro caso anche il testo risulta quindi translucido, non solo lo sfondo.
Di questo problema non soffre invece la trasparenza RGBa. Ecco il terzo esempio. Se usate Firefox, Safari o Chrome osservate bene il testo riempitivo e confrontatelo con quello del secondo.
Ma come si applica la trasparenza RGBa? Semplice. Vediamo il codice del terzo esempio:
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color:rgba(0,0,255,0.5);
}
La sintassi è simile a quella vista nel primo esempio, solo che invece di definire solo i valori rgb, si aggiunge quello per la trasparenza alfa (rgba). I primi tre valori, insomma, definiscono il colore, il quarto (può essere un valore tra 0.1 e 1) imposta il livello di trasparenza (a valori minori corrisponde una trasparenza maggiore).
Pensare agli altri browser
Chi ha aperto l'esempio 3 con IE ha notato che, in presenza di una dichiarazione RGBa, al box non viene applicato alcun colore di sfondo. Una situazione che in certi casi è chiaramente insostenibile. Il primo accorgimento per salvaguardare gli utenti dei browser che non supportano RGBa consiste quindi nell'aggiungere alla regola con il valore RGBa una seconda dichiarazione che contenga l'indicazione di un colore di sfondo solido (con rgb per intenderci). Ecco l'esempio 4 e il codice CSS che ci interessa:
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color:rgb(0,0,255);
background-color:rgba(0,0,255,0.5);
}
Sicuramente meglio, vero? Questo è il metodo usato anche su 24Ways per gli utenti IE/Opera. Attenzione all'ordine: va dichiarato prima il colore rgb e poi quello rgba.
L'ideale, poi, sarebbe definire i valori rgb alternativi con il colore solido in un CSS da servire agli utenti IE tramite i commenti condizionali (anche in questo caso uno sguardo al codice sorgente della home page di 24Ways chiarirà bene il metodo da adottare).
Conclusioni
Ci sono altri metodi per raggiungere l'agognata compatibilità cross-browser rispetto agli effetti ottenibili con la trasparenza RGBa.
David Dorward suggerisce per esempio l'utilizzo di un'immagine PNG di 1px semitrasparente da applicare come sfondo (sistema le cose su IE7/IE8 ma non IE6).
Chris Coyier ricorre all'uso, sempre per il browser di Microsoft, dei filtri proprietari. E altre soluzioni possono essere adottate ricorrendo a Javascript.
Non rientrano comunque nello scopo di questo articolo, che vuole innanzitutto essere un'introduzione a RGBa. E ci pare, poi, che nella maggior parte dei casi la soluzione semplice basata sull'uso di un colore solido alternativo possa accomodare le cose nel modo più opportuno, rispondendo in pieno ai dettami del progressive enhancement: ove sia possibile in base alle statistiche di accesso e ai dati sull'uso dei vari browser, fornire a tutti un'esperienza fruibile, offrire la versione più avanzata del sito agli utenti dei browser più capaci.
Tutti gli esempi visti nell'articolo sono disponibili per il download.
