Working around IE

Like any web developer, I have a hate-hate relationship with Microsoft’s Internet Explorer (IE). In my case, it goes all the way back to IE3 in the 1990s.

And things haven’t gotten (much) better since those times: IE always seems to be behind the curve in adopting standards. With the rise of Firefox, this really became pronounced.

The latest issue – for me – has to do with the work I’ve been doing with CSS3. There are a lot of new functionalities in CSS3, but – of course – IE doesn’t support same (Note: I’m on IE 8, I think IE 9 begins some support of CSS3 – but virtually everyone is on v7 or v8!).

There are two functionalities that CSS3 adds that are really huge, and of course IE doesn’t support: Drop shadows (I still don’t like the implementation) and rounded corners (no more rounded-corner GIFs – yay!).

So last week I started poking around for a work-around for these functionalities on IE, and I ran across the CSS3 PIE site. PIE stands for “progressive internet explorer.” The curator of the site – it appears to be one developer, Jason Johnston – has an .htc file that has Javascript goodness that will emulate some CSS3 functionality on IE. Hmm!

I downloaded the file, and while I couldn’t get it to work via an .htaccess file (weird…), I was able to use the PHP work-around. Here’s the test page, which intentionally goes overboard on CSS rounding/shadowing.

Works in IE, Firefox and Chrome on a Windoze box, as well as Firefox and Safari on a Mac. I didn’t test IE on a Mac because, well, I don’t care. If you’re running IE on a Mac, I really don’t care if my sites look as pretty as they could be…

I still want to get the .htc file working correctly with the server file – the PHP work-around could present issues, because it sets a content type for the .htc file in a header call. This blew up things for me until I stopped echoing out debug statements until hitting the actually HTML. But I image this could cause issues with sessions and header redirects.

But that’s the next step. For now, my IE pages can look pretty, for at least some of CSS3’s features. Progress.