Making Internet Explorer Recognize HTML5 Elements

Making Internet Explorer Recognize HTML5 Elements

Problem
Internet Explorer doesn’t apply CSS to elements it doesn’t recognize. And, unfortunately, Internet Explorer (prior to IE9) doesn’t yet recognize most HTML5 elements.
So, implementing HTML5 is difficult, as Internet Explorer won’t render any CSS that you apply to these new elements.
Solution
A clever solution to this problem, attributed to Sjoerd Visscher (see http://intertwingly .net/blog/2008/01/22/Best-Standards-Support#c1201006277), and known as the shim technique, involves creating a DOM element of the same name as the HTML5 element that you want to use. Once you create this element, Internet Explorer will apply CSS to it.
For example, let’s say you create the following simple body header that includes a navigation element:
<header>
<h1>Riddles of the Sphinx</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact/">Contact Me</a></li>
</ul>
</nav>
</header>Then, style these elements:

header {
width: 600px;
height: 25px;
background-color: #ccffff;
border: 2px solid #66cc99;
padding: 10px;
}
nav {
width: 100%;
float: left;
list-style: none;
}
nav li {
float: left;
padding-right: 7px;
}

When we view this page in Internet Explorer 8 or below (as shown in Figure), the CSS is not applied.
For Internet Explorer to recognize these elements, just add the following script to the head of the HTML document (make sure you add it to the head of the document, as the elements need to be declared before the page renders):
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("footer");
</script>

Then declare the three HTML5 elements that we’ve used on the page header, nav, and footer as DOM elements.
Figure: Basic rendering of the list.

Now, when we view this page in Internet Explorer (as shown in below Figure), the browser sees these elements and applies its CSS.

Figure: Internet Explorer recognizes the elements

 Discussion

While this technique is effective, it can become cumbersome to create DOM elements for all of the HTML5 elements on a page, especially if you are making heavy use of many of them.
Web developer Remy Sharp has created a script that enables all of the HTML5 elements.
Integrating this script into your page can be much more convenient than hand coding a script every time you want to sprinkle some HTML5 into your page.
You can download the script at http://remysharp.com/2009/01/07/html5-enabling -script/, and integrate into the head of your HTML.
Or, you can hotlink the script from the Google code repository:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->If you wrap this code within this conditional, it will only call the script if the browser is Internet Explorer 8 or lower (IE9 has broad-range support for HTML5 elements and technologies).