Check if a browser supports HTML5
HTML5 is a new way of developing interactive websites, HTML5 is still a emerging technology but we can already see lot of work being done and browsers supporting this new technology.
Anyone who will develop HTML5 will need to know how he can detect the browser is capable of supporting HTML5? or How he can detect which features the browser is compatible with.
The simplest way to do that is creating a canvas object using
document.createElement method. After creating the object we can check if 2D context can be created, here is an example below:
<script type="text/javascript">
function supports_canvas() {
//Check if browser supports canvas
return !!document.createElement('canvas').getContext;
}
</script>
We have a open source solution as well, with help of which we can all the features supported by a browser, this is a javascript include file which can be obtained from
Modernizr. We simply need to include this file in the head section, no call to any function, on its include it executes and initialize few boolean properties which can be accessed to check different HTML5 feature support.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
The Modernizr.canvas property will return false if your browser does not support the HTML5 canvas API, following check will be used:
if (Modernizr.canvas) {
// let's perform some 2d graphics!
} else {
// no canvas support available!
}
