I never meant to become obsessive about getting PNG transparency working nicely in IE6. In the summer of 2003, I hit across a situation on a client project where what the designer wanted required the use of PNG transparency. The script that came to hand to get this working in IE6 at the time was called Sleight, but that only dealt with applying the filter to IMG elements. My design needed to do the same for CSS background images, so I hacked up a different version of the script for that purpose, called it bgSleight, and occasionally updated it.

Back in late 2007, I gathered up the work I’d been doing on bgSleight along with updates from Aaron Boodman’s original Sleight script and wrote Transparent PNGs in Internet Explorer 6 over at 24ways. In the article I go into some depth about the issues and the pitfalls of using an IE filter, so it’s a useful background read. Included with the article was a script I called SuperSleight which attempted to wrap up both my work and Aaron’s into a single script that made PNGs work in IE6, regardless of them being applied with CSS or HTML IMG tags.

Despite some efforts to make my script play nice and integrate with other JavaScript that may be in use on the page, a lot of users still found the script problematic. Whilst I was checking for existing onload event handlers in the page before adding mine, other scripts don’t necessarily do that and so could overwrite my event handler causing the script not to work. Not my fault, but still not good for those with the problem.

With the rise of JavaScript libraries over the last couple of years, the ecosystem has got a lot more friendly. Rather than having a page running a mishmash of different scripts running in different methodologies, the adoption of a library brings with it shared methodology and infrastructure. That means you can do things like set an onload handler and not worry that your code will not get executed – the library is managing that across all the JavaScript that may be on the page. This also means that there’s a lot less code that needs to be written per-script, as you can tap into what the library already has on offer. So it made sense to me to re-implement SuperSleight using a common JavaScript library.

The Plugin

I personally use jQuery in my work, and its widespread use and solid plugin architecture made it a good choice.

Download SuperSleight for jQuery (current status: beta)

You apply it to a section of the page like this:

$('#content').supersleight();

Of course, if you wanted to fix PNGs for the entire page, you can just apply it to the body element. For all sorts of reasons, it’s better to be specific if you can.

$('body').supersleight();

This can be safely reapplied after importing a chunk of HTML via an Ajax request (something I end up doing a lot), and it uses jQuery’s browser detection to only apply it to the appropriate versions of IE, so it’s safe to deploy for everything, or to include inside some Conditional Comments as you prefer.

As always, the script requires the path to a transparent GIF shim image. By default, and almost by tradition with this script, that’s x.gif, but you can specify any image you like:

$('body').supersleight({shim: '/img/transparent.gif'});

Other possible configuration values are imgs and backgrounds (both boolean, default true) to tell the script which PNGs to fix up, and apply_positioning (boolean, default true) to tell the script not to try and fix up some of the bugs around unclickable links. (See the 24ways article for more info on that).

As always, this is a work in progress, and I value any feedback on technical issues, ease of use or style. I’ve labelled the plugin as beta, because although it’s tested it could always use more. I need to thank Brad Wright for his valuable input so far. I welcome yours.