How to achieve cross-browser RGBA support with Compass

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:

Credit where it’s due

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!

3 responses

Richard Herrera responded on with…

Fantastic plugin. Any chance to support color rgba via the filter property?

Aaron responded on with…

@Richard - I’m afraid not mate. Should be simple enough to make your own mixins though using the filter property.

Leo Picado responded on with…

Hey Aaron

Thanks a lot for your work, I just tried it on a mini site that I’m working on and ran into a weird result, if you look at http://screencast.com/t/7MSbbXYvdUNR you will see that (under IE7 and IE8) the mixin is producing a sort of rgba-to-transparent gradient, starting from the top left to bottom right, it looks really good, it’s just not what I wanted to achieve, I wanted a ‘solid’ rgba png image, any idea of what might be triggering this problem?

Thanks, Leo

Comments are closed

Responses for this article have now been disabled. You can still email me directly through the contact form.