ie-eating-glue

I get excited when I’m given a new website design to build. My mind starts spinning, parsing the various components and figuring out what exciting, cutting edge techniques I can use to make this beautiful design a reality. It’s going to be mobile-first, responsive, clean…

And then the project manager tells me the client wants the site to look great in IE8. And a little part of me dies inside. It was a beautiful dream while it lasted.

Internet Explorer 8 was released in March of 2009, making it 5 years old in human years, 35 years old in dog years, and about 50 years old in technology years. And it wasn’t even a cutting edge browser at the time: both Firefox and Chrome (fresh out of beta) had better JavaScript rendering speed and web standards support before IE8 launched.

When I have to appease IE8, my goal is simple: don’t sacrifice. I’m not willing to build my modern website around old browsers. Instead, I do what I can to make IE8 behave more like a modern browser. The following five tools make that a whole lot easier.

html5shiv

HTML5 introduced a lot of new tags: header, footer, article, aside, and so on. Browsers released prior to the HTML5 spec don’t understand these tags. The html5shiv (or html5shim… the only difference is that one letter) lets the browser know how to handle the tags.

IE8 doesn’t understand HTML5 tags. When it encounters them, it simply removes them, leaving any content within orphaned. That’s the quickest possible way to mess up a nice design. The html5shiv will prevent that from happening. Use it.

Selectivizr

Internet Explorer 8 shipped without support for a lot of pseudo-selectors and pseudo-classes that we take for granted on the modern web. Which of the following rules will work on IE8?

li:nth-child(3n+1) {}
input:checked {}
.thumbnail:hover {}

Out of these three, only the :hover rule will work in IE8. And that’s only if you set a proper DOCTYPE… otherwise, even that one fails.

Selectivizr gets these pseudo-bits working properly in IE8. It does require a JavaScript library (like jQuery, Dojo or MooTools) to work, but most modern websites will already be using one of those anyway.

Respond.js

Media queries are the lifeblood of any modern responsive website. Unfortunately, the term “Responsive Web Design” wasn’t even coined until a full year after IE8 shipped. The result? Internet Explorer doesn’t support the most fundamental tool in the responsive toolkit. This means if you build a site mobile-first as modern practice proscribes, IE8 gets the mobile CSS. And if your client is still using IE8, I can pretty much promise they’re not okay with that. (Of course, my personal opinion is if they’re still using IE8 they must be used to disappointment!)

Respond.js is a polyfill that adds media query support to IE8. This is pretty magic stuff: suddenly, your responsive website works on a 5 year old browser! It relies on JS to detect and trigger CSS switches, and IE8’s JS engine isn’t particularly robust, so the switch isn’t going to be as smooth as it might be in the latest version of Chrome. The good news is, only web geeks like us switch back and forth between breakpoints, so the average user won’t ever notice.

Modernizr

Modernizr runs at page load and adds a bunch of classes to your site’s html tag describing its abilities (or inabilities). You can put together a custom build on Modernizr’s website to test only the features you need, so it can load and run wicked fast. You can also build Modernizr to automatically include html5shiv, which saves you an asset.

When the other tools listed above aren’t quite enough to get the job done, Modernizr helps you clean up the mess by giving you feature-specific classes to code against. Your buttons don’t stand out in IE8 because they lost their drop shadow? Just add a rule like this:

/* Will only apply to browsers that don't support box-shadow */
.no-boxshadow .button {}

Modern.ie

No matter how many plugins and polyfills you throw at your code, eventually you’re going to need to test the site in IE8. And unless you’ve got a 10 year old Packard Bell collecting dust in a corner somewhere, it can be tough to find a copy of IE8 running outside your client’s office.

Enter modern.ie. It’s a website run by Microsoft that offers (among a few other cool things) downloads of Virtual Machines running old copies of Internet Explorer. Just download something to run virtual machines (I use Oracle’s free VirtualBox), a copy of the IE8 virtual machine from modern.ie, and you’ll be up and testing.

What Else?

Do you know of a tool I haven’t mentioned that makes working with IE8 easier? Let me know in the comments.