RWD – The HTML5 Shim for Internet Explorer

Posted on: November 17th, 2014 by alemieux

HTML5 + IE

Last time, we took a look at the HTML Viewport Meta tag, which is important for getting your site to look good on mobile. Since our HTML standard is HTML5, we need to make sure it works in older versions of Internet Explorer. I’m not considering IE6 in this conversation, although according to this site, 1.7% of the world is still on it. So that leaves IE8 and 9. As you can see from HTML5 Readiness, that IE8 and 9 are lacking in HTML5 powers. So IE10 will have the fullest support of HTML5 and CSS3, but we can’t ignore IE8 and 9 users. In fact, in some workplace environments, those browsers are enforced by IT policies.

Since HTML5 tags like <section>, <aside>, <footer>, and <figure> are not in the XHTML spec, they won’t be recognized by IE. But IE will go into quirks mode when encountering these elements, but all of them will be styles as inline elements. There’s 2 issues at play here, the fact that IE won’t recognize the elements and how they are being styled. Most normalize style sheets, like this one from Nicholas Gallagher and Jonathan Neal, will take care of the styling of the elements as block level instead of inline elements. Here’s how we do that:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}

In order to make IE recognize the elements themselves, we could add them to the document with JavaScript, but Remy Sharp has already done that for us with a script called the HTML5 shiv. You’ll need to put this into a conditional statement in the head section of your document. One key thing about the shiv that I’ve discovered is that it needs to placed after all of your stylesheet calls, both external and internal:

<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
< ![endif]–>

The conditional statement says something like, if the browser is anything less than IE9, add this JavaScript to the document. Here, I’m referencing the script locally for other reasons, but you can also reference it this way:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]–>

Break out the wineglass and celebrate! Now you are ready to use HTML5 in all its glory and be sure that it’s supported on those older browsers. Not so much though. You should still test on those browsers as I have seen odd things happen to HTML5 docs in them. As always, be sure to validate your HTML.

Next time, we’ll talk about Mobile site design testing and some tools and resources for simulating and testing.

Tweet this! | Bookmark at Delicious

Tags: , ,

Comments are closed.