IE6 PNG Transparency

In the world of interface design, the ability to have transparency in your graphical elements is extremely useful from a reusability standpoint. Rather than having to have one logo for every color scheme it might show up on, we simply make the background color of that logo transparent. In the old days, this was often achieved through GIFs which used binary transparency to designate a “dummy” color of the image as being transparent. In this way, transparency was either “on” or “off,” with no levels of opacity in between. This worked great for logos, sprites, line art, and the like, but for images that wanted to have a soft shadow or similar aesthetic, this left jagged and apparent boundaries where transparency stopped and began.

Enter the PNG file format. Instead of have transparency that was in one state or the other, it has one entire channel added to the traditional three (RGB) called an alpha channel. Just like the color channels, it supports 256 steps of transparency. PNG has all but replaced the GIF as the preeminent image format for graphics that have a small color palette.

Okay, so enough history lessons. It’s well-known that IE6 and 5.5  (God forbid you need to support the latter) do not support PNG transparency out-of-the-box. The solution lay in the form of an IE proprietary Active X filter.  Essentially, any image element with this filter gets another image specified in the style rule overlaid on top of it. Here’s the filter to be used in a stylesheet or inline:

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
        width: 100px; /*width must be specified*/
        height: 100px; /*height must be specified*/
}

There are a number of issues, however. It isn’t enough just to apply the CSS to all PNG images on your page with the rule, because part of the rule requires that you specify what picture is to be overlaid on top of the image that is already there. So all of your images actually have to start out as 1×1 (or some other arbitrary dimensioned) transparent GIFs. Furthermore, the style is only recognized by IE and will be ignored by other browsers, and thus does not validate.

So we’re going to want to eliminate the solution’s application in all browsers except for IE6 and 5.5.  This can be done a number of ways. If you are limited to the client-side, you can use JavaScript to detect then browser, and if it is one of the offenders, go through your document and replace all images of a particular class (or other appropriate criteria) with the aforementioned transparent GIF placeholder and then apply the filter inline with the image’s original src attribute. You must also temporarily record the height and the width of the image you wish to be displayed before it is replaced with the placeholder and explicitly declare them in the style after the swap has been done, since the browser will now measure its width and height as 1×1 (or whatever your placeholder is).

A similar process can be done with server-side technology like PHP or ASP/.net. This is the preferred method, as it allows users who have JavaScript disabled to get the same experience as those who do not since the decision for what markup to generate is done before the page even reaches the browser. The methodology is almost identical conceptually to the client-side approach. In your script where you are generating the markup for your images in question, do a browser check, and then change the markup so the path to the image now appears in the filter style and the path to the placeholder appears in the src attribute. Again, you will need to be able to ascertain the width and height of the image and declare it explicitly.

Package up either approach into a tidy method to be called on images at will, and you are good to go. What’s that you say, you want a pure CSS solution? Unfortunately, there isn’t really an elegant one. It is possible to use IE conditionals to load a specific style sheet that has the fix, but every image that needs it will have to be specified by an ID and have its dimensions manually recorded in each style rule — not exactly robust or easy to maintain. Furthermore, in every browser but IE all that will be present is just the placeholder GIF since only IE understands the filter property.

In summary, on the client-side with JavaScript or on the server with your scripting language of choice:

  • Determine if the browser is IE 6.0 or 5.5
  • Replace all problematic PNGs with a 1×1 transparent placeholder GIF
  • Apply the ActiveX  filter with the original PNG graphic’s path as a style
  • Explicitly compute/ascertain and declare the width and height of the PNG graphic in a style

That’s it. Though the tutorial doesn’t address concerns like PNG transparency in background images, hopefully the concise nature of it will provide those looking for the typical-case solution to one of the most common compatibility issues a quick  and painless fix.

Advertisements

~ by Dux on January 13, 2011.

 
%d bloggers like this: