For years I’ve been dreaming of a day when I could write HTML and CSS without the limitations of Internet Explorer 6. That dream became a reality on March 1st when I left my previous job at a web agency and started working with MailChimp. They phased out our support for IE6 over a year ago and have started enhancing their UI even further with a little CSS3 magic as well. While I love working with front-end code that represents the future of the web, I’m discovering just as much joy in what really should be the present.
With IE9 looming over the horizon, it’s finally time to think about the great advantages to having IE7 as our new lowest common denominator. It really will change the way you work. Here’s just a few things that become possible:
- Warmly embrace 24-bit PNG transparency. You’ll still be able to get smaller file-sizes out of 8-bit PNGs, but you won’t have to use any shady hacks to get rid of that telltale gray background.
- Stop adding “book end” classes to the first or last item in a list to give it a different set of styles. Instead you can use the
:first-child
orpsuedo-class. Nathan’s comment is correct, no:last-child
:last-child
support in IE7. :/ - Forget about adding page slug classes for individually styled navigation items. With CSS2 attribute selectors, you can actually write styles for
a[href="/about/"]
. - Reliably apply multiple classes to elements. A common example would be
<p class="alert error">Error...</p>
Honestly though, being able to finally use substring matching attribute selectors could sidestep the need for multiple classes altogether. Instead you could write a rule forp[class$="-alert"]
that would apply to.error-alert
,.success-alert
, or even.rabid-antelope-alert
. - Eliminate the use of JavaScript for simple fly-out navigations. Now that the
:hover
psuedo-class works on non-link elements, you can show or hide sub-navigation when the parent list-item is hovered. - Finally say goodbye to @ded‘s Min-Height Fast Hack now that
min-height
works across the board. This also means you can usemax-height
,min-width
andmax-width
too.
Hold Tight!
While I was working at an agency that still supported IE6, it was hard not to envy those web workers who did not have to design for it. For those of you who have clients that still hold dear to this undead browser from 2001, it’s time is very, very near. There are a growing number of major sites and applications that no longer support IE6. What I’m most excited about though, is that fact that Google has joined the movement. They began phasing out their IE6 support (starting with Docs and Sites) this month, started warning YouTube users that their browser is no longer supported, and will allegedly stop supporting IE6 in GMail “later this year“. With that kind of pressure, it won’t be long before even the slowest IT departments start allowing their users to upgrade or switch browsers.
So, what changes are you most excited about once IE6 is no more?
Actually, IE7 only supports :first-child, but not :last-child. Lame, I know.
Whoops! Thanks for pointing that out.
When Microsoft finally announces the end of support for IE6 I will finally be able to stop testing for it. I still can’t believe how many hits our corporate site receives from IE6.
Our intranet on the other hand, can stop supporting IE 6 and maybe 7 soon as our new image does not have an IE 7 option.
Now, if we could only get some government stimulus funding to upgrade all those legacy .asp apps that only run on IE6. Wait, did I say upgrade? I mean, um, throw away.