When building sites for clients, one of the many requirements is for the site to work in IE6. This is mainly because the clients my company serves are based in South Africa. Most of the time this means simply adding an IE6 specific stylesheet and doing minor tweaks. Sometimes it means a bunch of seperate code than allows IE6 to regress gracefully. However every time requires some kind of transparent PNG work-around.
A favorite IE PNG Fix my lead front end developer, Alex, liked to use was Supersleight. I wasn’t going to question his motives, so I let him get on with it (good bosses don’t micro manage apparently). Most of the sites built were static xhtml sites, and occassionally some needed to be integrated into WordPress.
Supersleight works by using a transparent gif to replace the PNG image with an alpha channel (transparency) in question. It makes the origional image behave like a background image, leaving you with a transparent alpha channel effect – all very clever stuff really.
This posed lingering questions – what happens if your WordPress install is in a sub domain? What happens if you move your WordPress install (from a local install to a proof to the clients site)? What happens if you want to put the transparent gif in your theme folder?
Solution: Each time you would have to change the path to the gif, you would need to update the Supersleight file. Umm, no thanks.
Step up WP-Supersleight
This WordPress Plugin is ridiculously simple. It does two things.
- Dynamically updates the path to the transparent gif (stored in the plugin folder) so no matter what URL your blog is on, Supersleight will not break.
The plugin version is currently on version 1.0.1, and doesn’t need anything other than uploading and activation.
A bit more detail
So the script is safely nested in an if statement so it only initiates in IE6. This all happens in the <head> of your document.
You might notice the javscript file is named a php file. This is so that the file can update itself with the correct path to the transparent gif.
Then inside the supersleight.js file it updates the path to the x.gif file. This looks a bit like this:
var shim = ‘[path goes here…]/wp-content/plugins/wp-supersleight/images/x.gif’;
Pretty straight forward. Download the plugin (below), upload to your plugins folder and activate. Then Supersleight will be activated in your WordPress website.
Ready to give it a try
- [Download not found]
Let me know what you think in the comments below.