Modernizr

from Wikipedia, the free encyclopedia
Modernizr

Logo by Modernizr
Basic data

developer Faruk Ateş with the help of Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and 185 GitHub community contributors
Publishing year 2009
Current  version 3.7.1
(March 14, 2019)
operating system Platform independent
programming language JavaScript
category Feature Recognition (English detection feature )
License MIT license ; dual licensed MIT- BSD from June 14, 2010 to September 15, 2012
German speaking No
modernizr.com

Modernizr one is JavaScript - library , which allows HTML5 and CSS3 features in different browsers to recognize. This enables JavaScript to bypass non-existent features or to call up workarounds , such as a shim , in order to emulate them. Modernizr aims to completely standardize the recognition of browser features.

overview

Many new HTML5 and CSS 3 features are already available in at least one of the major browsers. Modernizr recognizes whether the current browser has implemented a certain feature. This allows developers to take advantage of new features in supporting browsers and to develop fallbacks for browsers that do not offer these new features.

Functionality

Modernizr relies on feature detection , instead of using the browser properties to check whether the browser can do something or not. The developers assume that feature detection is more reliable because the same HTML renderer does not necessarily provide the same functionality in different browsers and browser versions. In addition, the user agent can have been changed by the user, especially in order to simulate websites that expect certain browser functionalities.

Modernizr provides more than 250 tests for " next generation features ", then it creates a JavaScript object (called "Modernizr") that contains the test results as a Boolean value . It also extends the HTML element with classes that reflect the test results.

In order to recognize certain CSS features, Modernizr often creates elements, assigns them certain CSS styles and tries to check them, since browsers that implement the respective CSS feature return something meaningful, while nothing else or values ​​like " undefined " will be returned.

Many of the tests in the documentation include a practical example to demonstrate how a particular test can be used.

commitment

Modernizr starts independently. There is no initialization function that needs to be called. After Modernizr finishes, it creates a global "Modernizr" object that contains Boolean values. For example, if a browser supports the Canvas API , Modernizr.canvas will output " true ", otherwise " false ". 

  if (Modernizr.canvas) {
    // Der Browser unterstützt Canvas
  } else {
    // Der Browser unterstützt Canvas nicht
  }

Limitations

Modernizr does not add missing functionalities to the browser or simulate them. This is the job of so-called shims like the HTML5 Shiv , this JavaScript library adds support for HTML5 elements in Internet Explorer versions prior to 9, such polyfills are also listed in the Modernizr documentation.

Examples

JavaScript example

 1 <!DOCTYPE html>
 2 <html class="no-js" lang="en">
 3 <head>
 4 	<title>Modernizr – JavaScript Beispiel</title>
 5 
 6 	<script src="path/to/modernizr.js"></script>
 7 </head>
 8 <body>
 9 	<p id="result"></p>
10 
11 	<script>
12 		elem = document.getElementById('result');
13 		if (! Modernizr.websockets ) {
14 			elem.innerHTML = 'Dieser Browser unterstützt keine WebSockets.';
15 		} else {
16 			elem.innerHTML = 'Dieser Browser unterstützt WebSockets.';
17 		}
18 	</script>
19 </body>
20 </html>

CSS example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr – CSS Beispiel</title>

	<style>
		.wsno,
		.wsyes { display: none; }
		/* Modernizr wird dem HTML-Objekt eine der folgenden Klassen zuweisen,
                   je nachdem ob der Browser WebSockets unterstützt oder nicht. */
		.no-websockets .wsno,
		.websockets .wsyes { display: block; }
	</style>

	<script src="path/to/modernizr.js"></script>
</head>
<body>

	<p class="wsno">Dieser Browser unterstützt keine WebSockets.</p>

	<p class="wsyes">Dieser Browser unterstützt WebSockets.</p>
</body>
</html>

Awards and honors

In both 2010 and 2011 Modernizr won the " .net Award for Open Source App of the Year " and in 2011 one of the main developers, Paul Irish, won the " Developer of the Year " award. The website won first and second place respectively in the " List of Top Web Design Trends for 2012 " by net magazine in the categories of progressive improvement and responsive web design .

See also

Web links

Individual evidence

  1. ↑ a b Faruk Ateş: Modernizr goes 1.0! . In: Modernizr. Retrieved November 14, 2015 .
  2. ^ Contributors . In: GitHub. Retrieved November 14, 2015 .
  3. ↑ Modernizr homepage. In: Modernizr. Retrieved November 14, 2015 (see page footer for list of main developers).
  4. ↑ a b Releases . In: GitHub. Retrieved on August 14, 2019 .
  5. ↑ a b c Modernizr documentation. What is Modernizr . Retrieved on November 14, 2015 (English): " Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers. "
  6. ↑ Modernizr on Github. License. In: GitHub . Retrieved November 14, 2015 .
  7. ↑ Modernizr 1.5: new features, unit tests added . In: Modernizr. June 14, 2015, accessed November 14, 2015 .
  8. ↑ Removal of the BSD license. In: GitHub. Retrieved November 14, 2015 .
  9. ↑ modernizr.com .
  10. ↑ Faruk Ateş: Proudly Announcing: Modernizr. In: Faruk Ateş. July 1, 2009, accessed December 25, 2015 .
  11. ^ Gil Fink: Detecting HTML5 Features Using Modernizr. In: http://www.codeproject.com/ . January 10, 2011, accessed December 25, 2015 .
  12. ↑ Daniel Sellergren: Using Modernizr to Determine HTML5 CSS3 support. February 2011, archived from the original on August 22, 2013 ; accessed on December 25, 2015 .
  13. ^ David Powers: Using Modernizr to detect HTML5 and CSS3 browser support. In: Adobe . August 29, 2011, accessed December 25, 2015 .
  14. ↑ HTML 5 elements in IE.
  15. ↑ HTML5 Cross Browser Polyfills
  16. ↑ .net Awards 2011: # 7. ( Memento from March 11, 2014 in the Internet Archive )
  17. ↑ 15 top web design and development trends for 2012. ( Memento from September 11, 2013 in the Internet Archive ) In: .net