After this many years, most web developers have become a little numb to how much Microsoft Internet Explorer is holding back the web. We whine about it, we drop by Position Is Everything to find the appropriate hack to use, and we go about our business. Recently, working on SparkWeb has really brought the issue back into focus for me.
Shortly before SparkWeb 1.0 came out, we realized that it wasn’t working in Internet Explorer 7… sometimes. There was no discernible pattern to the failures; some were on XP, some on Vista, some were one sub-version of 7, some were another. After a great deal of painstaking debugging I eventually tracked down the problem. XML support (and by extension the XMLHTTPRequest feature used in “ajax”) in Internet Explorer is provided by a system library, rather than built directly into the application. This wouldn’t be too bad, except different versions are installed on different systems. Currently MSXML3 and 6 are the best choices. 3 is incredibly widely deployed, and 6 is the latest and greatest. We chose 6… IE7 chose 3. Boom.
!http://www.igniterealtime.org/blog/wp-content/uploads/2007/05/camembert.png!
That issue is fixed now, but it reminded me again of just what we’re missing. Here’s a brief list of stuff that works in the big 3 (Mozilla, Safari, Opera), but not in IE6, and in many cases not in IE7:
-
position: fixed
Useful for making navigation bars and such always available so users don’t have to scroll back up to them. Also allows for things like Eric Meyer’s beautiful ComplexSpiral design. This is fixed in IE7. -
border-radius
Part of the in-progress CSS3 specification, but still pretty well supported these days. It allows for painless rounded corners, without the crazy hacks we use now. -
XHTML
I’m slightly skeptical of the usefulness of this one, but it’s a pretty big deal to some people. IE will not accept XHTML unless it’s told that it’s HTML instead of XML. This leads to pages that have subtle hard-to-find bugs when switched over to real XML parsing. -
XMLHTTPRequest
This one “works” in IE6, but only through ActiveX. If the user has ActiveX disabled (say, for security reasons, as Microsoft did in IE7) then it will stop working. This is fixed in IE7. -
CSS child selectors
Generally useful in all sorts of layouts -
Translucent PNG images
Again, hugely useful. There’s a hack to allow them in IE6, but it can break a bunch of other things… as we found out when trying to use it in SparkWeb. Even in IE7 there are a number of nasty bugs involving this functionality. -
:hover on anything other than links
Useful for popup menus, button hover effects, tooltips, and any number of other things. This is fixed in IE7. -
Modifying stylesheets via javascript
Basically every major browser gets this one wrong in some ways. I’ve found it’s best to just forget that the possibility exists and use inline styles instead. -
SVG and canvas
These are the shiny new ways of making complex images and animations on the web. Canvas is a simple javascript-driven system for drawing, and SVG is a complex vector image format based on XML that also supports animation and a number of other things.
This is just a selection of major issues, there are many many smaller issues, many issues that have slipped my mind, and many places where IE isn’t the only browser messing up. Microsoft claims that they will be making a big push to catch up on compliance with modern web standards in Internet Explorer 8. Even if that’s true though, the legacy of stagnation from five years of IE6 will be difficult and time consuming to overcome.
However, there is some hope; People like Dean Edwards, Jack Slocum, the Prototype team, and many others are building libraries to work around browser issues and provide a common platform to build web applications on. Also, the newly re-formed HTML working group is pushing forward towards HTML5 with some wonderful people involved, including key participants from Apple, Google, Opera, Microsoft, and Mozilla. Unlike previous web standards efforts, the HTML process is open to anyone who’s interested. Ian Hickson has instructions on joining the process here