HTML5 has introduced lots of new cool tags. Not all the browsers support all tags and also the implementation of these tags may be different for each browser. HTML5 specification defines the functional aspects of these tags and not the implementation. Also the general concensus is that by 2022 all browsers will support all new features of HTML5.
Of all the modern browsers, Chrome seems to have implemented most, if not all, featutes of HTML5. IE9 supports few. Firefox sits in between. So as a developer how do you make use of the cool HTML5 features without causing any compatibility issues with existing browsers?
Traditionally developers have used User Agent to detect browser type and use the features accordingly. However these days, you can easily change a User Agent by using addons in your browser. So you need a more robust way to detect the features supported by the browser as the same engine of two different versions of a browser might support different features.
To detect the features supported by a browser, you can downlaod and use Modernizr javascript library. This library checks the features supported by emitting the tag, setting a property and fetching it back to see if the tag is returned. Now if the browser supports the tag, it returns the tag else it returns nothing. The library is really fast and takes only few milliseconds to detect all features.
If you want to implement a feature which is not supported by a browser, you can use polyfills. There is a polyfill for nearly every HTML5 feature.
You can visit Modernizr website to download and read more about implementing it
Of all the modern browsers, Chrome seems to have implemented most, if not all, featutes of HTML5. IE9 supports few. Firefox sits in between. So as a developer how do you make use of the cool HTML5 features without causing any compatibility issues with existing browsers?
Traditionally developers have used User Agent to detect browser type and use the features accordingly. However these days, you can easily change a User Agent by using addons in your browser. So you need a more robust way to detect the features supported by the browser as the same engine of two different versions of a browser might support different features.
To detect the features supported by a browser, you can downlaod and use Modernizr javascript library. This library checks the features supported by emitting the tag, setting a property and fetching it back to see if the tag is returned. Now if the browser supports the tag, it returns the tag else it returns nothing. The library is really fast and takes only few milliseconds to detect all features.
If you want to implement a feature which is not supported by a browser, you can use polyfills. There is a polyfill for nearly every HTML5 feature.
You can visit Modernizr website to download and read more about implementing it
Comments