Cross-browser RGBA support has long been one of those web design holy-grails, more often than not resulting in our old friend Internet Explorer frustrating us yet again.

Last week I released a Compass plugin that makes wild promises - actual cross browser RGBA support! Well, sort of…

Of course the plugin doesn’t miraculously fix a broken browser, but it does use a well documented CSS solution that results in non-RGBA supporting browsers falling back to use an alpha-transparent PNG pixel image. The clever bit is that the plugin creates the pixel for you, meaning everything can be achieved with one simple line of SASS.

So, let’s cut to the chase and get this thing working:

Installation

I’m assuming you are already au-fait with Compass and SASS. If not, why not (learn about Compass)? Otherwise, installation is achieved via Ruby Gems:

sudo gem install compass-rgbapng

Using rgbapng with your existing Compass project

To use rgbapng with your project, require the plugin in your Compass configuration file:

require "rgbapng"

And then import the mixins to your SASS/SCSS files:

@import "rgbapng";

Make magic happen

Finally, use the provided mixin to produce your RGBA background:

@include rgba-background(rgba(0,0,0,0.75));

Which compiles to:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

There is an alternative mixin called rgba-background-inline which instead of creating a PNG image, falls back to BASE64 encoded image data. I suggest you read the documentation to familiarise yourself.

That’s it! Mission achieved.

Err, is that really cross-browser?

OK, major caveat time - by cross browser, I mean all browsers that support alpha-transparent PNGs. That does not include IE6.

Personally, I have reached a moment in time where I’ve begun dismissing IE6 issues as of very minor importance. However, everyone is different and I fully appreciate to others IE6 still plays an important role in their life (poor souls). Here are some suggestions:

• Use the DD_BelatedPNG JavaScript library to bootstrap PNG support to IE6. This is my preferred method.
• Don’t use my plugin at all, and instead create your own solution using Microsoft’s proprietary filters. Just make sure you wash your hands afterwards.
• Be a rebel and serve up a universal stylesheet to all your IE6 users.

Credit where it’s due

• The CSS technique used was initially described by Lea Verou in Bulletproof, cross-browser RGBA backgrounds, today.
• The SASS functions were first created by Benjamin Doherty using the RMagick library.

For those interested in the techy bits, my plugin differs from Benjamin Doherty’s attempt in that it avoids using the RMagick/ImageMagick combo - a notoriously difficult and memory-leaking piece of software to work with. Instead, my plugin uses the pure Ruby library ChunkyPNG to create the PNG pixels, resulting in much easier installation and deployment.

Enjoy!