RSS feed

words on the web

The online home of Ben Darlow, a web developer in London, UK.
Nov 27

Internet Explorer 7 and Sleight

If you're a web developer who likes the subtle effects that can be achieved with 24-bit PNGs with alpha channel transparency, you've probably gnashed your teeth on occasions over the lack of support for said alpha channel in Internet Explorer in versions past. One workaround which allowed inline images to display as intended is Aaron Boodman's Sleight.

Of course, Internet Explorer 7 added support for alpha channels in PNGs, and so these problems are (largely*) negated now, so you might find you don't actually want the JavaScript processing overhead of sleight.js in your PNG-heavy pages. As it happens, Aaron went to the trouble of implementing app version detection (to detect that you have IE 5.5+), so the modification to disable Sleight in IE7 is trivially easy. In sleight.js:

6 function fnLoadPngs() {
7    var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
8    var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5 && Number(rslt[1]) < 7.0);

Of course, you could just download the modified version I'm using here.

*Of course, Internet Explorer 7 introduces a whole new issue with PNGs that use alpha transparency, which shows up if you use any JavaScript motion/blending effects such as those provided by script.aculo.us; it appears that IE7 only applies the alpha mask on PNGs correctly when the image is stationary and not changing transparency state. During any such transitions, only 100% transparent pixels are shown as transparent, and those that are partially transparent become fully opaque during the transition. Very ugly. Note that if you don't disable Sleight, it will actually compensate for this problem.