The best IE6 PNG fix

Because we have put Internet Explorer 6 support as an individual part on quotations for quite some time now, a lot of our clients choose not to support this browser for their new website or webshop. This means that we finally got rid of all the problems that developing for this browser entails, but I can remember times this was different. However, I have always wondered: why of the many different fixes for displaying transparency in PNG's, the best among them never really made it to the general public. In this post I want to have a look at DD_belatedPNG and the substantial differences with other IE6 PNG fixes.

The IE6 PNG fixes we all know

If you have been around here for a while, you probably know all these fixes below.

IE PNG Fix - Angus Turnbull (Twinhelix)
http://www.twinhelix.com/css/iepngfix/

Unknow (view the page and you'll recognize it)
http://homepage.ntlworld.com/bobosola/

24 Ways - Drew McLennan (ds-sleight.js)
http://24ways.org/2007/supersleight-transparent-png-in-ie6

PNG Behavior - Erik Arvidsson (the .htc way)
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

How they work

So many flavors, so little to choose from. Although there are these different PNG fixes (and a dozen more), each with their own small differences and own way-to-implement, they all do the exact same thing. They use the proprietary (Microsofts' crazy own) filter called AlphaImageLoader and apply it some way or another to your images or, via CSS to your background images. When this filter is applied to an element on the page, it draws a new rendering surface in the same space that element occupies and loads the PNG into it. This goes exactly the way you probably thought of when reading this explanation: slow. Besides that, AlphaImageLoader does simply not support background-position and background-repeat .

Why DD_belatedPNG is different

Drew Dillers DD_belatedPNG uses VML fill elements for displaying PNG's, instead of Microsofts' AlphaImageLoader. VML (Vector Markup Language) is an open and standards-based XML language normally used to produce vector graphics. Somehow, rendering PNG's in VML fill elements displays PNG transparency correctly. Not only is converting elements on your page to VML elements no big of a deal performance-wise (its actually really, really fast), also all CSS background property's like background-position and background-repeat keep working like they should.

How to use DD_belatedPNG

Using DD_belatedPNG is pretty straightforward, Drew did an excellent job on creating an easy-to-use javascript implementation.

1. Download DD_belatedPNG.js

2. Include DD_belatedPNG.js in your document. Of course, you'll want to wrap it between IE6 conditional comments.

3. In another script node, initialize it and define the elements on which you want to apply the filter. How more specific you'll be - use can use regular css2 selectors - how faster it will load. The fix will work on both img's and elements having a png background image through CSS.

Examples

Please view Drew Dillers' website to view some examples of DD_belatedPNG in action and additional information. You probably want to start up your virtual machine running IE6 before you do. If you will use this fix in the future, give the guy some credit and make a small donation!