Of all the current coding technologies holding the most promise for the future, HTML5 leads the way — but despite its potential, many developers shy away from upgrading their infrastructure to HTML5 — often using the excuse of incompatibility with older browsers to cover for an unwillingness to adapt or to learn new techniques.
This reluctance does have a legitimate foundation, however, as new elements are not recognized by older web browsers, cannot hold child elements, and are not affected by CSS styles, hindering HTML5’s adoption by many coders.
HTML5 Shiv enables the use of HTML5 sectioning elements in legacy Internet Explorer variants and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
Programmer Sjoerd Visscher stumbled upon a workaround, and later posted the tip in a comment on W3C HTML WG co-chair Sam Ruby’s blog, stating, “BTW, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.”
The response from the stunned coding community was swift, as the implications became clear.
“I want to jam standards support into (this and future versions of) Internet Explorer,” John Resig stated, coining the term “HTML5 Shiv,” and notes, “If a shiv is the only pragmatic tool I can use to do so, shouldn’t I be using it?”
You should be using it too.
Fortunately, several solutions are available for helping cautious coders to explore this new frontier.
For example, the HTML5 Shiv (Code.Google.com/p/html5shiv) lets webmasters make their HTML5-based websites more backwards compatible with older browsing software that does not natively support the latest HTML5 web development standard by inserting a level of support via a JavaScript file.
According to a rep, the HTML5 Shiv enables the use of HTML5 sectioning elements in legacy Internet Explorer variants and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
Using the html5shiv is as easy as downloading a zip file and then inserting a call to the shiv's minified distribution within the web page's <head> element, either before or after the CSS calls. Here is the code:
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
“It must be included before the element (i.e. in the <head>) but it doesn’t matter if it appears before or after the CSS,” a rep advises. “But for the sake of performance it would make better sense to include the CSS first then this script.”The html5shiv is dual licensed under the MIT or GPL Version 2 licenses and the full, uncompressed source code is available, adding new HTML5 elements, and supports the printing of HTML5 elements, including default styles for elements such as “display: block” in HTML5’s article and section tags.
The publisher also addresses a common question: what is the difference between the html5shim and the html5shiv? The answer: nothing — one has an “m” and one has a “v” — that is it, so if you see information referring to html5shim, it is the same thing with a different name.
Because only Internet Explorer 9 or less will call the html5shiv code, it does not affect the performance of your site with other browsers, making the addition of this free script a no-brainer.
