It’s a long-held belief that the folks at Microsoft really don’t have the slightest idea what people want from a Browser.  Issues like CSS incompatibility, javascript incompatibilities, DOM problems, and PNG behavior have been problems for as long as I can remember.  Microsoft has repeatedly said that “people don’t care about that stuff” and gone on to develop other features that people don’t want like VBScript and ActiveX.  Even IE7 suffers from most of those problems, but is getting better bit by bit.

In my day-to-day use, the one that most commonly bites me is the PNG Transparency problem.  Like GIF, PNG supports a transparency channel so that you can have regions of an image “see-through”.  Unlike GIF, however, PNG supports a full 8-bit transparency so that you can semi-transparent regions rather than just binary transparency.  This lets you do alot of really nice effects, as well as use Antialiasing and feathering to make your images smoother.  Unfortunately, IE doesn’t support this and always places PNG’s on a solid-color background.  This makes them pretty much useless for web use unless you’re designing exclusively for FireFox, Opera and Safari.

In some work this week, tho, I found an incredible little snippet of code that actually fixes PNG Transparency in IE. That’s right, it fixes it.  It seems that in IE5.5 they added a (custom, of course) stylesheet tag for “behaviors” where you can write code to change how things behave.  I think it was meant to allow a means of embed-ing code (via “htc” files) into CSS, so you can have code attached to CSS tags instead of HTML tags.  It’s a neat idea but I’ve never seen it in use, until today.  On the WebFX Website they have an example for PNG Behavior that re-enables the expected transparency with some clever code.  It’s a fantastic hack, just drop the blank.gif and pngbehavior.htc on the server and 1 line of CSS and viola, PNG’s work on that page.

It’s as simple as adding the following to every page:

<style type="text/css">img {   behavior: url("pngbehavior.htc");}</style>

I’m using it on the stuff I’m developing now, and it makes things so much easier. 
[tag:explorer][tag:ie][tag:png][tag:code][tag:html][tag:browser]

Be Sociable, Share!