The Different Techniques for Applying the PNG Hack

Chris Coyier //

Alpha-transparent PNG's, ("PNG-24" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem like a trivial thing, but it's really not. The possibilities that alpha transparency opens up for you as a designer are many. The problem, as you are likely well aware, is that Internet Explorer (IE < v7) do not support alpha transparent PNG's. The more you think about it, the sadder it gets. Luckily, there are a few methods that have arisen over the years to help us whip these older versions of IE into shape. Here is a roundup of some of those techniques.

NOTE: All of these techniques ultimately end up using the Microsoft AlphaImageLoader filter to force the transparency. The techniques just vary in HOW and WHEN that filter is applied.

 

Using the AlphaImageLoader behavior for specific CSS classes

alphaimageloader.png
Internet Explorer supports a "custom extension" to CSS in the form of a "behaviors" attribute. None of the other major browsers support this, allowing you to take advantage of browser-specificity to force this PNG hack onto only browsers that need it. This technique uses a big nasty chunk of non-validating CSS which essentially uses the AlphaImageLoader filter to force the transparency.

Remember that there are two places you could need potentially need to apply transparency: to inline graphics (<img>), and CSS background-images. With this technique, you could apply the behavior to a specific CSS class (like ".png") and then selectively apply that class where needed OR you could apply the behavior globally to all img elements.

Also note that while this will work on CSS background images, it will not work if that image is repeated or positionedin any way.

MORE ON THIS TECHNIQUE:
Komodo Media: Replacing images with background-images
SNIPPLR: Using filter for IE and an attribute selector for Mozilla

 

Behavior and Referencing an HTC file

htc-method.png
The best part about this technique is that it's a one-liner in your CSS file that references this ".htc" file, and you are done. The behavior magically applies the the necessary Microsoft proprietary crap to the needed page elements and you got yourself alpha transparent PNG's in IE.

MORE ON THIS TECHNIQUE:
Twin Helix: IE PNG Fix

 

Using Javascript

js-ail.png
Since Javascript has that magically ability to monitor and peruse all the elements on your page, it can be ideal to use for looking for any applying classes on your site. There are a couple of really compelling reasons to go this route. One, you can conditionally apply the Javascript to only load for the versions of IE that need it. Two, it's just as "set it and forget it" as the HTC method. Three, there is nothing invalid about this so you don't need to be concerned about your code or CSS not passing validation. Four, Javascript has the ability to see "new" content added to a page (think AJAX) and act accordingly. The previous techniques will only work on the initial load of the page.

MORE ON THIS TECHNIQUE:
24 Ways: Superslight
PNGHack on Google Code