Yesterday's featured tutorial on Ajaxian.com was titled: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery by Brian Dillard.

I wonder how this tutorial got onto Ajaxian as the topic is so much out of date. Ajaxian has always been a place of inspiration and a pit stop for the latest and greatest in the world of JavaScript and the whole Web scene. I was a little put off by this tutorial, though out of curiosity took a dive in anyway.

The title alone is a mouthful to say the least and a glimpse of the trauma you will go through if you make the effort to read through the two part series. The tutorial specifically deals with how Pathfinder implemented transparent rounded corners on their new website. I know, nothing new. However, the worst is yet to come...

The transparent corners on Pathfinder's website are actually background PNG32 images. IE6 doesn't support PNG32 transparency so IE PNG Fix came to the rescue. What IE PNG Fix does is it finds all PNGs contained within img tags and backgrounds, and adds some additional styles on-the-fly to present those PNGs via the progid:DXImageTransform.Microsoft.AlphaImageLoader filter. Then to overcome yet another limitation introduced by AlphaImageLoader, jQuery was used to append an img tag on-the-fly below the rounded box to form the bottom corners.

OK, it does the job so why whine about it? Well it's an overkill if you think about it. Firstly IE6 has a problem with garbage collection when it comes to CSS filters. So the more AlphaImageLoader PNGs you have on a page the more unrecoverable memory you snatch away from your IE6 users. Secondly jQuery and IE PNG Fix are used in twine to tackle a single superfluous design problem, which adds a lot of unnecessary bloat. Pathfinder have truly fallen into the PNG transparency trap!

In the spirit of progress enhancement, which they avidly promote, they should have ignored IE6 and gave those users square boxes! However, for this particular case we're in luck as there is an alternative—convert those dreaded PNG32s into transparent PNG8s!

To demonstrate proof of concept take a look at this screenshot below. On the left is Firefox, on the right is IE6:

Not much difference aye? Apart from the aliased edges, which to be honest isn't all that bad, they look pretty similar. I don't think jagged edge corners are a sign of an amateur at work. I think it's a reasonable sacrifice. By using PNG8 your corners won't degrade as beautifully but they will degrade flawlessly. No hackery, less bloat; thereby saving memory, bandwidth and money.

Finally, I'm not suggesting we convert all our transparent PNGs into PNG8 format. I'm really just questioning whether the solution Pathfinder is presenting is the best solution and whether Ajaxian should be promoting it as it will no doubt lead many astray and fall into the PNG transparency trap.

Here are two very good SitePoint articles on how to make the most of PNG8 transparency in IE6:

• PNG8 - The Clear Winner
• Making ‘IE6-friendly’ PNG8 Images

Update 2008-06-17: Interesting... Transparent PNGs can even deadlock IE6! Yet another reason to avoid this kind of hackery if you can!

I have more than often had to fire-up IE6 out from the "un-loved" software repository to get kicked right back in the face with weird CSS bugs. I believe those reading this must be aware of at least one CSS quirk in the IE6 browser. For example, the PNG Alpha Transparency bug, fixed by Microsoft's proprietary AlphaImageLoader or the strangely named Peek-a-boo bug requiring a position relative on the buggy floated element. These are just two out of what must be endless lists of problems. At the top of the annoyance list though must be the IE6 Background Flicker bug. When viewing a site using background images as hover/un-hover states IE6 will re-load a fresh image every event change on that element. The effect is a brief flicker on hover. By the way, this happens locally too but it's too quick for the naked eye to notice. Firefox, Safari, Opera, Flock and probably any other browser on the planet does not have this problem! Worst still the fix is so simple, you wonder why the problem existed in the first place.To fix the IE6 Background Flicker bug use the document.execCommand method. In your CSS file add the following:

html {
  filter:expression(
    document.execCommand("BackgroundImageCache", false, true)
  );
}

Yes, it's that simple! I found this fix at Ajaxian.com. You'd probably want to implement some sort of sniffer to wrap around this fix. I used an IE conditional which serves the purpose nicely. For more solutions refer to the Ajaxian link above. Believe it or not, before finding this fix I looked into image caching, server cache control, CSS trickery and smashing the keyboard!

Lastly, apologies if anyone is offended by the title of this post. I'm venting my frustration after wasting many hours fixing perfectly valid CSS to cater for silly IE6 bugs.