Macadamian Blog
The Post-IE6 Paradigm Shift
Most web developers will tell you that they have hated Internet Explorer 6. There are plenty of reasons for this: It doesn't support standards, it's insecure, and it's really, really out of date. The web community has started campaign after campaign after campaign to convince users to upgrade to something better.
Finally, it looks like the tide has turned.
The market share for IE6 is dropping fast. It's way behind Firefox, and being overtaken by Chrome. Safari will be next, and someday, Opera. But most importantly, right now, clients are no longer asking to support it.
The past few projects I've worked on have all asked to support only version 8 of Internet Explorer. It's been six months since I’ve even looked at a page in IE6. All because support for IE6 is now no longer a requirement in the specs we receive.
A New Kind of Web Development
Web development in the post-IE6 world feels... strange. I still hear a tiny voice inside my head whenever I use the :first-child pseudo-selector. "That's not going to work in IE6!", it claims. But we're past that now. We've entered a new era in web development, and it's time to silence those voices – and unlearn those old habits. And it's more than just remembering to use the syntax we've been avoiding for so long; supporting IE6 has skewed how we make fundamental design decisions.
It's time to take back that control. Here are three basic principles we, as web developers, need to re-learn.
1. Proper Use of Floats
How many times have you oh-so-carefully assigned fixed widths to everything you float, lest IE6 toss it somewhere completely nonsensical? Or what about floating two elements next to each other because you couldn't get IE6 to wrap content correctly?
This is how IE6 has taught us to use float, and it's lame. Float was designed to be a flexible, easy-to-use attribute for managing how content flows around elements within an HTML document — not some finicky, headache-inducing nightmare of box model bugs.
The first step is to educate yourself. When someone asks me about float, I like to point them to CSS Tricks' excellent float explanation. There are other great resources out there too; a quick search for "how to use css float" will net plenty of useful results.
The second step is to practice. Float isn't going anywhere, and it's a powerful layout tool — you may as well learn to use it really, really well, right? To practice, take a look at something you're implementing and find the places in which float can be used effectively. Or, grab an old project in which your float layout was pieced together from snippets of code you found online, and implement it correctly.
Practice makes perfect, and it's going to take a lot of it to get those IE6 habits out of our heads.
2. When to Use JavaScript
JavaScript is a fantastic tool that can be used to build fun, interactive interfaces. It's great for dynamic content, features that require AJAX, and frameworks like jQuery.
But JavaScript can also be used as a crutch. When something isn't possible in CSS, it's always off-loaded to JS, where anything is possible. This is especially true for browsers that don't support CSS very well, such as IE6.
By now, we have been conditioned to believe that some things just have to be done using JavaScript — things like drop-down menus, or the positioning of complicated layout elements. The reality is that JavaScript should only be used to add behavior to the document. It shouldn't control layout (that's what your mark-up is for) and it shouldn't control presentation (this is why we have CSS). CSS attributes like min-width and max-height can do so much to make a layout more dynamic. Real pseudo-class support, like :hover for elements other than just <a>, can help you avoid using JavaScript for simple presentational changes. And, with animation support coming in CSS3, we'll be better off than ever!
The days of resorting to JavaScript to make up for lacking or inconsistent CSS support are over.
3. How to Innovate
Supporting IE6 was restrictive. While the CSS support in other browsers was constantly improving, the support in IE6 was buggy, incomplete, and worst of all, stagnant. There was little room for developers to grow.
I remember back when I needed an image rollover that used <img> tags, but no JavaScript. I came up with a neat solution, but couldn't actually use it because it didn't work in IE6.
This used to happen to me all the time... then it stopped. Not because the CSS standard suddenly stopped evolving, and not because I had learned all there was to know about web development. I stopped innovating because I became so familiar with exactly what works in IE6 that I never strayed from it.
Now that IE6 is no longer ruling our requirements, we have to re-learn how to innovate. Try out new things! Experiment with different selectors! Play, dammit! This is how the web community grows, and with IE6 out of the picture, it's finally time to let our skills thrive.
