Modernizr
Modernizr
Modernizr logo.png
Original author(s) Faruk Ate?
Developer(s) Faruk Ate?, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors
Initial release July 1, 2009; 7 years ago (2009-07-01)[1]
Stable release
3.5.0 / April 13, 2017; 2 months ago (2017-04-13)[2]
Repository github.com/Modernizr/Modernizr
Written in JavaScript
Type JavaScript library
License MIT; it was dual-licensed MIT-BSD from June 14, 2010[3] to September 15, 2012[4]
Website modernizr.com

Modernizr is a JavaScript library which is designed to detect HTML5 and CSS3 features in various browsers, which lets JavaScript avoid using unimplemented features or use a workaround such as a shim to emulate them. Modernizr aims to provide this feature detection in a complete and standardized manner.[5]

Overview

Many HTML5 and CSS 3 features are already implemented in at least one major browser. Modernizr determines whether the user's browser has implemented a given feature.[6][7][8][9] This lets developers take advantage of new features that browsers support, yet create fallbacks for browsers that lack support. In both 2010 and 2011, Modernizr won the .net Award for Open Source App of the Year, and in 2011 one of its lead developers, Paul Irish, won the Developers of the Year award.[10]

Function

Modernizr uses feature detection, rather than checking the browser's property, to discern what a browser can and cannot do. It considers feature detection more reliable since the same rendering engine may not necessarily support the same things in two different browsers using that engine. In addition, some users change their user agent string to get around websites that block features for browsers with specific user agent settings, despite their browsers having the necessary capabilities.

Modernizr offers tests for more than 250 features, then creates a JavaScript object (named "Modernizr") that contains the results of these tests as boolean properties. It also adds classes to the HTML element based on what features are and are not natively supported.

To perform feature detection tests, Modernizr often creates an element, sets a specific style instruction on that element and then immediately tries to retrieve that setting. Web browsers that understand the instruction will return something sensible; browsers that don't understand it will return nothing or "undefined". Modernizr uses the result to assess whether that feature is supported by the web browser.

Many tests in the documentation come with a small code sample to illustrate how a specific test can be used in web development workflow.

Running

When it runs, it creates a global object called Modernizr that contains a set of Boolean properties for each feature it can detect. For example, if a browser supports the canvas API, the Modernizr.canvas property will be true. If the browser does not support the canvas API, the Modernizr.canvas property will be false:

  if (Modernizr.canvas) {
    // let's draw some shapes...!
  } else {
    // no native canvas support available :(
  }

Limitations

The library is simply a feature-detection method and as such, does not add missing functionality to older browsers.[11]

Examples

Modernizr JavaScript example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr - JavaScript Example</title>
	
	<script src="path/to/modernizr.js"></script>
</head>
<body>
	<p id="result"></p>

	<script>
		elem = document.getElementById('result');
		if ( Modernizr.websockets ) {
			elem.innerHTML = 'Your browser supports WebSockets.';
                        alert("Your browser supports WebSockets");
		} else {
			elem.innerHTML ='Your browser does not support WebSockets.' ;
		}
	</script>
</body>
</html>

CSS example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr - CSS Example</title>
	
	<style>
		.wsno,
		.wsyes { display: none; }
		/* Modernizr will add one of the following classes to the HTML element based on
                   whether or not WebSockets is supported by the user's browser. */
		.no-websockets .wsno,
		.websockets .wsyes { display: block; }
	</style>
	
	<script src="path/to/modernizr.js"></script>
</head>
<body>
	
	<p class="wsno">Your browser does not support WebSockets.</p>
	
	<p class="wsyes">Your browser supports WebSockets.</p>
</body>
</html>

See also

References

  1. ^ Faruk Ate? (1 July 2009). "Proudly Announcing Modernizr". 
  2. ^ "Releases · Modernizr/Modernizr". 
  3. ^ "Modernizr 1.5: new features, unit tests added". Modernizr. 14 June 2010. Retrieved 2013. 
  4. ^ "Remove BSD license and improve readme". GitHub. 15 September 2012. Retrieved 2013. 
  5. ^ "Modernizr". Retrieved 2016. What is Modernizr? 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. 
  6. ^ Faruk Ate? (June 22, 2010). "Taking Advantage of HTML5 and CSS3 with Modernizr". 
  7. ^ Gil Fink (Jan 10, 2011). "Detecting HTML5 Features Using Modernizr". 
  8. ^ Daniel Sellergren (Feb 2011). "Using Modernizr to Determine HTML5 CSS3 Support". 
  9. ^ David Powers. "Using Modernizr to detect HTML5 and CSS3 browser support". 
  10. ^ .net Awards 2011:#7. Open Source App of the Year: Modernizr 2.0, #16. Developer of the Year: Paul Irish
  11. ^ "HTML 5 elements in IE". Retrieved . 

External links


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Modernizr
 
Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your IT knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us