HTML5 invented and it has a bunch of features that make websites and web applications to be more effective. HTML5 added some most common features too. For example, form elements different type (eg. email, text, number, date etc.) and validation is the most common features on the web now. You don’t need to reinvent the wheel. You also can use SVG images, GEO Locations, Canvas, Web Storage (LocalStorage and SessionStorage), Video, Audio, Application Cache and more.
But there is a problem too. The problem is some older browsers are still don’t support HTML5 and some supports very few features. The best practice is to make browsers compatible with HTML5 or add some fallback for them. You can follow some steps that we described below to know about the fallback for HTML5.
Step1: Detect if the browser supports HTML5
Step3: Use available fallback or polyfills
So, how can we detect? When we get the browser that doesn’t support HTML5, then we can set fallback for that browser.
How Mordernizr works?
Following code will help you to understand how to use Mordernizr to detect:
yep : 'geo.js',
In this example, we need to load a different geolocation script depending on whether it is supported in the user’s browser or not. Modernizr’s load method have a property called test and we used it to test geolocation for user’s browser (Check Mordernizr official documentation). After doing this, Modernizr will load geo.js if the browser have support for geolocation feature and if not support, then load geo-polyfill.js. Thats how you save users from downloading the code that their browser does not support. It increases page performance too.
Tricks for HTML5 Fallback and Polyfills:
Some tricks we described to use HTML5 fallback and polyfills that are available. But if not available, you have to write your own polyfills. Here is the tricks:
1. Use following scripts as fallback for Sectioning Elements on Internet Explorer or non-supported browser:
html5shiv by afarkas, Jon Neal & community
innerShiv by Joe Bartlett
Enables elements for innerHTML use (It deprecated and replaced by html5shiv)
2. A hack issue used in HTML5 Boilerplate for Internet Explorer or older browsers, use following X-UA-Compatible meta tag before <title> to using chrome engine inside another browser:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3. For HTML5 API support, please check Mordernizr wiki about HTML5 Cross Browser Polyfills.
4. Read details about available HTML fallback and polyfill from HTML5 Please and use.
Fallback are available for only most important HTML5 features. eg. offline don’t have any fallback. In this case, You have to use available polyfill or make your own polyfill.