HTML5 – Backward Compatibility Issues

 To ensure compatibility and reliability of old browsers implementing HTML5 features, one of the following two methods should be used. One primarily uses its libraries to implement HTML5 features and the other essentially modify CSS rules to render content properly. 

(1) HTML5 Shim – a modular capability-based polyfill-loading library. It was built on top of jQuery and Modernizer. Loading the Webshims library is just a few lines of code. For more details, refer to https://github.com/aFarkas/webshim

HTML

<!--dependencies: jQuery + Modernizer with yepnope -->
<script src = "js/jquery-1.7.1.js" </script>
<script src = "js/modernizr-yepnope-custom.js"></script>

<!--base script -->
<script src = "js-webshim/minified/polyfiller.js"></script>

Javascript

<script>

//implement all unsupported features or call polyfill b4 DOM-ready
//to implement everything asap
$.webshims.polyfill()

//or load only specific features you need, for example
$.webshims.polyfill('forms json-storage');

$(function(){
//use all implemented API-features on DOM-ready
});

</script>

(2) HTML5 Boilerplate templates – These doesn’t use Javascript shimming library. It takes advantage of IE-specific CSS rules to turn new elements into appropriate default style. It does not attempt to implement any HTML5 functionality, instead it ensure the page elements are displayed properly.