Demo/About/Documentation HTML5 shiv
IE8- isn't capable of rendering HTML5 elements. Webshims lib in combination with Modernizr automatically fixes this issue and adds WAI-ARIA landmarks to enable accessibility of HTML5.
Dynamically adding HTML5 markup
Additionally it implements the following manipulation methods .updatePolyfill(), .htmlPolyfill(), .appendPolyfill(), .prependPolyfill(), .afterPolyfill(), .beforePolyfill() .replaceWithPolyfill(), .appendPolyfillTo(), .prependPolyfillTo(), .insertPolyfillAfter(), .insertPolyfillBefore() and .replacePolyfillAll() to also allow dynamic creation of HTML5 elements.
$('#my-id').appendPolyfill('<section><form action="#"><input type="text" placeholder="hello this is required" required="required" name="test" /><input type="date" required="required" name="test2" /><input type="submit" /></form></section>');
Using webshims' updatePolyfill method with Backbone/jQuery mobile/Knockout
If a plugin, script or framework is used, which uses a "normal" JS/jQuery manipulation method instead of the corresponding webshims enhanced manipulation method to generate new HTML5 content (i.e.: .html() instead of .htmlPolyfill()), the method .updatePolyfill() can be used to polyfill the dynamic content:
$('#my-dynamic-container').load('ajax/test.html', function(){
$(this).updatePolyfill();
});
jQuery mobile example
//call webshims.polyfill() before domready
$.webshims.polyfill();
$(function(){
//bind to the pageinit event after domready...
$(document).on('pagebeforecreate', function(e){
//...and call updatePolyfill on the changed element container
$(e.target).updatePolyfill();
});
});
For jQuery Mobile see also webshims and jQ mobile
html5.shivMethods config
The html5shiv also fixes dynamically creating HTML5 elements in IE6/7/8. In case you do not create HTML5 elements dynamically using JavaScript or you are using jQuery 1.7+ manipulation methods for creating HTML5 elements, you should set html5.shivMethods to false:
<script>
// set options for html5shiv *before* embeding html5shiv
window.html5 = {
shivMethods: false
};
</script>
<script src="modernizr-with-shiv.js"></script>
<script src="modernizr-with-shiv.js"></script>
<script>
// set options for html5shiv *after* embeding html5shiv
window.html5.shivMethods = false;
</script>
<script>
// set options for html5shiv
if(!window.html5){
window.html5 = {};
}
window.html5.shivMethods = false;
</script>