Questa è la traduzione dell'articolo Working With RGBA Colour di Drew McLellan pubblicato originariamente su 24 Ways il 1 Dicembre 2009.
Quando io e Tim discutevamo del redesign del sito di 24Ways l'anno scorso, una degli obiettivi chiave che ci siamo posti era quello di ottenere uno stile grafico accattivante senza appesantire la pagina con molte immagini. Quando abbiamo lanciato il sito molte persone sono rimaste sorprese dal fatto che il design non faceva uso di immagini PNG. Abbiamo invece usato i valori di colore RGBA, una funzionalità che è parte della specifica CSS3.
Cos'è il colore RGBA
Siamo tutti abituati a definire i colori nei CSS usando un mix di rosso, verde e blue, il mix richiesto per ottenre la tonalità che vogliamo. Tutto ciò è bello e funziona, ma qualunque valore alla fine specifichiamo uno è il dato comune: i colori sono solidi, piatti e anche un po' noiosi.
I CSS3 introducono un paio di nuovi modi per specificare i colori, uno di essi poggia sul sistema RGBA. La A sta per alpha, che si riferisce al livello di opacità del colore, oppure, per dirla in un altro modo, alla sua trasparenza. Ciò significa che siamo in grado di impostare non solo i valori per rosso, verde e blue, ma anche controllare quanto di ciò che sta dietro al colore viene mostrato. Proprio come con i livelli di Photoshop.
Ma non abbiamo già la proprietà opacity?
La possibilità di applicare l'opacità su un colore differisce leggermente dall'impostare l'opacità di un elemento attraverso la proprietà CSS opacity. Facciamo un esempio.
Abbiamo un elemento h1 con colori di primo piano e sfondo impostati rispetto ad una pagina che ha un background a pattern.
h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}Impostando la proprietà opacity possiamo sistemare la trasparenza dell'intero elemento e del suo contenuto:
h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;
}Il colore RGBA ci consente qualcosa di diverso: la possibilità di controllare l'opacità dei singoli colori piuttosto che dell'intero elemento. Così possiamo definire l'opacità solo sullo sfondo:
h1 {
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.5);
}Oppure possiamo lo sfondo con un colore solido e cambiare l'opacità solo sul testo:
h1 {
color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}Come si fa
Avrete notato che sopra ho usato la sintassi rgb() per specificare i colori. È un modo alternativo e meno comune rispetto all'uso dei valori esadecimali (tipo #FFF) ma ha un senso quando si inizia a usare RGBA. Dal momento che con i valori esadecimali non c'è modo per applicare l'opacità, usiamo la sintassi rgba() in questo modo:
color: rgba(255, 255, 255, 0.5);Proprio come nella sintassi rgb() i primi tre valori indicano la quantità di rosso, verde e blue. Possiamo specificarli con valori che vanno da 0 a 255, oppure in percentuale, da 0% a 100%. Il quarto valore è il livello di opacità, che va da 0 (completamente trasparente) a 1 (completamente opaco).
Possiamo usare questa sintassi dovunque si imposta un colore nei CSS: va bene per i colori di sfondo e per quelli in primo piano, per i bordi, etc. Tutti gli effetti di trasparenza usati sul sito di 24Ways sono ottenuti in questo modo.
Supportare tutti i browser
Come molte delle cose di cui parleremo quest'anno su 24Ways, il colore RGBA è supportato da molti dei nuovi browser, ma non da tutti. Firefox, Safari, Chrome e Opera supportano RGBA, Internet Explorer no.
Per fortuna, grazie alla robustezza dei CSS come linguaggio, possiamo specificare colori RGBA per i browser che li supportano e usare delle alternative per gli altri.
Usare un colore solido
La tecnica più semplice è quella di consentire al browser di usare un colore solido quando l'opacità non è supportata. Le regole di parsing dei CSS specificano che un valore non riconosciuto dovrebbe essere ignorato. Possiamo fare uso di questa caratteristica del linguaggio perché un browser che non supporta RGBA tratterà un valore di colore definito con RGBA come non riconosciuto e lo scarterà.
Così se specifichiamo il colore usando prima la sintassi rgb() per tutti i browser, possiamo poi sovrascrivere la regola con un valore rgba() per i browser che lo supportano.
h1 {
color: rgb(127, 127, 127);
color: rgba(0, 0, 0, 0.5);
}Usare immagini PNG
Nei casi in cui si usi la trasparenza su colori di sfondo (background-color nei CSS) ma non su bordi o testo, è possibile usare come alternativa delle immagini PNG con il canale alpha. È meno flessibile che usare i CSS dal momento che si dovranno creare nuove PNG per ogni livello di trasparenza richiesto, ma può essere una soluzione utile.
Usando lo stesso principio di prima, possiamo specificare lo sfondo con una regola di stile supportata da tutti i browser, e poi sovrascrivere la regola a vantaggio dei browser che interpretano la sintassi RGBA.
È importante notare che tutto ciò funziona perché usiamo la proprietà abbreviata background. Abbiamo in questo modo la possibilità di definire sia il colore di sfondo sia l'immagine di sfondo in una singola dichiarazione. È questo che ci consente di affidarci al fatto che i browser ignorano la seconda dichiarazione quando incontrano il valore rgba() non riconosciuto.
h1 {
background: transparent url(black50.png);
background: rgba(0, 0, 0, 0.5) none;
}Passi successivi
La cosa davvero grande rispetto al colore RGBA è che ci dà la possibilità di creare molto di più dal punto di vista grafico senza la necessità di usare immagini. Le pagine risultano più leggere e veloci, i siti sono più facili da realizzare e mantenere. I valori CSS possono anche essere modificati in base all'interazione dell'utente e anche manipolati con Javascript in un modo che non è così semplice facendo ricorso a immagini.
div {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}
div:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(142, 213, 87, 0.6);
}Un uso intelligente della trasparenza sul colore dei bordi può aiutare a rendere più bella la transizione elementi in sovrapposizione e la pagina che sta dietro.
Conclusioni
Questa è una breve panoramica dedicata al colore RGBA, spiega in cosa può essere una scelta valida e come può essere usato supportando tutti i browser. A causa del mancato supporto da parte di Internet Explorer è forse una tecnica non adattissima a contesti come siti altamente commerciali. Tuttavia, è uno strumento utile per tutti quei piccoli ritocchi che possono aiutare a rifinire il design. Quando il supporto dei browser diventerà più diffuso, avremo già acquisito tutte le conoscenze necessarie e avremo già dimestichezza con RGBA per usarlo al meglio.
