Modernizr

Last updated
Modernizr
Original author(s) Faruk Ateş
Developer(s) Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors
Initial releaseJuly 1, 2009;14 years ago (2009-07-01) [1]
Stable release
3.12 / February 15, 2022;19 months ago (2022-02-15) [2]
Repository
Written in JavaScript
Type JavaScript library
License MIT; it was dual-licensed MIT-BSD from June 14, 2010 [3] to September 15, 2012 [4]
Website 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 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. [5]

Contents

Overview

Many HTML5 and CSS 3 features are already implemented in at least one major browser.[ citation needed ] Modernizr determines whether the user's browser has implemented a given feature. [6] [7] [8] [9] 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. [10]

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 don't understand it will return nothing or "undefined". Modernizr uses the result to assess whether that feature is supported by the web browser.[ citation needed ]

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. [11]

Examples

Modernizr JavaScript example

<!DOCTYPE html><htmlclass="no-js"lang="en"><head><title>Modernizr - JavaScript Example</title></head><body><pid="result">Modernizr won't run if JavaScript is not enabled.</p></body><scriptsrc="path/to/modernizr.js"></script><script>elem=document.getElementById('result');if(Modernizr.websockets){elem.innerHTML='Your browser supports WebSockets.';}else{elem.innerHTML='Your browser does not support WebSockets.';}</script></html>

CSS example

<!DOCTYPE html><htmlclass="no-js"lang="en"><head><title>Modernizr - CSS Example</title><style>.wsno,.wsyes,.js.no-js{display:none;}/* Modernizr will add one of the following classes to the HTML element based on                   whether or not WebSockets is supported by the user's browser. */.no-websockets.wsno,.websockets.wsyes{display:block;}</style></head><body><pclass="wsno">Your browser does not support WebSockets.</p><pclass="wsyes">Your browser supports WebSockets.</p><pclass="no-js">Modernizr won’t run if javascript is not enabled.</p></body><scriptsrc="path/to/modernizr.js"></script></html>

See also

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">JavaScript</span> High-level programming language

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 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">HTML5</span> Fifth and current version of hypertext markup language

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 Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

<span class="mw-page-title-main">Internet Explorer 9</span> Web browser for Windows released in 2011

Internet Explorer 9 or IE9 is the ninth version of the Internet Explorer web browser for Windows. It was released by Microsoft on March 14, 2011, as the ninth version of Internet Explorer and the successor to Internet Explorer 8. Microsoft released Internet Explorer 9 as a major out-of-band version that was not tied to the release schedule of any particular version of Windows, unlike previous versions. It is the first version of Internet Explorer not to be bundled with a Windows operating system, although some OEMs have installed it with Windows 7 on their PCs. Internet Explorer 9 is the last version that is called Windows Internet Explorer. The software was rebranded simply as Internet Explorer starting in 2012 with the release of Internet Explorer 10.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

A web worker, as defined by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page. Web workers are often able to utilize multi-core CPUs more effectively.

The cache manifest in HTML5 was a software storage feature which provided the ability to access a web application even without a network connection. It became part of the W3C Recommendation on 28 October 2014.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python. Formally, "a polyfill is a shim for a browser API."

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

Google Chrome Experiments Online showroom of web browser based experiments

Google Chrome Experiments is an online showroom of web browser based experiments, interactive programs, and artistic projects. Launched on March 1, 2009, Google Chrome Experiments is an official Google website that was originally meant to test the limits of JavaScript and the Google Chrome browser's performance and abilities. As the project progressed, it took the role of showcasing and experimenting latest open-source web-based technologies, such as JavaScript, HTML5, WebGL, Canvas, SVG, CSS, and some others. All the projects on Chrome experiments are user submitted and are made using open source technologies. As of February 24, 2015, there were 1,000 different Chrome projects posted on the website.

<span class="mw-page-title-main">Paul Irish</span> American web developer

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 his contributions to the web development landscape and his participation in many popular open source projects.

Feature detection is a technique used in web development for handling differences between runtime environments, by programmatically testing for clues that the environment may or may not offer certain functionality. This information is then used to make the application adapt in some way to suit the environment: to make use of certain APIs, or tailor for a better user experience.

<span class="mw-page-title-main">JHipster</span> Web application generator

JHipster is a free and open-source application generator used to quickly develop modern web applications and Microservices using Angular or React and the Spring Framework.

<span class="mw-page-title-main">Phaser (game framework)</span> Cross-platform JavaScript video game framework

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software developed by Photon Storm.

References

  1. ↑ Faruk Ateş (1 July 2009). "Proudly Announcing Modernizr".
  2. ↑ "Releases · Modernizr/Modernizr". GitHub . Retrieved 7 September 2022.
  3. ↑ "Modernizr 1.5: new features, unit tests added". Modernizr. 14 June 2010. Retrieved 30 July 2013.
  4. ↑ "Remove BSD license and improve readme". GitHub. 15 September 2012. Retrieved 30 July 2013.
  5. ↑ "What is Modernizr" . Retrieved 25 December 2019.
  6. ↑ Faruk Ateş (June 22, 2010). "Taking Advantage of HTML5 and CSS3 with Modernizr".
  7. ↑ Gil Fink (Jan 10, 2011). "Detecting HTML5 Features Using Modernizr".
  8. ↑ Daniel Sellergren (Feb 2011). "Using Modernizr to Determine HTML5 CSS3 Support". Archived from the original on 2013-08-22.
  9. ↑ David Powers. "Using Modernizr to detect HTML5 and CSS3 browser support".
  10. ↑ .net Awards 2011:#7. Open Source App of the Year: Modernizr 2.0, #16. Developer of the Year: Paul Irish
  11. ↑ "HTML 5 elements in IE" . Retrieved 2012-06-14.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.