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!
So without further ado… the list!
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.
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().
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.
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 wonderful folks over at modern.ie 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.
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.