One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.
The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:
CSS
/* NON RGBa BROWSERS ------------------------------------------------------ */ #wrap { background-color: #000; } #footer, #header { background-color: #ccc; } .section { color: #fff; } /* HEADER ------------------------------------------------------ */ #header { background-color: rgba(204,204,204,.8); } #header ul { float: right; } #header li { float: left; margin-left: 1em; } #header li:first-child { margin-left: 0; } /* WRAP ------------------------------------------------------ */ #wrap { width: 960px; margin: 0 auto; background-color: (0,0,0,.7); } .section { padding: 1em; color: rgba(255,255,255,.9); }
I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.
DOESN'T WORK IN IE
/* HEADER ------------------------------------------------------ */ #header { background-color: #ccc; background-color: rgba(204,204,204,.8); }
Last but not least, when I use border's shorthand syntax, I declare it with the flat colors first, and then border-color afterward. See the example bellow for better understanding.
CSS
/* NON RGBa BROWSERS ------------------------------------------------------ */ #header { border: 1px solid #000; } /* HEADER ------------------------------------------------------ */ #header { border-color: rgba(0,0,0,.7); }
- For A Beautiful Web - Crafted by Andy Clarke
- TweetCC - Crafted by Andy Clarke
- Designer Tweet - My latest case study website.
- SimpleBits - Crafted by Dan Cederholm
Update
For more information and details about RGBa, please visit the following:Browser Support
- Firefox 3.0+
- Safari 3.0+
- Chrome 1+
- Opera 10+
Comments
leave a commentI think you have missed a valuable question here.
Why use RGBa? We have been using hex for almost 20yrs, why change? What are the benefits? why are browsers looking at integrating RGBa when RGB is already there?
Thanks for the comment Avangelist.
You defiantly brought up a good point. I’ll update the post with external links for more details about RGBa.
My intention with the post was to inform the readers that declaring the colors values on the same line don’t work, like many sources have implied. Not to long ago, I was working on a project that needed RGBa colors and I was declaring them like the other tutorials explained. It took me and a co-worker hours of debugging to later find out the problem, which was a simple color declaration on the same line.
I look forward to seeing those updates. Presumably the order in which they are declared in this case is quite important? They have to be placed after the hex otherwise they will be over-written with the statements below.
Is this correct?
Ya, it’s a little strange to not create hexa(#369, 0.8) also. We spent some time with the Safari guys this week and they’re adding quick conversions to their web inspector. Safari 4.0.3 came out yesterday, don’t know if it’s in yet. Anyway, you can click the color in the inspector and it cycles through the different color types.
@Avengelist:
Not only was the order important, but if I remember correctly, the rgb for degraded browsers has to be in a completely different CSS rule!
It has to be in a completely different CSS rule.