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>