IE6 Support: A Realistic Approach
By Joshua on September 01 2009
Does your code support IE6?
With the news that Digg, YouTube, and other social media sites are beginning to drop support for IE6, there has been a flood of articles discussing whether web designers should stop supporting it as well. Unfortunately, neither "full IE6 support" nor "no IE6 support" are practical solutions for most of us.
Let's face it, unless your site is skewed toward a tech-savvy audience, IE6 still makes up a decent percentage of your traffic. On the other hand, taking the time to code for IE6's idiosyncrasies can be annoying and expensive.
The solution? Dean Edwards' IE7/IE8 scripts.
These files use Javascript to plug deficiencies in IE6. Want to use :last-child? Just include the javascript reference in your header. (Using conditional comments to make sure that only the appropriate version of IE downloads the script.)
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->As a bonus, if you want to upgrade IE7's capabilities to equal IE8, you can do that too.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->This solution may not work for everyone. Still, offering Javascript-based support for an outdated browser seems like a better solution than either wasting time with full IE6 support on every project or offering no IE6 support at all.
Is this something you'd consider implementing on your site(s)?
What our readers said
It’s something we’ve considered, but ultimately decided to forego a set of generic scripts to implement all CSS functionality. In my experience, it’s just not needed for most designs. The worst I have to contend with are generally margin and text spacing, which are easily fixable by targeted conditional comments linking IE6 and IE7-specific stylesheets.
Also, something about correcting layouts with client-side scripts bothers me.
However, I think if you’re looking for an easier solution than constant tweaking, and you have a large number of sites with some really fancy CSS, it would be worth consideration.
Hey Michael,
I definitely understand where you’re coming from. If you’re using pretty straightforward CSS, it may not take much time at all to patch things up for IE6 using conditional comments.
In my case, I tend to use more advanced CSS selectors like :nth-child(), etc. And making sure that there is a working alternative in IE6 can be quite time consuming (depending on the project).
I share your aversion to script overuse, but for me the choice was to use a script or drop IE6 from my normal support level. For clients who really need full IE6 support, of course, the script clearly isn’t adequate.
I used to use that all the time but i found any sites that I had built with some jQuery stuff happening on page load would be so slow when they had to contend with these scripts as well. Remember, IE6 also has the worst and slowest JS engine.
Although I do like the idea of punishing IE6 users with a slow site, I prefer to punish them by having :nth-child() be ignored than have the site load super slow.
For me, it’s not so much the CSS anomalies as much as it is the lack of png support. It’s nice to have the ability to use transparencies in complex designs.
@Andrew: That’s a good thing to keep in mind. I haven’t tried combining these scripts with jQuery yet, but I’m sure it will come up in the future.
@Michael: Yes, PNG support is definitely a big issue. Edwards’ scripts adds transparency to PNGs in IE6, but it is still missing a couple of CSS rules like background-position if you choose to use them.
I always code my CSS keeping IE6 and Mozilla in mind, and the final result is always the same on each browser. The only issue that needs separate approach is PNG with transparent bg, but that is a simple task to handle. Why drop IE6 compliance if you you can just write smart CSS?
I gave the Dean Edwards’ IE7/IE8 script a try on one of our recent projects (Green Bin Ottawa – http://www.greenbinottawa.ca) but soon found the annoyances outweighed the positives. The main thing is that the “IE6 fix” doesn’t kick in until the page is loaded and so there is a very definite and visible shifting of the DOM in IE6 once the JavaScript functionality has kicked in.
As for the PNG support; not that great in my opinion. There are other scripts out there – DD_belatedPNG – that do a better job and allow for greater customization.
@Mike Badgley: Thanks for pointing that out, especially the page loading. For some websites that might be fine, but it’s good to be aware of potential issues.
By the way, what’s up with all the Michaels commenting on this post? (My middle name is Michael as well. Sympathetic vibrations?)