PNG Alpha Transparency

There are tons of pages that extol the virtues of the Portable Networks Graphic (.png) image file format. The png format has been around for a long time and offers some superb capabilities, including alpha channel transparency. What does that mean? That means that a given pixel can be partially transparent, or translucent to be more specific. So why, you might ask, has the png format not gained wider acceptance? The answer is simple. We can blame Bill Gates. Okay, just kidding about that. The actual problem is that Microsoft Internet Explorer for the Windows platform has never supported PNG alpha channel transparency, at least not until recently with version 7.

IE Support for PNG

The popular saying is that IE doesn't support PNG alpha channel. Well, that's not entirely true. IE, prior to version 7, did not natively support png alpha channel. Versions 5.5 and 6 can support it using the MS proprietary CSS filter property to call another MS proprietary AlphaImageLoader function. Even that is not without its challenges. First, let's take a quick look at how to implement this and still maintain valid code. We can do that using another MS proprietary technology called Conditional Comments. You can read more about conditional comments on the MS web site. Conditional comments give us a mechanism to feed specific code to specific versions of Internet Explorer on Windows machines. To any other browser or HTML validator, they are simply comments in the code and are entirely ignored.

So now we come to the actual implementation. For this example, we'll be using .png images as backgrounds. We start by creating a .png image that is translucent. We set that as the background of an object. For modern browsers, that's all we need to do. However, if you view the page in IE, you'll see that it just doesn't work. If you look at that "doesn't work" page in a modern browser, the text portion will show as translucent, allowing some of the background to show through. If you look at it in IE/Windows, it will be completely opaque and not show any of the background behind the text.

So we'll use the AlphaImageLoader. On the surface, it's simple enough. We feed IE an additional style sheet that includes a couple of rules that look like this:

h2 {
   background: none;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='images/black.png',sizingMethod='scale');
   width: 100%;
}
div {
   background: none;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='images/white.png',sizingMethod='scale');
}

The conditional comment in our .html page that links the above style sheet for IE, looks like this:

<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie1.css" type="text/css" media="screen">
<![endif]--> 

The above tells IE 5 and 6 to load the style sheet. IE7 handles .png alpha channel without having to jump through these hoops, so we just let it use the same style sheet as other browsers. Now, if you look at this page, with the additional style sheet, (note: you'll need to use your browser's Back button to get back here) it works in IE.

Another Gotcha

Now, if you did more than take a quick look at the page, you may have noticed a problem. The cursor doesn't allow you to click the links on the page. That's why there was a warning about using your Back button. You can select the text, in spite of the cursor never turning into the text selection cursor, but the links just don't work at all. Here's how we get around that. We add one more rule to our IE style sheet:

div * {
   position: relative;
}

Finally, we have a working page that correctly displays in modern browsers as well as IE5.5 and IE6. The text selection cursor correctly appears and the links work just fine.

One Last Thing

There is just one remaining problem and that is IE5.0. While you may not care about supporting such an ancient browser and I wouldn't either if it degraded reasonably. The fact is that it doesn't. The background of the <div> and <h2> tags becomes completely transparent and that makes it nearly impossible to read the text. I know that IE5.0 is a very rare browser now, but it's a simple matter to make the page at least usable.

I promise, this is our last IE work around. We add one more conditional comment to the page. This conditional comment sets the background of the <div> to white and the <h2> to black. The conditional comment looks like this and goes right after the previous conditional comment:

<!--[if IE 5.0]>
<style type="text/css">
   div{background:white}
   h2{background:black}
</style>
<![endif]-->

While IE5.0 won't see the attractive translucency, it now degrades gracefully and, thereby, makes the page at least usable for those using IE5. Here is the completed page that works. You can view the source code to see the html code. There are two style sheets: a style sheet for normal browsers and another to fix the IE problems.

Limitations

One small limitation still exists. Remember how we used position: relative to get the links to work? Okay, that won't work in a case where you cannot put block level tags inside the object. For example, the cursor doesn't turn into a text selection cursor when you place it over the heading inside the <h2> tag. You would not be able to put a link inside that <h2> tag and get it to work. Personally, I don't think that's a major issue, but you need to be aware of the limitation.

Conclusion

So there you have it. PNG alpha channel support in Internet Explorer. Have fun with it!