What is HTML5 Modernizr ?
Last Updated :
28 Dec, 2021
In today’s modern world, There are many features available in HTML and CSS and also very few browsers support all features. Sometimes it’s a very difficult task to find is our web browser will support these features or not. So, here Modernizr comes into the picture it is very useful in these scenarios. In this article, we will see what is HTML5 Modernizr and how we can use it.
HTML5 Modernizr: It is a JavaScript library that detects which next-generation web technologies feature our web browser supports. There are many new features that are being introduced in HTML and CSS but many browsers do not support these new features. So, Modernizr allows developers to test for some of the new technologies in HTML & CSS and then provide fallbacks for browsers that do not support them. For example, if a browser does not support a GIF video then we would like to display an mp4 video. WE can create CSS rules based on the feature and these rules would apply automatically on the webpage if the browser does not support a new feature.
Syntax:
Download the Modernizr library file and then add that file to the script tag of your HTML page.
<script src="modernizr-custom.js"></script>
Example: In this example, We will check whether our browser supports HTML5 video or not using Modernizr.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Modernizr Browser Check</title>
<script src="modernizr-custom.js"></script>
</head>
<body>
<h1>HTML5 Modernizr Browser Check</h1>
<script>
if (Modernizr.video) {
// If you browser supports video
// then this code will execute
alert("HTML5 Video is supported in your browser");
}
else {
// If our browser doesn't supports
// video then this code will execute
alert("HTML5 Video is not supported in your browser");
}
</script>
</body>
</html>
|
Output: I’m using the latest version of Google Chrome. So, My browser supports HTML5 video. If you will use the previous version then you will get an alert that your browser is not supported.
output
Share your thoughts in the comments
Please Login to comment...