Table of Contents Categories
Modernizr
Topic: Software
From HandWiki - Reading time: 4 min
 | |
| 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[1] |
| Stable release | 3.13.1
/ August 6, 2024[2] |
| Written in | JavaScript |
| Type | JavaScript library |
| License | MIT; it was dual-licensed MIT-BSD from June 14, 2010[3] to September 15, 2012[4] |
Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser is not supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.[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 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 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 runs feature tests in the browser and stores the results on a global JavaScript object named Modernizr. It also adds matching classes to the root <html> element, so JavaScript and CSS can use different code paths depending on what the browser supports.[11][12]
Some Modernizr tests need more than a simple property check. For those cases, Modernizr can create temporary elements or inject test styles, then check how the browser handles them. This lets it detect support for features that are only visible through actual DOM or CSS behavior.[13]
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.[14]
Examples
Modernizr JavaScript example
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Modernizr - JavaScript Example</title>
</head>
<body>
<p id="result">Modernizr won't run if JavaScript is not enabled.</p>
</body>
<script src="path/to/modernizr.js"></script>
<script>
elem = document.getElementById('result');
if (Modernizr.websockets) {
elem.innerHTML = 'Your browser supports WebSockets.';
} else {
elem.innerHTML ='Your browser does not support WebSockets.' ;
}
</script>
</html>
CSS example
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Modernizr - CSS Example</title>
<style>
.wsno,
.wsyes,
.js .no-js { 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>
</head>
<body>
<p class="wsno">Your browser does not support WebSockets.</p>
<p class="wsyes">Your browser supports WebSockets.</p>
<p class="no-js">Modernizr won’t run if javascript is not enabled.</p>
</body>
<script src="path/to/modernizr.js"></script>
</html>
See also
References
- ↑ Faruk Ateş (1 July 2009). "Proudly Announcing Modernizr". http://farukat.es/journal/2009/07/271-proudly-announcing-modernizr.
- ↑ "Releases · Modernizr/Modernizr" (in en). https://github.com/Modernizr/Modernizr/releases. Retrieved 6 December 2024.
- ↑ "Modernizr 1.5: new features, unit tests added". Modernizr. 14 June 2010. http://modernizr.com/news/modernizr-15/. Retrieved 30 July 2013.
- ↑ "Remove BSD license and improve readme". GitHub. 15 September 2012. https://github.com/Modernizr/Modernizr/pull/694. Retrieved 30 July 2013.
- ↑ "What is Modernizr". https://modernizr.com/docs/#what-is-modernizr. Retrieved 25 December 2019.
- ↑ Faruk Ateş (June 22, 2010). "Taking Advantage of HTML5 and CSS3 with Modernizr". http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr.
- ↑ Gil Fink (Jan 10, 2011). "Detecting HTML5 Features Using Modernizr". http://www.codeproject.com/Articles/144372/Detecting-HTML5-Features-Using-Modernizr.
- ↑ Daniel Sellergren (Feb 2011). "Using Modernizr to Determine HTML5 CSS3 Support". Archived from the original on 2013-08-22. https://web.archive.org/web/20130822001705/http://danielsellergren.com/2011/02/using-modernizr-to-determine-html5css3-support/.
- ↑ David Powers. "Using Modernizr to detect HTML5 and CSS3 browser support". http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html.
- ↑ .net Awards 2011:#7. Open Source App of the Year: Modernizr 2.0, #16. Developer of the Year: Paul Irish
- ↑ "Modernizr README". Modernizr. https://github.com/Modernizr/Modernizr.
- ↑ Ateş, Faruk (22 June 2010). "Taking Advantage of HTML5 and CSS3 with Modernizr". https://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr/.
- ↑ "Modernizr Documentation". https://modernizr.com/docs/.
- ↑ "HTML 5 elements in IE". http://modernizr.com/docs/#html5inie. Retrieved 2012-06-14.
External links
- No URL found. Please specify a URL here or add one to Wikidata.
 |  |
EncycloReader
is supported by the 
KSF