Modernizr is a

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

library A library is a collection of Book, books, and possibly other Document, materials and Media (communication), media, that is accessible for use by its members and members of allied institutions. Libraries provide physical (hard copies) or electron ...

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 Browser sniffing (also known as browser detection) is a set of techniques used in websites and web applications in order to determine the web browser a visitor is using, and to serve browser-appropriate content to the visitor. It is also used to d ...

Overview

Many

HTML5 HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommend ...

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. 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 Paul Irish is an American front-end engineer and a developer advocate for the Google Chrome web browser. He is an evangelist in web technologies, including JavaScript and CSS. In 2011, he was named Developer of the Year by The Net Awards f ...

, won the Developer of the Year award.

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

object (named "Modernizr") that contains the results of these tests as boolean properties. It also adds classes to the

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

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 browser A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...

s 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. Many tests in the documentation come with a small code sample to illustrate how a specific test can be used in web development

workflow Workflow is a generic term for orchestrated and repeatable patterns of activity, enabled by the systematic organization of resources into processes that transform materials, provide services, or process information. It can be depicted as a seque ...

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) else

Limitations

The library is simply a feature-detection method and as such, does not add missing functionality to older

browsers Browse, browser, or browsing may refer to: Computing *Browser service, a feature of Microsoft Windows to browse shared network resources *Code browser, a program for navigating source code *File browser or file manager, a program used to manage f ...

Examples

Modernizr JavaScript example

Modernizr - JavaScript Example

Modernizr won't run if JavaScript is not enabled.

CSS example

Modernizr - CSS Example

Your browser does not support WebSockets.

Your browser supports WebSockets.

Modernizr won’t run if javascript is not enabled.

References

External links

* {{Official website, https://www.modernizr.com/ JavaScript libraries Web design HTML World Wide Web Consortium standards Responsive web design Software using the MIT license