Polyfills and shims for IE8 supportOriginally posted on
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
main, and others.
- Selectivizr - adds CSS3 selectors for IE. This can be important if you’re using a grid framework that makes use of
nth-childto 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.
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
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: containbehaves 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: autoto 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 :)