10 Cool Things We’ll Be Able To Do Once IE6 Is Dead

Some people think that IE6 is dead already. But only developers who have the luxury of a specialist audience, or who don’t have any business interest vested in their work, can think like that. For the rest of us, who have a real-world audience of ordinary, non-technical users to think about, IE6 is still very much a going concern.

But maybe not for much longer. Now that IE8 is out we’ll see a greater number of users finally upgrading; there’s no doubt that Microsoft wil be pushing for this, and pushing hard. Quite apart from that, we’re seeing a slow but steady progression of users moving away from Internet Explorer altogether, and turning to Firefox and other browsers; Arstechnica recently reported that Firefox usage is overtaking Internet Explorer in Europe for the first time. Inevitably, there will come a time when IE6 has a sufficiently minor audience that we can treat it like we did Netscape 4 a few years ago — as legacy technology that it no longer behoves us to support, and its remaining users as willfully stubborn individuals whom we’re not required to pander to any longer!

(It’s funny really. You wouldn’t go into your local mobile phone store and complain that the handset you bought in 2001 doesn’t work on a 3G network and you can’t get picture messaging on it. Yet for some reason, a minority of web users do behave exactly like that.)

Anyway, by my estimation, the day is approximately 12 months away when we’ll be able to kiss a fond goodbye to IE6 support forever. And when that day comes, here are some useful things we’ll be able to do that we couldn’t really do on mainstream sites before:

1. Use child selectors

   No more having to define endless descendent rules to cancel out other descendent rules. With CSS2 child selectors we can specify CSS rules that only apply to direct children, not to descendants in general.

2. Make full use of 24-bit PNGs

   No more blending images against different coloured backgrounds so that the edges have decent anti-aliasing. With PNG alpha-channel support we can use images with shadows, glows and other opacity effects, safe in the knowledge that all graphical browser users can see them.

3. Use attribute selectors

   No more having to define type classes for inputs — things like <input class="text" ... /> — when we can address them with CSS2 attribute selectors like input[type="text"]. We can even use CSS3 substring-matching attribute selectors (supported in all modern browsers including IE7), which can be very useful for defining selectors that apply to a range of different attribute values, thereby reducing significantly the amount of code it takes to address groups of elements with similar class names (for example).

4. Use a wider range of display properties

   Being able to use things like display:inline-block instead of float:left means no more endless float within float within float, or the slightly-dubious use of overflow:hidden, just to get blocks to clear properly. (Though I should point out, we had to wait until Firefox 3 for this one too!)

5. Use min-width and max-width

   Although IE6‘s implementation of width is very similar to the correct implementation of min-width, it’s not the same, and it doesn’t serve every purpose; and it doesn’t do anything about max-width. With the end of IE6 can come a new renaissance in block-layout design, with the greater flexibility that designers have been crying out for for years.

6. Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)

   No more worrying about bizarrely repeating characters, mysteriously invisible blocks, or frustrating double margins; with the end of IE6 comes the end of needing to be able to diagnose and cure such a large array of rendering bugs.

7. Add abbreviations that everyone can see

   Although personally, I only use the <abbr> element and never use <acronym>, still it does occasionally irk me to remember that IE6 users won’t see the expansion, and bugs me even more on the odd occasion that I need to script for them (and can’t).

8. Trust z-index again

   No more scratching our heads as we ponder why layer X is on top of layer Y when it should be beneath, wondering what we might have done wrong, only to remember that — d’oh — we haven’t done anything wrong, it’s a stacking context bug in IE6.

9. Save time and money

   Significantly less time spent hacking means shorter development time and lower development costs.

10. Enjoy ourselves again!

    Writing CSS will become the pleasure that it used to be. That is, until our expectations rise again, and IE7 becomes our nemesis …

But 3 Things We’ll Still Have To Wait For

Sadly, there are still plenty of things we won’t be able to do with impunity until IE7 is also just a memory!

1. Use CSS Counters

   So we still can’t let go of the unfortunately-deprecated start attribute, or do any of the interesting things we want with generated content.

2. Use the box-sizing property

   The CSS3 box-sizing property, implemented in IE8 and other modern browsers, means that we can finally choose for ourselves which box model we want for a particular situation, and end, once and for all, the tedious arguments over which one is “correct”.

3. Any improvements to JavaScript

   There are many things I’d like to see for day to day JavaScript programming — an end to event target forking, a single event-listening mechanism, reliable and consistent retrieval of computed style properties — but all of that will have to wait until IE7 has also gone the way of the fairies, because only in IE8 have any improvements to the scripting engine been made (although what those improvements actually amount to remains to be seen!).

So mark the day in your calendar, for early in 2010, when the fuller potential of CSS will finally begin to emerge!

Picture credit: Mike Rohde