None of the browsers currently fully supports HTML5. HTML5 browser support timeline for any given browser is also not clear. So, it is vital for HTML5 developers to know whether a specific HTML5 feature is supported on a given client’s browser or not.
Modernizr is a JavaScript library that can be leveraged by developers to detect whether a given HTML5 feature is supported on the client’s browser or not. So, Modernizr can be very useful in developing HTML5 applications.
These are few ways HTML5 developers can use Modernizr in their HTML5 development efforts.
1. Modernizr.[HTML5 feature name] returns true or false for a given HTML5 feature and developers can write program logics accordingly.
<!doctype html>
<html>
<head>
<title>Modernizr Basics</title>
<script src="scripts/modernizr-2.0.6.min.js"></script>
<script>
if (Modernizr.localstorage) {
// Use Local Storage
} else {
// Do not use Local Storage
}
</script>
</head>
<body>
</body>
</html>
2. Modernizr.load() allows developers to load different scripts based on whether a given HTML5 feature is supported in the client’s browser or not.
Modernizr.load({
test: Modernizr.geolocation,
yep : 'Script1.js',
nope: 'Script2.js'
});
test: The Modernizr property you want to detect.
yep: The location of the script you want to load if the test succeeds. Use an array for multiple scripts.
nope: The location of the script you want to load if the test fails. Use an array for multiple scripts.
3. Modernizr.[HTML5 feature name]? can be used to implement fallback behavior if the browser does not support given HTML5 feature.
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
No comments:
Post a Comment