Is CSS3 RGBa ready to rock? (screencast)

Transcript

At An Event Apart Chicago in October I was lucky to catch Dan Cederholm's latest talk, Bulletproof A-Z (or A-U, as there are not too many bulletproof examples for letters V to Z). Dan had been parachuted onto the stage to stand in for Derek Powazek and Dan proved again what an amazingly clever and insightful ace face is is. For me, Dan's hour on stage was the most entertaining and educating session of the show in Chicago.

Dan's example for the letter C, Color Transparency With RGBa was the one that made me sit up and take notes. I've been aware of the principles of RGBa for some time, but like a lot of people I imagine, I've never really put it through its paces, largely because of its lack of implementation in some popular (cough) browsers such as Internet Explorer and Opera. But as I've been working on several designs lately where RGBa could be put to good use, I decided to explore how using it could make my life easier and my CSS more efficient and maybe save my visitors a few HTTP requests along the way.

RGBa

Run a Google search for RGBa and you'll find that it stands for Red, Green, Blue, Alpha; a colour space or model with a fourth channel, an alpha channel, which describes transparency. CSS3 adds this transparency information to other CSS color properties, enabling you to not only specify colours in RGB values but (most interestingly) the alpha-transparency value of that colour.

#facebox { background : rgba(255, 255, 255, .9); 

Where the first three values (255) are R.G.B. colour values and the fourth value (.9) is the level of transparency from 0 (fully transparent) to 1 (fully solid).

RGBa is not opacity

Most progressive browsers have already implemented CSS opacity and you might already be using it. But it's important to know that RGBa transparency and opacity are not the same thing. So how do they differ and why do these differences matter?

As CSS3.info explained so well, way back in June 2006, when you apply an opacity value to an element, say { opacity : .9; }, you set the opacity for that element and all of its children. Specifically, the opacity property is inherited by children of that element. So if I simply apply opacity to a division, the text and images contained in that div will inherit the opacity property and they will also be slightly transparent. Not in the designs that I'm working on, that's not the effect that I'm looking to achieve.

RGBa on the other hand sets colour transparency only for the element that I am declaring values for and the transparency is not inherited by child elements. Very cool and allows for some great creative possibilities.

RGBa in action

Let's take a look at my example file from a design that I'm currently working on. This site is not yet live and its design is not a template, so I'd appreciate it if you don't reuse it elsewhere. That is, unless you want me to come round to your house with my attack dog, Palin.

I've chosen to use RGBa transparency subtly in three areas of this design:

• The main navigation rail
• On the caption for the jQuery image slideshow
• For the Facebox, jQuery map where I wanted a semi-transparent white background to the popup

I designed the main navigation rail to have two distinct areas; one on the left for general information about this holiday park and the other, on the right, for contact and location information. I differentiated the list items on the right by giving them a lighter background. In the past I would have achieved this same result by either giving these list items a different background color value or perhaps by applying a semi-transparent white PNG background image.

But what if half way through my site build, the client asks for a different shade of blue, or each section of the site has to have a different navigation background colour? My CSS would then need to contain a separate set of colour values for each alternative unordered list, plus an alternative colour for each of the right hand areas; making my CSS more complicated than I would like.

RGBa simplifies my CSS by layering a semi-transparent white list item over the navigation's unordered list and allows whatever background colours I chosen for that list to show through.

#nav-main { background-color : #415968; }
li#nav-contact, li#nav-location { background : rgba(255, 255, 255, .25); }
li#nav-contact:hover, 
li#nav-location:hover { background : rgba(255, 255, 255, .5); }

As well as the background colour, I also use RGBa to make the navigation links themselves semi-transparent, returning them to fully solid on :hover.

#nav-main a { color : rgba(255, 255, 255, .75); }
#nav-main a:hover { color : rgba(255, 255, 255, 1); }

By using RGBa I either simplify my CSS across right the entire site or (if I'd chosen to employ alpha-transpent PNG images instead, a few HTTP requests and a few bytes of data.) The caption overlaid onto my jQuery slideshow is achieved in exactly the same way, this time with black RGBa colour values, to allow the changing images to show through behind the caption. Again simplifying my CSS and perhaps eliminates one HTTP request.

#interactive .one p { background : rgba(0, 0, 0, .5);  }

But it's when using RGBa on my jQuery Facebox popup map that it really shows its creative possibilities. Here a solid white background made the page feel a little flat, whereas a semi-transparent background helps make the page feel a lot more three dimensional.

#facebox {  background : rgba(255, 255, 255, .9); 
border : 10px solid #ede4c3;  }

So far I have used RGBa on link colour values and on backgrounds. Take a closer look at the design that I'm working on and you'll notice that the Facebox's border is still a solid colour. That is because RGBa has only been applied to the box's background. But when I apply RGBa values to the border as well, and you'll notice that elements of the page now show through to border, completing the result that I am trying to achieve.

#facebox {  border : 10px solid rgba(237, 228, 195, .5);  }

So what about non-RGBa aware browsers?

It's the question that I bet many people might be thinking. What about Internet Explorer or Opera that are so far non-supportive of RGBa? How would handle their lack of support? For Internet Explorer, my answer is simple; I will either supply those browsers with either solid colours or, in the case of Internet Explorer 7 I would supply an alpha-transparent PNG image, all through conditional comments.

But what about Opera. Take a look at my example in that browser and you'll see the impact of their (so far) non-support for RGBa. If your visitor demographic includes people who use Opera (and you can find them if you listen for the sound of jangling tambourines) you'll need to work harder as, of course, there are no conditionals to target the Opera browser. If and when I choose to target Opera, I use either Conditional CSS (a PHP server-side solution) or Raphael Lima's 1kb JavaScript solution that will both allow me to send specific CSS rules to the Opera browser.

Ready to rock?

So is RGBa ready to rock as a CSS property that you can use in everyday work? I think so. Rock on.

Update: Both HSLA and RGBA are implemented in the next version of Opera’s rendering engine, Core-2.2, and can be previewed in the Opera ACID3 build on Opera Labs for Windows and Linux, but sadly and strangely not for OSX.

Andy Clarke. 25/10/08 | Tweet this | Short URL: http://forabeautifulweb.com/s/104.