Supersleight jQuery Plugin for Transparent PNGs in IE6
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
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.
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:
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.
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:
Other possible configuration values are
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.