Solving Internet Explorer’s PNG Shortcomings with JavaScript
Most modern browsers, like Firefox, Safari and Opera, offer support for PNG images with full alpha channel transparency. Even Internet Explorer 7 has gotten in on the PNG transparency act, which means designers can take advantage of sophisticated things like gradients or faded images.
But there’s one problem. The same problem web designers always face: Internet Explorer 6. Yes the old beast is archaic, but sadly, widely used and your transparent PNGs won’t work. There are some hacks out there to make IE6 use an alternate image, but most of them are quite cumbersome and difficult to deploy and reuse.
Which is why Drew McLellan of 24 Ways decided it was time for new solution. McLellan has just released an updated JavaScript package, known as Supersleight, for selectively applying CSS filter rules to IE6 only so IE6 will display an alternate gif image.
SuperSleight is based on Aaron Boodman’s script Sleight, which deals with PNG images in the page, but SuperSleight adds the ability to handle images loaded from CSS as well.
McLellan’s new version of SuperSleight script adds a number of new and useful features:
- Works with both inline and background images, replacing the need for both sleight and bgsleight
- Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
- Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
- Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
- Can be re-applied by any other JavaScript in the page useful if new content has been loaded by an Ajax request.
Using SuperSleight is dead simple, just link to the JavaScript file using conditional comments so that it is delivered to only Internet Explorer 6 or older.
[via Simon Willison]
