Techniques to use when IE6 dies

Everyone except Microsoft themselves are talking about the death of IE6. I’ve tried motivating people to drop support, arguing that you at least can show IE6 users a message. Many have replied with “but our IT department doesn’t let us…”, and I can say nothing more than that the IT department is filled with humans. Which means they are lazy, and upgrade when people whine enough about it. It’s a shame it has to be that way, that we have to punish people for their IT departments, but that’s how it has to be.

As web developers, we should be the ones complaining the loudest. We have so much to win on IE6:s death it’s silly. Just look at the below list of things IE6 can’t do, but IE7 can (the next worst browser):

  • Native PNG alpha transparency without silly hacks.
  • Several selectors: Child selector (“>”), Adjacent sibling selector (“+”), Attribute selectors ([attr=value]), and General sibling selector (“~”, CSS3)
  • Min-height, Max-height, Min-width, Max-width
  • Multiple class/id selectors in the same ruleset (ie. .class1.class2 { … })
  • :hover on all elements, not just links
  • position: fixed
  • Native XMLHTTP (Without ActiveX)
  • International Domain Names (IDN), the ability to use UTF-8 chars in domains
  • Page zoom that zooms the whole page (don’t worry about zoom)

This is a huge step forward for us web developers. Huge! Bigger then when CSS3 comes out, because we won’t be able to use that one for years. Someone is pushing the front of what’s possible, I’m pushing for the front of what’s usable.

What can you do to help me get everything in the above list? And, did I forget something?

Sources:

33 responses to “Techniques to use when IE6 dies

  1. A “please drop your current browser and use something better” message is too similar to the old “optimized for Netscape Navigator” ones.

    It simply sends out a negative message about the page.

    If the sale/marketing and the customer service department agrees in that this kind of message should be on the page, it is fine for the IT to put it on. After all, a world without IE6 is a better world. :)

  2. @Csaba Kétszeri: Are you arguing that we should never let go of IE6? Because that “optimized for…”-message will look just as bad in 2014 when Microsoft’s support for IE6 is dropped. Btw. that dropping could be something as simple as disabling the CSS for IE6, while still letting them get to the content.

  3. @Emil Hesslow: That’s a great reference list. I love the summary box at the bottom, stating that 96% of the features in the list does not work in IE6.

  4. Hi!

    yeah, I can’t wait for it to die out too. Another thing that is sorely missing in IE6 is a print preview that doesn’t suck.

    BTW:

    “Multiple classes/ids on the same element”

    AFAIK, multiple classes on the same element works fine in IE6. At least I use the feature and it seems to work for me. Am I missing something?

  5. @Roland Bouman: It’s easy to think that multiple classes work, but in fact they don’t. Try styling something like .class1.class2 { [css here] }. You’ll notice that everything with class2 gets that styling, whether or not it has class1 applied too. It’s trixa, and very easy to miss.

  6. Hi Emil!

    When you wrote “multiple classes on the same element” I thought you meant:

    <style type="text/css">...
    .class1 { font-weight: bold}
    .class2 { background-color: red}
    </style>
    ...
    <div class="class1 class2">...</div>

    and this works fine – the div is styled bold with a red background.

    What you are describing in your reply seems more like a ruleset with multiple class selectors. I tried it, but I can’t get your particular example to work at all (tried Chrome, IE8 and FF 3.5). Am I missing something?

  7. The min/max height can be set in IE6 with the followings:

    For max height:
    * html div#division {
    height: expression( this.scrollHeight > 332 ? “333px” : “auto” ); /* sets max-height for IE */
    max-height: 333px; /* sets max-height value for all standards-compliant browsers */
    }

    For max witdh:
    * html div#division {
    width: expression( document.body.clientWidth < 334 ? “333px” : “auto” ); /* set min-width for IE */
    min-width: 333px; /* sets min-width value for all standards-compliant browsers */
    }

    Anyway, i think that we could all e-mail Microsoft with suggestions about these facts.

  8. I think that the biggest problem with IE and the big thing that IE6 can’t do is offer you protection.

    It has many vulnerabilities as it benefits from a poor update system.

    If you don’t want to include the code that @Emil published in your websites you should know the following tips to avoid problems with your site design in IE6.

    1.Use a doctype
    2.Use display:inline for all floated elements
    3.Use only tags formhovered elements. (the CSS hover effects that IE6 can only apply are limited to tags)
    4.Avoid Percentage dimensions

    I think that is a good idea to create a website with this theme of discussion, or support the existing ones.

  9. @Alex: About your max-width/max-width suggestions. Using expressions is not a recommended way to work around IE6:s problems. The problem is that they are evaluated too often, even as you move your mouse around. Slow computers get a very sluggish behaviour, which is why optimization tools like YSlow recommends against using them at all.

    The point here isn’t that there are no workarounds. There are. It’s about developers being able to focus on CSS, not those workarounds, and therefore be more productive.

  10. @Emil, i had adblock enabled on Firefox and the “except Microsoft themselves” link had a full banner ad so the page was not loading.

    Anyway, the majority of surfers that use IE6 are begginers so without Microsoft help it’s very hard to make them change/upgrade their browser.

    Regarding your last comment, what is the best way to avoid problems with Min-height, Max-height, Min-width, Max-width in IE6?

  11. @Emil, i guess i have to change all the expressions that i’ve used till now.

    Anyway, i’m thinking that it should look good if i use your “8 years old browser alert” and urge all those who use IE6 to upgrade as soon as possible.

  12. Tough question, Emil. I think a positive statement is almost always better than a negative one. What do you think about briefly noting the advantages of viewing your site with a modern standards-compliant browser (IE7 or higher, Opera 7 or highter, Firefox 2 or higher … etc.) — then linking to The Web Standards Project or something like that?

    I wouldn’t want to do that with a pop-up window. Maybe with something like we now use with the noscript tag that alerts people to enhancements only available with javascript enabled. Using javascript or another method, you could detect IE6 users and deliver that message only to them.

    In the end, I think the only way to choke out bad practices is to practice doing it right. We cannot insist that people upgrade their browser, but it’s good to point out how upgrading will benefit them.

  13. I agree with you, especially not supporting these PNG. I use it in my menu. Altough I still write separate CSS files for IE 6, because it’s still used by enough 13.6% off all browsers (according to w3schools.com statistics.

    En yes, I thinks IT fokes are lazy, lately we got new updates on every department and I remember the last programm became suitable for Explorer 8, so all programms are ready for browser update. Still they didn’t update the browser, still they didn’t give me a good reason why they didn’t. Perhaps because I’m the only complaining about this. I don’t understand my collegue, they all got newer browsers at home!

    I have a support section in home some time which gives a message if people use IE 6. I think everyone should do this. It’s time to move on, the only thing which should be done is install the new browser and if necessary (mostly even not) implement online programms.

  14. @Terry – your solution for checking browser compatibility is great but very time consuming. If you want to test only IE and you want to do it fast like you had that browser installed on your operating system, you can use the tool that i wrote about in my last post.

  15. Pingback: maxpagels.com
  16. Agreed, IE is dead. IE in general… Why doesn’t MS just lay down and die!

  17. I can say I’m looking forward to PNG being fully viable, and the use of multiple class selectors (although the additional selector pool may be enough once I can use some more CSS elements — I love :first-child and :last-child).

    IE6 is the browser that just won’t die.

  18. Wow IE6 until 2014 – Ouch!Either way I think I’ll be most excited not to worry about PNG transparency and the min and max heights and widths.I seen some people looking for options to test IE. This is what I use if anyone is interested.www.my-debugbar.com/wiki/IETester/HomePage

  19. I think the best possible way to deal with old browsers is to not apply any hacks and let the layout break. Don’t waste time testing sites in a wide variety of older browsers, just assume they’ll fail and let them.

    If users of ancient browsers navigate around the internet and see that everything still works — they will assume there is nothing wrong with their browsing experience. If every third page they see is broken, they might just get a clue — and that’s better than a push from Microsoft, IMO.

    Then again, I should say I don’t have customers, per say, visiting my web sites — optimizing a site for a mass number of computer configurations isn’t exactly a priority of mine. This is all anyone sees when they visit my site on an older browser: “Your browser is not future friendly. Upgrading as soon as possible will bring you a better internet experience, I promise.”

Comments are closed.