What HTML5Shiv does is that it creates the objects for all known HTML5 elements(of the Page) in the DOM tree?. This gives the browser an implication that the particular element is supported and available in the DOM tree and it applies the specific CSS classes to the element.
Follow these simple steps to integrate HTML5Shiv to your existing page:
Step 1: Get HTML5Shiv binary – You can get HTML5Shiv binary(html5shiv.js) from http://code.google.com/p/html5shiv/
Step 2: Insert the necessary code block in the <head> element of your html page (after or before your CSS)
<blockquote><p><!--[if lt IE 9]><br /><script src="scripts/html5shiv.js"></script><br /><![endif]—></p></blockquote>
NB: Assuming that html5shiv.js is kept under the scripts folder under the root folder of your web application.
Lets look for a simple example:
Look at the below html sample, with an article element:
Copy the below code block in to notepad and save as ‘test.html’ – to a location wherever you like 🙂
Try to Browse the sample in Internet Explorer 7.0(by double clicking on ‘test.html’ file) and you can see that font color and font size are not applied and as a default fallback – it is displaying text in a normal font and color. It is because browser will not apply the CSS to an unknown element, HTML5 elements are aliens 🙂 for IE 8.0 and below.
[Before – HTML5 Shiv is applied]
Now try to apply the HTML5Shiv code block on to the above sample and see the magic. Modified code block will look like below:
<!--[if lt IE 9]><br /><script src="scripts/html5shiv.js"></script><br /><![endif]-->
[After – HTML5 Shiv is applied]
Very nice! right?. Yes, it is indeed helpful for enabling backward support of your HTML5 elements styling on IE 6,7,8 versions.
DOWNLOAD and USE
You can get HTML5Shiv binary from here: http://code.google.com/p/html5shiv/
and Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv
Hope you enjoy this nice tip.
Courtesy: Wikipedia and Google Code