Internet Explorer 7 has me excited. Why? It isn’t the shiny new UI which has folks asking, “where did my buttons go?” It is the PNG Support! No longer will I have to litter my CSS with IE hacks to get them working. I know CSS well enough to avoid the usual Internet Explorer pitfalls, but I still have * html … for PNGs.

I’m wondering when it will be ok to drop the PNG hack entirely and tell people if they want to see the sites, upgrade to Internet Explorer 7 (or firefox). As I have still received complaints that sites don’t look good on Internet Explorer 5.5 on a Mac, it will probably be awhile.

For those who don’t know the hack it looks a little like this:

div#mask {
background: url(images/mask.png) top left no-repeat;
}

/* FOR IE 5.5+ ALPHA TRANSPARENCY */
* html div#mask {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/mask.png”, sizingMethod=”crop”);
}

As one can see, assigning the background to none and pulling in the automagically gets png transparency working in IE. The first div is how it should be, the second div is how it is. For the sizingMethod, one can use crop or scale. Scale is for repeating backgrounds, but instead of repeating, it stretches. So this only works for some sites, not all.

Good luck and may the future bring us more web standards.

Popularity: 10% [?]