Modernizr is a JavaScript library which is designed to detect HTML5 and CSS3 features in various browsers , which allows JavaScript to be avoided by using a set of features or 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 feature. [6] [7] [8] [9] This is a new feature of the game. 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. [10]

Function

Modernizr uses feature detection, rather than checking the browser’s property, to discern what a browser can and can not do. It is more likely that the same rendering of the engine can be used. In addition, some users change their user’s domain to their browsers, but their browsers have 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 is not natively supported.

To perform feature detection tests, Modernizr often creates an element, sets a specific style. Web browsers that understand the instruction will return something sensitive; browsers that do not understand it will return nothing or “undefined”. Modernizr uses the result to assess whether this feature is supported by the web browser.

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

Running

When it runs, it creates a global object called 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 shapes ... Some!
 } else {
 // no native canvas support available :(
 }

Limitations

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

Examples

Modernizr JavaScript example

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 is
 whether or not WebSockets is supported by the user's browser. * /
. no-websockets . wsno ,
.websockets . wsyes { display : block ; }
</ style >
< src script = "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 > < / p >
</ html >

See also

  • List of JavaScript libraries

References

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