Today I learned

Legacy IE polyfills

Update (Jan 2019): This document was written for Internet Explorer 8. IE9 and below occupies a global share of less than 0.17% today. Please rconsider not supporting IE versions below 11.

Use this convenient snippet in almost any project. It will fill in some basic support for modern CSS features for legacy IE versions.

<!--[if lt IE 9]>
<script src='https://cdn.jsdelivr.net/nwmatcher/1.2.5/nwmatcher.min.js'></script>
<script src='https://cdn.jsdelivr.net/json2/0.2/json2.min.js'></script>
<script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
<script src='https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js'></script>
<script src='https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js'></script>
<script src='https://cdn.jsdelivr.net/es5.shim/4.4.1/es5-shim.min.js'></script>
<![endif]-->

What's going on?

The world has largely moved on from IE6 to IE8, but this is the least you can do to make your sites at least don't appear broken on older browsers. This snippet packs these 6 libraries which can be dropped into any project:

  • html5shiv — for new HTML5 tags like <article> (IE6-8)
  • respond — for @media queries for responsive design (IE6-8)
  • selectivizr — for all modern CSS selectors (IE6-8)
  • json2 — for JSON parsing (IE6-7)
  • nwmatcher — the selector engine for selectivizr
  • es5-shim — add ES5+ functions (IE6-8)

It's wrapped in an IE conditional comment, so only the poor souls with outdated IE's will bear the extra load.

Selectivizr

While Selectivizr has been abandoned at 1.0.2, there are new changes that haven't been officially released yet (see #67) that fixes interoperability with Respond.js. This article has the technical details, but is outdated in a few ways: Respond.js already has support for selectivizr in upstream, and the selectivizr changes described are already sitting unreleased in the master branch.

This snippet uses rawgit.com to fetch the unreleased 1.0.3 from the fork gisu/selectivizr to fix interoperability issues with respond.js.

Legacy IE cheatsheet

I've put together a Legacy IE cheatsheet to help you figure out what features you can use for older versions of IE.

You have just read Legacy IE polyfills, written on April 17, 2015. This is Today I Learned, a collection of random tidbits I've learned through my day-to-day web development work. I'm Rico Sta. Cruz, @rstacruz on GitHub (and Twitter!).

← More articles