Responsive web development without IE conditional comments

Microsoft recently revealed that IE10+ will no longer support the somewhat necessary evil that is IE conditional comments. I spent some time during the last couple of days trying to come up with an alternative that didn’t suck.

Before

Before I discovered that IE11 didn’t parse the conditional comments anymore (even when emulating an older version in the developer tools) and read about Microsoft’s ideas on how they intend to clean up their IE mess, I used the conditional comments in two places.

The HTML tag

I believe it was Paul Irish who came up with the idea of conditionally adding classes to the HTML tag according to what version of IE is rendering the page. This allowed us to write browser-specific styles like this one:

article{ width: 65%; }
.ie7 article{ width: 60%; }

I actually used these conditional classes to apply a merge of all of my breakpoints for IE. So if I had my styles for mobile and then two breakpoints for tablets and desktop, I would write a merge of my tablets and desktop breakpoint in a .lt-ie9 selector.

The HTML5 shiv

I also happily used conditional classes to write a script tag for the HTML5 shiv when a visitor is running a version of IE below 9 because those versions don’t support HTML5:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="/js/html5shiv.js"></script>')</script>
<![endif]-->

After

I have spent some time coming up with an alternative to these methods with the following things in mind:

  • I don’t want to punish users with a good browser.
  • I want to increase the payload as little as possible, if at all. So Modernizr will be a last resort.
  • There shall be no browser sniffing.

The HTML tag

Since all I really used these for was fixing the inability of browsers below IE9 to understand media queries, I opted to give respond.js a try because it would also speed up my development process. But I still needed a way to detect a browser’s media query skills. This is how I did it.

if (typeof window.matchMedia != 'function') {
	var respond = document.createElement('script');
	respond.src = '/js/respond.js';
	document.body.appendChild(respond);
}

This little script checks the browser’s matchMedia method. If it isn’t there, it injects a script tag into the document to load the respond.js library.

The HTML5 shiv

I do something similar to only load the HTML5 shiv in non-HTML5-capable browsers. In the head I now have a script tag that checks whether the browser is familiar with the canvas tag, like so:

<script>	document.createElement('canvas').getContext || document.write('<script src="/js/html5shiv.js"></script>');
</script>

If the browser has no clue who or what a canvas element is, a link to the HTML5 shiv is added to the document.

Farewell conditional comments

I have tested this in more than 20 browser/OS combos and it seems to work as intended in every one. All of my upcoming projects will probably be using this as their basis.

I have a boilerplate up on GitHub that I use for new projects. I’ve updated it with these techniques in case you want to start using them.