- Modernizr
-
Modernizr Stable release 2.0.6 Written in JavaScript Type JavaScript library License MIT, BSD Website modernizr.com Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS 3 specifications.
Contents
Overview
Many of the features (technologies from HTML5 and CSS 3) are already implemented in at least one major browser. Modernizr tells you whether the current browser has implemented a given feature. This lets developers take advantage of the new features in the browsers that support them, yet create a fallback in the browsers that lack support for that feature.
How it works
Modernizr analyzes the browser's user agent property, as well as uses feature detection, to discern what a browser can and cannot do. It uses both (rather than just the user agent) 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.
Modernizr tests for over 40 next-generation features, then creates a JavaScript object (named "Modernizr") that contains the results of these tests as boolean properties. It adds classes to the HTML element based on what features are and are not natively supported.
Tests
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
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
Modernizr does not add missing functionality to browsers; it detects native availability of features.
Examples
Modernizr JavaScript Example:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - Javascript Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="modernizr.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { if (Modernizr.websockets) { $("#result").html('Your browser has support for Web Sockets'); } else { $("#result").html('Your browser does not support Web Sockets'); } }); </script> </head> <body> <p id="result"></p> </body> </html>
Modernizr CSS example:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - CSS Example</title> <style type="text/css" media="screen"> div.wsno, div.wsyes { display: none } .no-websockets div.wsno { display: block } .websockets div.wsyes { display: block } </style> <script src="modernizr.js" type="text/javascript"></script> </head> <body> <div class="wsno"> Your browser does not support WebSockets. </div> <div class="wsyes"> Your browser supports WebSockets. </div> </body> </html>
See also
- Feature detection
- HTML
- HTML5
- HTML5 Shiv
- HTML5 File API
- HTML5 in mobile devices
- JavaScript
- Web Workers
- Web Sockets
- WebGL
References
- http://projects.ischool.washington.edu/ URL
- http://www.alistapart.com/articles/URL
- HTML5/Url
- dive/URL
- W3 HTML5/URL
- Daniel/Url
- codeproject/url
- http://drupal.org/project/url
External links
Categories:- HTML
- World Wide Web Consortium standards
Wikimedia Foundation. 2010.
