Modernizr

{{Infobox software

| name = Modernizr

| title = Modernizr

| logo = Modernizr logo.svg

| logo size =

| screenshot =

| caption =

| collapsible =

| author = Faruk Ateş

| developer = Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors

| released = {{Start date and age|2009|07|01}}{{cite web | url = http://farukat.es/journal/2009/07/271-proudly-announcing-modernizr | title = Proudly Announcing Modernizr | author = Faruk Ateş | date=1 July 2009}}

| discontinued =

| latest release version = 3.13.1

| latest release date = {{Start date and age|2024|8|6}}{{cite web|url=https://github.com/Modernizr/Modernizr/releases|title=Releases · Modernizr/Modernizr|website=GitHub |language=en|accessdate=6 December 2024}}

| latest preview version =

| latest preview date =

| programming language = JavaScript

| platform =

| size =

| language =

| genre = JavaScript library

| license = MIT; it was dual-licensed MIT-BSD from June 14, 2010{{cite web|url=http://modernizr.com/news/modernizr-15/|title=Modernizr 1.5: new features, unit tests added|date=14 June 2010|accessdate=30 July 2013|publisher=Modernizr}} to September 15, 2012{{cite web|url=https://github.com/Modernizr/Modernizr/pull/694|title=Remove BSD license and improve readme|date=15 September 2012|accessdate=30 July 2013|publisher=GitHub}}

| website = {{URL|https://modernizr.com/}}

}}

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.{{cite web | url=https://modernizr.com/docs/#what-is-modernizr | title=What is Modernizr | accessdate=25 December 2019}}

Overview

Many HTML5 and CSS 3 features are already implemented in at least one major browser.{{citation needed|date=May 2022}} Modernizr determines whether the user's browser has implemented a given feature.{{cite web | url = http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr | title = Taking Advantage of HTML5 and CSS3 with Modernizr | author = Faruk Ateş | date = June 22, 2010}}{{cite web | url = http://www.codeproject.com/Articles/144372/Detecting-HTML5-Features-Using-Modernizr | title = Detecting HTML5 Features Using Modernizr|author = Gil Fink | date = Jan 10, 2011}}{{cite web|url=http://danielsellergren.com/2011/02/using-modernizr-to-determine-html5css3-support/ | title = Using Modernizr to Determine HTML5 CSS3 Support|author=Daniel Sellergren|date=Feb 2011|url-status=dead|archiveurl = https://web.archive.org/web/20130822001705/http://danielsellergren.com/2011/02/using-modernizr-to-determine-html5css3-support/ | archivedate = 2013-08-22}}{{cite web|url = http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html | title = Using Modernizr to detect HTML5 and CSS3 browser support|author=David Powers}} 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.[http://www.netmagazine.com/features/net-awards-2011-winners .net Awards 2011:#7. Open Source App of the Year: Modernizr 2.0, #16. Developer of the Year: Paul Irish]

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 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 features are and are not natively supported.

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 do not understand it will return nothing or "undefined". Modernizr uses the result to assess whether that feature is supported by the web browser.{{citation needed|date=October 2019}}

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.{{cite web | url = http://modernizr.com/docs/#html5inie | title = HTML 5 elements in IE | author = | date = | publisher = | accessdate = 2012-06-14}}