Wednesday 26 June 2013

Find out if you browser supports HTML5 or not

HTML5 is the future of the web so one can start implementing it from now onwards as some of the browsers are compatible with it(not completely). However, while implementing you should take care of those browsers also which are not compatible with HTML5.
The are several ways to detect whether your browser supports HTML5 element or not.
The easiest way to do so is to use “Modernizr”. It is an open source , MIT Licensed Javascript library that detects support for many HTML5 and CSS3 features. You can download it from here


Using Modernizr to detect HTML5 Elements is very simpleIn the head part we have to insert this 
<script src="modernizr.min.js"></script>
It will create a global object called “Modernizr” which contain some boolean properties for each feature it can detect.
For example if we want to detect Canvas element
if (Modernizr.canvas) {
// Canvas support available
}
else {
// Canvas support not available
}
 You can refer to http://www.modernizr.com/ for the list of features that Modernizr supports.  
2.If the feature you want to detect is not in the list then you can do something like this
function isCanvasSupport() {
return !!document.createElement('canvas').getContext; }
It will create a dummy canvas element after that it will check for getContext() method this method will only exist if your browser supports the canvas API The double negation sign (!!) will force the result to boolean
3. There is one more way to do the same in a way it is the exact replica of the above
var supportCanvas = 'getContext' in document.createElement('canvas');
if(supportCanvas) {
//Do Something
}
else {
//Do something
}
You can use any of the above mention methods. These will be helpful for fixing compatibility issues as currently only few browsers are compatible with HTML5. 


Good Luck.. :)

No comments:

Post a Comment