Modernizr

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Modernizr
Modernizr 2 Logo.png
Stable release 2.8.3
Written in JavaScript
Type JavaScript library
License MIT; it was dual-licensed MIT-BSD from June 14, 2010[1] to September 15, 2012[2]
Website modernizr.com

Modernizr is a JavaScript library which is designed to detect HTML5 and CSS3 features in various browsers. Since the specifications for both HTML5 and CSS3 are only partially implemented or nonexistent in many browsers, it can be difficult to determine which techniques are available for use in rendering a page, and when it is necessary to avoid using a feature or to load a workaround such as a shim to emulate the feature. Modernizr aims to provide this feature detection in a complete and standardized manner.[3]

Overview[edit]

Many HTML5 and CSS 3 features are already implemented in at least one major browser. Modernizr determines whether the current browser has implemented a given feature.[4][5][6][7] 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 Developer of the Year award.[8] The related subjects Progressive enhancement and Responsive design were #1 and #2 respectively on the .net list of Top Web Design Trends for 2012.[9]

How it works[edit]

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 over 150 next-generation 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.

Tests[edit]

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 you could use that specific test in your web development workflow.

Running[edit]

Modernizr runs automatically. There is no Modernizr.init() function to call. 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 your browser supports the canvas API, the Modernizr.canvas property will be true. If your 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 :(
  }

What Modernizr doesn't do[edit]

Modernizr does not add missing functionality to browsers. However, the HTML5 Shiv JavaScript library adds basic support for HTML5 elements in Internet Explorer prior to version 9,[10] and this and other such polyfills are listed on the Modernizr Wiki.[11]

Examples[edit]

Modernizr JavaScript example[edit]

<!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.';
		} else {
			elem.innerHTML ='Your browser does not support WebSockets.';
		}
	</script>
</body>
</html>

Modernizr CSS example[edit]

<!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[edit]

References[edit]

External links[edit]