Modernizr is a

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

library A library is a collection of materials, books or media that are accessible for use and not just for display purposes. A library provides physical (hard copies) or digital access (soft copies) materials, and may be a physical location or a vir ...

that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser isn't 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 de ...

Overview

Many

HTML5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...

and

CSS 3 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technol ...

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 a evangelist in web technologies, including JavaScript and CSS. In 2011, he was named Developer of the Year by The Net Awards for ...

, 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 The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

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 is application software 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 screen. Browsers are used on ...

s 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 a specific test can be used in web development

workflow A workflow consists of an orchestrated and repeatable pattern 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 sequence of ...

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: Programs * Web browser, a program used to access the World Wide Web *Code browser, a program for navigating source code * File browser or file manager, a program used to manage files and related objects * ...

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