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.
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.
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.
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.
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.
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.