How to Deal with IE 6 after Dropping Support
As announced at IE Death March, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites.
Free at last
Now that I have dropped support for IE 6, I feel liberated, free of the constraints that once enslaved my time, energy, and resources. Working on my new design, I have already saved countless hours that would have been wasted on IE 6. If you are still chained to an old copy IE 6, I highly recommend kicking it to the curb and experiencing the freedom for yourself. All it takes is a few lines of code and the decision to go there.
Turning point
For me, the decision to drop IE 6 developed gradually. Years of growing frustration, wasted time, and unsatisfactory workarounds finally reached critical mass a few weeks ago. Working on a new WordPress theme for Perishable Press, I was going with my usual strategy for browser support. Make sure the design works great in modern browsers, and also looks halfway decent (or at least recognizable) in IE 6.
As usual, after the first few hours of testing my design in Firefox, Opera, and Safari, I fired up my trusty, seven-year-old Sony Vaio laptop and opened my fledgling design in good ‘ol Internet Explorer 6.
And surprise, surprise, in IE 6 the design was a total nightmare. The CSS rendering was a joke. The layout looked like somebody had put it through a blender. The JavaScript completely failed to work. I sat for a moment, staring at the screen, asking myself if I really wanted to go another ten rounds fighting this atrocious browser. I didn’t..
New strategy
After seeing my carefully crafted design explode on IE 6, I decided then and there to kick it to the curb. As in, I’m done. No more time wasted on support for dying browsers. And you know what? Immediately after making that decision, I felt as if a tremendous burden had been lifted off my shoulders.
So to implement my new IE6 strategy, I quickly dropped a few lines of code into the <head> element of my new theme:
<!--[if !IE]><!--><link rel="stylesheet" type="text/css" media="screen" href="style.css"><!--<![endif]-->
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="style.css" /><![endif]-->These two conditional comments ensure that the stylesheet is delivered to all browsers except IE 6 and below. IE 7, 8 and beyond will receive the stylesheet, and so will every non–IE browser, such as Firefox, Opera, Safari, and so on.
This is the easiest way to ensure that your pages remain usable when viewed in Internet Explorer 6. Simply serving your default stylesheet to IE 6 may leave your content unusable, incoherent, or worse. Personally, I would rather deliver a plain (X)HTML document rather than have visitors think I was too incompetent to design a halfway decent web page.
Going further
But why stop there? After testing this method in various browsers, I realized that some sort of explanation was required for those die-hards out there still working with IE 6. I certainly don’t want the small percentage of my IE-6 visitors to think that something is broken (other than their browser!) when visiting Perishable Press and seeing the unstyled markup. Instead of that, IE-6 users will receive the following message:
ATTENTION: Perishable Press no longer supports crusty old versions of Internet Explorer. Please upgrade your browser or switch to something better, like Firefox, Opera, or Safari.
To ensure that only users of older versions of IE see the message, I once again turn to conditional comments:
<!--[if lte IE 6]><h3 style="color:red;">ATTENTION: Perishable Press no longer supports crusty old versions of Internet Explorer.<br />Please upgrade your browser or switch to something better, like Firefox, Opera, or Safari.</h3><![endif]-->With that code placed just below the <body> element on every page, the notice will be unavoidable (yet unobtrusive) to anyone using IE 6 and below. Of course, the site will remain completely usable and accessible even without the stylish interface, but users will be gently inspired to use a better browser.
Blocker script
If you are seeking a more urgent method of encouraging your IE-6 audience to “let it go,” I highly recommend Chris Coyier’s controversial IE 6 Blocker Script, which provides an less-subtle JavaScript approach for dealing with IE 6 — and be sure to read through the comment thread of the article for some great commentary, questions, and criticism.
Other scripts
Speaking of JavaScript, if you are going to drop CSS support for Internet Explorer 6, you might as well save the bandwidth and discontinue the JavaScript love as well. Although there are many great ways to enhance a plain (X)HTML page using small snippets of JavaScript, there are many situations where plainly delivered pages don’t require an entire JavaScript library such as jQuery, Prototype, or MooTools. In fact, if the JavaScript is applying CSS styles on the fly, your plainly delivered page may appear strange or altogether broken when rendered in IE 6.
For example, if you are using a slider script that dynamically applies CSS to transform the width of a division to some large value, an unwanted horizontal scrollbar will appear when viewing the CSS-less page in IE 6. There are many other examples, but I am sure you get the idea.
Thus, to prevent a JavaScript file from being delivered to IE 6 (and below), we again turn to conditional comments to accomplish the task:
<!--[if !IE]><!--><script src="javascript.js" type="text/javascript"></script><!--<![endif]-->
<!--[if gte IE 7]><script src="javascript.js" type="text/javascript"></script><![endif]-->With that, all browsers except IE 6 and below will receive the JavaScript file. The conditional-comment technique is great not just for JavaScript and CSS, but for any type of content that needs to be hidden from or targeted to any version of everyone’s favorite browser.
Let’s blow this joint
Since dropping support for Internet Explorer 6, I am one happy camper. My design efforts now stay focused on modern, standards-compliant browsers that behave — for the most part — exactly as expected. No more surprises, headaches, hacks, or time wasted dealing with ancient history. The best part is that freedom from IE 6 requires nothing more than a few lines of code and a decision to go there.
48 responses to “How to Deal with IE 6 after Dropping Support”
Hi Jeff
Actually I’ve spent a good part of the day today browsing your excellent site using IE6.
It’s eminently readable at 1024×768 without CSS, in fact I find the no-style mode preferable for information-rich sites like this.
Just remember there’s still a load of Win 2000 machines out there that can’t go IE7 (and must have IE for corp intranets and such). Their loss, I suppose.
Cheers, a really great resource here. I’ll be back often.
Jeff,
You are just doing this for your personal site right? Don’t you think designers would be taking a huge risk in losing clients by adopting this policy? Then again, think of the creativity and productivity gain by dropping IE6 support. My idea is to form a non-profit group in which all the designers in the world contribute $5 per month to pay Microsoft to take Internet Explorer off the market completely!!
Hi Michael, yes, I am dropping support for IE 6 on this site, my other personal sites, and also every site that I design via my design company, Monzilla Media. More specifically, I am no longer providing support for IE6 by default, which is to say that a client must explicitly request support for such service. This way, the only “lost” clients are the ones who aren’t willing to compensate for the extra effort. Of course, whether or not other designers decide to drop support for IE6 is completely up to them.
@Jeff: Thanks for the kind words; great to hear you enjoy the site. I am glad that the site is usable (readable) without the stylesheet. I am working on a new design for the site that will feature the same non-CSS usability as the current design. IE6 won’t be supported in terms of CSS, but all site content will be quite usable without.
Also, I hear what you are saying about the many machines out there stuck (for one reason or another) with IE6 (or worse). I think developers, designers, and users have suffered long enough — it’s time to let it go and move on. Growing can be painful, but it’s generally for the best. Besides, checking my stats just now, I see that less than 5% of my visitors are using IE6..
Thanks again for the great feedback — it is greatly appreciated! :)
I’ve felt your pain.
I’ve had it up to here with IE conditionals and star hacks.
Way to go ;)
Way to go, Jeff! Unfortunately, I must leave you to hold the banner; many of our customers use IE 6, either for personal reasons or because their IT departments won’t upgrade. Current statistics indicate that over 20% of visitors use that travesty.
Personally, having spent about 10% of today hacking our upcoming site to work in that browser, I cannot wait for the day that upgrade anxiety abates enough to drop support entirely and I only have four browsers to support. (Aside from the obvious three, if someone has made the effort of downloading Opera, they deserve a working web.)
Speaking of browsers, any opinions on Google Chrome?
As described in this article you can cause IE6 to crash easely :)
This hack still works and you can iterate any function (or object) you want in javascript just to crash IE6.
This can be an evil solution to an evil browser :)
So visitors cannot say that the site is awful since they cannot see the site :D
I checked your site in IE6 to see how it fared with this method, and was REALLY surprised to see the styles load briefly, before going away.
This is very disconcerting.
I really like this method, but is this a failure of the conditional comments??
I’d be fine doing this if the styles never loaded…but to have them load and then go away doesn’t work for me.
Well, I don’t think everything must be black or white. Supporting IE6 can be easy.
The website do not need to be identical on every browser, the content just need to be available, so I’ll not disable all my Stylesheet just cause I use 1 or 2 PNG-24. I’ll not sacrifice ergonomy & user experience cause I have 1 or 2 little incompatibilities.
For major bug (double margin bug, etc.), I’ll take the time to make it work (may take a total of 5 or 10 minutes on whole site).
I personnaly think that people who using IE6 are s***** but we need to understand that people are not familiar with computer like us.
@Jordan: Glad you asked! I embraced Google Chrome with open arms and great enthusiasm about a week or so after it first came out. I was knee-deep in my redesign project, I wanted to make sure everything looked proper in Chrome. After a few weeks of using it for various tasks, I have to say that I like it a lot, but I won’t be switching from Firefox and Safari anytime soon. For everyday surfing, Chrome is perfect — fast, and convenient (with the tab launch panel, et al); for web administration operations, I wasn’t too fond of the inline text functionality (e.g., selecting text, copying & pasting, etc.); and for web-design testing, commenting on blogs, and other moderately intensive tasks, I found Chrome to be just too buggy to be taken seriously at this point. I have JavaScript that isn’t working in Chrome, and there are serious display bugs in (X)HTML
textareas: text will disappear, overlap, and worse while trying to leave a comment, for example. Bottom line: the first version of Chrome is very good, but not consistent enough for full-time web use. After a few improvements, however, Chrome will be a serious contender.@H5N1: not a bad idea, really.. ;)
Just wanted to say: Right on Jeff! I’m probably going to initiate the same change on the sites I can get away with it for… IE6 has run it’s race… time to put that nag to pasture : )