Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to include Modernizr in HTML document?
Modernizr provides an easy way to detect any new feature so that you can take the corresponding action. For example, if a browser does not support video feature then you would like to display a simple page.
You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if the browser does not support a new feature.
Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies. There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers do not support these news features.
Let’s jump into the article to discuss more about how to include modernizr in HTML document.
What is Modernizr
Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers. Rather than blacklisting entire ranges of browsers based on “UA sniffing,” Modernizr uses feature detection to allow you to easily tailor your user's experiences based on the actual capabilities of their browser.
With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot. It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.
A simple piece of JavaScript code called Modernizr can automatically determine whether or not your users' browsers support next-generation web technologies. Instead of "UA sniffing"-based blacklisting of entire categories of browsers, Modernizr employs feature recognition to make it simple to customise your users' experiences according to their browsers' actual capabilities.
With the information Modernizr provides you, you can take advantage of these new capabilities in browsers that can display or use them while still having quick and dependable ways to take control of the issue for browsers that can't. It is a group of extremely quick tests, or "detects," as we like to call them, that run while your website loads. Then, you can use the outcomes to customise the experience to your preferences.
Syntax
Before you start using Modernizr, you would have to include its JavaScript library in your HTML page header as follows
<script src="modernizr.min.js" type="text/javascript"></script>
Example
Following is the program to detect a particular feature through JavaScript −
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/3.1.1/modernizr.custom.min.js
"></script>
</head>
<body>
<p>HTML5 Modernizr Browser Check</p>
<script>
if (Modernizr.video) {
alert("HTML5 Video is supported in your browser");
}
else {
alert("HTML5 Video is not supported in your browser");
}
</script>
</body>
</html>
Why modernizr needed
Every web developer encounters variations in browsers and devices. That's largely because of different feature sets; while we still need to support older browsers, the most recent iterations of the most widely used browsers are capable of some fantastic things that earlier browsers are unable do.
Utilize the newest capabilities in browsers that support them with Modernizr to create tier-based experiences without abandoning consumers who are less fortunate.
790 Views
