How to Deal with IE 6 after Dropping Support

Jeff M – #1

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.

Michael V. – #2

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

Jeff M – #5

I’ve felt your pain.

I’ve had it up to here with IE conditionals and star hacks.

Way to go ;)

Jordan Gray – #6

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?

H5N1 – #7

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

Jeff L – #8

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.

Mathieu Beausoleil – #9

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.

Trav – #12

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 : )

Louis – #16

I don’t think the conditionnal comments technic is the best approch here. You are making everyone — including people with up-to-date browsers — download the IE6 adressed HTML.

It’s not deadly to make a Firefox user download 4 lines that he won’t use, but when it comes to SEO, I wouldn’t recommend to have each and every of your pages contain content that is not displayed.

Though, your idea of “no stylesheet at all” is nice. I would keep this part, but would place the warning message using a server-side detection (i.e. using PHP or Apache).

—

On a more personnal side now: I’ve moved to my own student flat this year, and I’ve been without internet there for quite a while now. It should be fixed this week, as I’ve ordered a box from my favorite provider, but for now, I can only read PP when I’m at my father’s.

Jeff my friend, I miss to read you regularly :(

Louis – #18

Server-side detection isn’t foolproof, and also requires additional server resources for every page.

Well, that’s basically the dilemma here: work a little more on the server side and serve the clients tailored pages, or be lazy and drop them large-size clothes, and let them deal with it.

As for SEO, Google and the big others obviously are able to detect hidden text — hidden by CSS, conditionnal comment, or whatever — so it’s more for the sake of it for me.

I mean, we all love to have <title> tags that precisely and uniquely describe the nature of each page. It also serves SEO, but it’s nice to know we have chosen them wisely.

The same thing apply to the content: it feels nice to know that a page doesn’t contain content that has no reason at all to be delivered.

—

The techical work to do things well is pretty simple also. If you serve static content — and on a site full of ressources like PP, you definitely should — you would just descriminate the browsers at the Apache level, and serve a IE6 tailored page, or a “modern browsers” tailored page.

If you calculate your page with each request, you can simply add a PHP condition around the stylesheet and the warning.

Aaaah, I can’t wait to have internet up and running at my new home!

SneakyWho_am_i – #19

I don’t do web design for a job, but I am in every spare second writing code, expanding my skills, and just basically trying to learn and create as much as I can.

I’m rarely, if ever, surprised at how my recent pages look in Opera or Safari - in fact I often don’t bother to test. Sometimes I look in IE6 as a joke. When it looks good, I’m surprised. IE7 does a bit better, even though it’s getting pretty old now. IE8 does even better as long as there’s no javascript (mine’s normally unobtrusive anyway)

I suck, I’m an amateur. But I am getting more professional faster and faster since I stopped writing code for IE6.

Remember I’m not paid for it, I’m doing it for kicks.

But.. I’m so upset with IE since stopped writing code for it last year, that as a rule of thumb, I won’t even give code to someone if I think they’re going to test it, look at it, edit it, or roll it up and smoke it with Internet Explorer.

I know ONE person who uses IE6. I’m telling him every day to get off it. If he doesn’t, I seriously don’t think I can be his friend any more.

I laughed when I wrote this. It all sounds quite funny, I’m sure - but I’m dead serious, even while laughing about it just now. See, told you web design was fun.

H5N1 – #21

@Louis and Jeff:
The pros and cons of conditional comments.

As Louis said it could seem illogical to force people with updated browser downloading 4 more lines of code.
Yes, it COULD seem.
But think about coding in general.
How we do our best? How we learn?
How we improve our skills?

Yes we do it all by good teachers, by communications, by meeting people and disussing about our works.

But even with COPYNG (call it “inspiration”).

When I see a SOURCE CODE of a page I can find wich solution the author used to solve some issue.

I like it.

If the solution is applied by server side application I have to open the page with several browser to see the code-differences.

Server-side solutions are fastest, nicer and logically better but client-side solution are more “visible”.

Why worry about some few bytes more when someone doesn’t care build up heavy-weight-flashsites?

Louis – #22

@H5N1: because some of us are perfectionists :)

Louis – #23

@Jeff: I tend to thing that bandwidth is more valuable than server ressources these days. Server-side calculations — and browser recognition is quite nothing — are a lot more cheap in terms of performances than having to send the user additionnal bytes to ensure that the display is correct.

If I extend your philosophy, a website viewed on a mobile device may have the same source code as the website viewed on a classic browser, but with some additionnal code (CSS/JS) to ensure that it displays correctly on the smaller screen.

I still think that the server is the right actor for browser discrimination; sending tailored content to each browser.

Louis – #25

My very bad, I didn’t know that server-side detection was unprecise. I have never used it in fact, so I’m very sad to learn that real world implementation is not usable :(

Thank you for making this clear. What I meant by perfectionnist is that I wouldn’t sleep so well at night if I knew there were “hidden” elements in my pages that target IE users only.

Still, I think bandwith is more important than server ressources. Not for the cost factor, but for the “ethics” of it. Overloading (the word is a little bit too much for our case, but in general) the tubes is a very bad practice. There was some discussion recently on my favourite performance oriented french weblog about the preloading techniques used on streaming websites like Youtube. On average, a Youtube user watch only the first 10 seconds or so, but the website preload the whole video everytime. Some other service even preload it on page loading. All this data parasites the web tubes.

Of course, this argument is a little extreme when speaking of two lines of conditionnal comments… but hey, it’s for the principle :D

malcolm coles – #27

I’m not sure many sites could drop IE6 support altogether. I was looking at a commercial one the other day that had 75% IE users, of which 1/3 were IE6 - so that’s still 25% of their users.

Mark – #29

Hey there,

TRUST ME. I’d do ANYTHING to give up ALL support for IE. (Even to the extent of applying code that makes IE6 and below crash :D )

Quick question, could you please explain how the code works?

<!--[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]-->

I do understand the first part - the not IE part. Downlevel-revealed.
But the second part, the gte IE 7 is downlevel-hidden. How does it deliver the stylesheet to IE 7 and above then?

I might have missed something trivial. :)

Thanks

Jordan Gray – #30

gte IE 7 = “greater than or equal to IE version 7,” I believe.

Does that help? :)

Jordan Gray – #31

(What is it with me and typos writing simple tags?)

[ - fixed! ;) ]

Mark – #32

Actually I do understand the meaning of gte IE 7 per se. What I don’t understand is the use of a downlevel-hidden conditional for it.

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

Will this not mean that the expression above will actually be hidden (instead of shown) in IE versions 7 and above?

Sorry for the inconvenience, but please clarify. I’m confused like nuts. :D

Jordan Gray – #34

Ah, right! I see. Your confusion is well-placed; basically—as Jeff’s article explains—the word “downlevel” doesn’t actually mean what it sounds like it should mean!

Simply, when Microsoft use the word “downlevel,” they’re not referring to versions of Internet Explorer, but to other browsers. If it’s “downlevel-hidden,” other browsers (e.g. Firefox, Safari) can’t see the content; if it’s “downlevel-revealed,” they can.

The first time I read about conditional comments, I actually threw a quiet fit at the arrogance of it. This was back when IE 7 wasn’t even in beta, and I was a web neophyte who regularly spent 20% of my development time struggling to make Microsoft’s “latest” (i.e. five-year-old) browser display my pages correctly. Calling a measurably superior browser in active development “downlevel” when their own software was holding web development hostage seemed positively perverse!

Jordan Gray – #35

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. I hope you don’t feel I was misleading you, it’s just that I’m getting a little too accustomed to making vast (but helpful) simplifications for my higher-ups!

PPS: Thanks for fixing my XHTML dyslexia, Jeff!

Mark – #36

Ah right. I’m getting a grasp of it now.

Firstly, for IE, DCC’s are supported only in IE gte 5.
Hidden DCC’s (the one without <!-->) are forever hidden in browsers other than IE.
Hidden DCC’s only display (in IE) when [if condition] is true.
Revealed DCC’s display in all browsers unless the [if condition] is false. (?)

Got it. That explains. But it will surely need refreshing when I get back to it. :D

***

So the revealed and hidden pertain to other,i.e. that is, “downlevel” browsers, huh. Nice name there Microsoft.

***

I do web design sort of as a hobby only :( so that makes me mediocrely proficient in HTML and CSS. Although I can work around designing for Wordpress given that I’ve got Sandbox or Starkers or Whiteboard to start with, but not from scratch.

Nevertheless, I understand the IE plight. And I’m part of it. When I see my work in IE with the inexplicable distortions it’s done to it, I stare blankly.

I have yet to learn how to program fixes for IE, but I guess by that time the design community will have completely abandoned consideration for IE6 and below. So maybe I’d rather not, as Jeff said.

Thanks guys! Appreciate it.

Mark – #37

Sorry, markup error there:

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

[ - Fixed! :) ]

Mark – #38

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.

Jordan Gray – #39

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!)

Mark – #40

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.

Mark – #42

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

Thanks, Jeff!

Nicolas Hoizey – #43

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?

Azad – #45

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

Josh – #46

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>

Davis@chicago web company – #48

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.