What is modenizr and What is the use of it in Web development?

Solution

As we all know that HTML5 and CSS3 came with cool features, but before using it we must understand that browser implemented prior to HTML5 and CSS3 release does not support them & they are still used by users.

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser. 

To add Modernizr, download the file from official page. Then, on your website 's head tag, add a link to the file. For example:

<script src="path/to/modernizr-1.0.min.js"></script>

The second step is to include on your html tag a class "no-js" as shown below:

<html class="no-js">

For example:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr - JavaScript Example</title>
	
	<script src="path/to/modernizr.js"></script>
	<script>
		if ( Modernizr.websockets ) {
                        alert("Your browser supports WebSockets");
		} else {
			alert("Your browser does not supports WebSockets");
		}
	</script>
</head>
<body>
	Modernizr - Example
</body>
</html>

Share this thread

Comments

Comments
comments powered by Disqus

Navigation

Social Media