JavaScript - - By Simon Willison

Fixing IE

Anyone who has experimented with CSS driven, standards compliant design techniques will know that the greatest challenges are posed by the most widely used browser: Internet Explorer for Windows. With it’s dodgy box model, missing support for CSS2 selectors and absent core properties such as min-width and max-width many intelligent CSS techniques just aren’t worth using.

This is a well documented problem. Attempts in the past have been made to remedy some of IE’s weaknesses, usually revolving around using Javascript to replicate some of the missing features. Dave Shea collated some of these in his recent piece on side-stepping IE; key examples include max-width support using expression: and whatever:hover for adding :hover support to non-link elements.

These are valuable tools, but wouldn’t it be nice if there was a single solution that brought IE up to the standard of other modern browsers? Thanks to Dean Edwards, there is: IE 7, a cheekily titled package of IE bug fixes that covers missing CSS2 selectors, min/max width and height properties and even adds support for the HTML element. It’s implemented as a single 28KB CSS file which can be linked in at the top of any page.

It’s hard to say if the implementation method is a gnarly hack, a stroke of genius or a combination of the two. Dean’s notes on how it all works are certainly worth checking over. Of course, with even the compressed package weighing in at 27 KB the size to functionality trade-off certainly needs careful consideration, although a properly configured web server should result in the magic stylesheet being loaded once and cached for future page visits.

At any rate, something like this is long overdue.