Three Ways to IE-Proof Your Javascript

One of the prime evils of front-end web development is ensuring that our work functions properly in Microsoft’s Internet Explorer, which is, at best, delightfully quirky, but at worst, a cause for alarm. The problem isn’t going away for the foreseeable future; in fact, all versions of IE saw gains over the last month, while other browsers saw no such increases in user share. With numbers like that, you really can’t afford to sweep incidental bugs under the rug!

Microsoft’s browser, especially its more venerable versions, has been taking our shiny new CSS and JavaScript toys away for years; in this time, the web development community has come up with several tricks to get around ol’ IE’s lack of SVGs, HTML5 structure tags, and many other caveats. We’ve even made use of ways to bypass Microsoft’s hard limit on having but one installation of IE per system!

So without further ado… the list!

JavaScript Element Selectors

The Problem

While building our new site, one of the snags we hit in testing was that IE8 and back did not support the document.getElementsByClassName() method. Being a huge fan of Vanilla JS, I wanted to write as much of our homepage’s showcase area as possible without jQuery. document.getElementsByClassName() was instrumental to selecting the right tags for each necessary change to the DOM. IE8, ever the rapscallion, does not support that method.

The Solution

Instead of selecting with document.getElementsByClassName(), I chose to select tags with document.querySelectorAll(). Because our CSS selectors were all to the CSS2 spec anyways (with a single notable fallback, being our navigation), we had no issue replacing any instance of document.getElementsByClassName() with document.querySelectorAll().

Feature Detection

The Problem

Every browser is different, each supporting its own set of special features; it wasn’t until IE9 that many important web standards, such as SVG and CSS3 features, were made available for use to a wider audience. In the case of our new site, the 2D transforms, driven by CSS3, were not possible in IE9 and back.

The Solution

Thanks to the way our design team planned the homepage, there was no great loss for the user if they could not flip the homepage banner. Through the magic of Modernizr and progressive enhancement, we felt it appropriate to remove this functionality from IE9 and back.

Test, test, test!

The Problem

The usual way to test JavaScript is to run it with a development console open; this allows you to, depending on your preferred tools, profile how quickly your code runs, determine if everything is firing in the proper order, and make certain that AJAX requests are passing around the correct data. IE8 and back include tools to turn back the hands of time, however, they leave much to be desired; while they work fine for debugging CSS issues, the tools will generally use the Javascript rendering engine of the current browser version.

The Solution

The wonderful folks over at have a variety of tools to get you up and running for debugging older versions of IE, including my personal favorite: separate VMs for testing each version of IE in its own sterile environment.

Other developers have said wonderful things about IETester. This tool gives you the ability to test multiple versions side by side. While you lose the ability to use a debugging console, you maintain the ability to use multiple simultaneously run instances of Internet Explorer.

If you’re unable to install VMs or IETester, there is still hope! The developers behind Firefox’s ever popular yet deadly Firebug have given us a handy bit of JavaScript called Firebug Lite.

Usable as either a bookmarklet or a JavaScript file, this tool gives IE from version 6 and up a development console and other tools that are bog standard among newer browsers.

Internet Explorer has historically been the manacles that bind the development community to a more primitive age. With the right tools in your toolbox, you can bring the behaviors of your site into the modern age!

Tim Snyder is the Front-End Developer at Flying Cork.