Polyfills and shims for IE8 support

Introduction

If you’ve ever done work for a government, financial or B2B organization, you might find yourself needing to support Internet Explorer 8. I know, I know: you’ve made your case for dropping support, pointing out that large SaaS companies are dropping support (or dropped support years ago), Microsoft itself is dropping support soon, development time could double, etc. But higher ups point out that 10+% of users are locked into IE8, and until corporate IT is able to justify OS upgrades, we’re stuck.

Don’t fret too much. It’s still possible to create a modern site and provide a pretty decent user experience on these older browsers, with some caveats. It probably won’t be a completely 1-to-1 experience from IE8 to a modern browser, but it should be enough to allow you to develop using best practices going forward while creating a not-completely-hideous result in IE8. Here are some of the tools you’ll need in your toolbox:

  • HTML5 Shim - Adds browser support for HTML5 elements, including header, footer, aside, main, and others.
  • jQuery 1.x - the 1.x versions of jQuery have promised support for Internet Explorer 6, 7 and 8. This gives us the jQuery we’re all used to with a guarantee our JavaScript should Just Work.
  • Selectivizr - adds CSS3 selectors for IE. This can be important if you’re using a grid framework that makes use of nth-child to clear elements, for example.
  • RespondJS - a polyfill for CSS3 media queries. This is important if you’re building a mobile-first website, as IE6–8 don’t support media queries.
  • ES5 shim (and optionally ES5 sham) - ES5 shim monkey patches JavaScript to contain ES5 methods that can be faithfully emulated. ES5 sham monkey patches other methods as closely as possible, or allows them to silently fail instead of causing runtime errors. Use ES5 sham at your discretion.

The next two links are especially handy. They allow for some nicer CSS decoration techniques that we’ve become used to that otherwise wouldn’t be possible on legacy browsers.

  • CSS3 PIE - This polyfill adds support for border-radius, box-shadow, and linear-gradient. Yes, you can still have depth and detail in your IE8 designs!
  • Background cover - Useful for full-container images. This will ensure your background-size: cover or background-size: contain behaves as expected.

In addition to the links above, you’ll most likely have to make consessions for IE8 in your CSS. Things like a margin not working will have you climbing up the walls! Here are some common ones that I’ve come across:

  • Top margin doesn’t work in IE8 - This is a known bug, and a pretty easy fix. Just add overflow: auto to the clearing div.
  • I want to add a transparent div / blur / shadow! - Here’s a fun one. IE CSS has a property called filter. This property accepts several attributes, all noted here. A good reference I found for transparent backgrounds in particular is on CSS Tricks. These will definitely muck up your stylesheets, but if you want to provide a better user experience for your IE8 users, this is one of the ways.

I’m working on a rather large project redesign that needs IE8 support, so I’m sure I’ll find more issues in the future. But for now, the above tips and hacks have definitely kept me sane as I build out a modern experience that needs to support outdated browsers.

Now, you might have no real choice in supporting IE8 if you’re in the public sector or financials. But if you’re a freelancer? Make the same case for dropping support at the top of this article, and also charge double for IE8 support and testing :)