Latest TweetsHeads up: Blasty (DMCA service) MIA: perishablepress.com/avoid-blas…
Perishable Press

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

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
48 responses
  1. Sorry, markup error there:

    Hidden DCC’s, the one without <!-->

    [ – Fixed! :) ]

  2. PS: in fairness, I should explain that Microsoft were probably thinking mainly of the very old versions of IE (four and below) when they started using the terminology; to be strictly accurate, I should say that “downlevel” is equivalent to “doesn’t support IE conditional comments.” However, since IE < 4 can be effectively dismissed by nearly all web developers, whether or not a comment is downlevel-hidden or -revealed is primarily of concern to non-IE browsers.

    You didn’t mislead me at all. That is true, indeed. As you said in the aspect of DCC support, as we consider IE lte 4 obsolete, the downlevel comment’s being hidden/revealed inadvertently now affects non-IE browsers.

    Doesn’t change my __abounding love__ for IE as a small web designer.

  3. Jordan Gray January 3, 2009 @ 7:52 pm

    Don’t worry, Mark, we’ve all been there! :) You seem to get it now, and CCs are a fairly advanced topic–so if this is your first time hearing about them, my compliments to you for picking the concept up so readily. To summarise:

    – Downlevel-hidden don’t display in any browsers except for IE after version five, and then only if they meet the specified condition.

    – Downlevel-revealed are the same as downlevel-hidden, except that they are always displayed in non-IE browsers and versions of IE below five.

    (I’d have used an actual list, but that’s hardly “simple XHTML,” at least in the context of a blog comment form!)

  4. Just an aside:

    Personally dropping support for IE6 and voicing out IE6 concerns with respect to clients (i.e. charging extra for IE6 compatibility, as Elliot Jay Stocks has sworn to do) is probably one of the little ways professional designers can break through the design-sphere and make the IE plague known to a wider audience: to people who are just surfing the web or paying designers to do the work.

    After all, though the hatred for the browser may saturate the design community, the customers and regular people are the ones that maneuver the market share. They’re the majority, and they (as was established) are still sticking to the forsaken browser.

  5. Jeff Starr

    Well said, Mark! Here is some news that I find greatly encouraging! (Now, if we could only get Microsoft to share the sentiment!;)

    404 link removed: (Google tells users to drop IE6) http://www.tgdaily.com/content/view/40785/140/

  6. There we go! That’s the way to do it!

    Thanks, Jeff!

  7. Nicolas Hoizey March 18, 2009 @ 11:43 pm

    In your first example, why don’t you only one comment:

    <!--[if gte IE 7]><!-->
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <!--<![endif]-->

    Isn’t it enough to show the CSS for everyone except IE6 and less?

  8. Jeff Starr

    @Nicolas Hoizey: Good thinking, but it won’t validate. When excluding anything other than all IE ( !IE ) for either HTML or XHTML, additional markup is required for validation. This additional markup can get pretty ugly, so I use the extra conditional comment instead. See my article on Downlevel Conditional Comments for more information.

  9. Well done. I dropped support when I designed my blog. Best decision I ever made.

  10. Hi jeff,

    After reading this I began experimenting with DCC syntax and arrived at the same syntax suggested by Nicolas. I tested it using all major browsers as well as IETester for several older versions of IE. In all tests it produced the preferred results (green text in all browsers except IE Pre-7, and no stray characters), and as you can see by pasting my demo HTML into the W3C Markup Validator, it is said to be valid.

    Are you suggesting that there is a reason this is invalid even though the W3C passes it, or perhaps the W3C has since changed the validator for this case?

    My syntax for “dropping IE 6 support” without duplication is:

    <!--[if gte IE 7]><!-->
    ...
    <!--<![endif]-->

    Here is my simple demo page in XHTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
           <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Demo</title>
                  <!--[if gte IE 7]><!-->
                         <style type="text/css">
                                <!--
                                       .demo-font { color:green; }
                                -->
                         </style>
                  <!--<![endif]-->
           </head>
           <body>
                  <p class="demo-font"><strong>test</strong></p>
           </body>
    </html>

  11. Jeff Starr

    Hi Josh, yes that definitely seems to work.. My original thinking was based on this article:

    http://www.webdevout.net/css-hacks#conditional_comments

    The logic in that article is also discussed in other online resources; however, it looks like your suggested method is also prevalent on the Web, and seems to be a simpler — and equally valid — way of accomplishing the same thing. Either method will work, but the approach you are using is much more elegant.

    Thanks for sharing — I am looking forward to testing this during my next implementation of the technique.

  12. Davis@chicago web company April 12, 2010 @ 10:58 pm

    Well your post covers most of the issues of IE6 but I guess now its no longer the issue as we have the option of downloading the IE8. Thanks anyways.

[ Comments are closed for this post ]