Modernizr Documentation

What is Modernizr?

Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your users’ browsers. Rather than guessing a browser’s feature set based on unreliable “UA sniffing,” Modernizr uses feature detection to inform you of the actual capabilities of the browser, at runtime.

With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.

What is feature detection?

In the “dark ages of the web” (ca. 1998–2008), developers often had to resort to UA sniffing in order to determine if their users would be able to make use of AwesomeNewFeature. In practice, that means doing something like the following:

  if (browser === "the-one-they-make-you-use-at-work") {
    getTheOldBasicExperience();
  } else {
    showOffAwesomeNewFeature();
  }

Now that looks ok, right? We are using AwesomeNewFeature, and of course it isn’t supported in an old crusty browser like that, right? That could very well be the case - today. But what if the next version of that browser adds support for AwesomeNewFeature? Now you have to go back and audit your code, updating every single place that you are doing this check. That is assuming that you have the time to find out about every feature update for every single browser. And then you realize that it’s even worse: the new feature actually works in the latest browser, but all those users (your friends back at the office) each getTheOldBasicExperience, thanks to this code.

Users can actually go into their browser and OS settings and change the name of the browser (or user-agent - what you compare against in code when performing “UA sniffing”) to whatever they would like. At that point, your code is hurting more than helping, blocking out users who may actually support all of your features, and possibly letting those in who don’t. Broken experiences all around—thankfully, there is a better way!

It’s called Feature Detection, and it looks more like this:

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldBasicExperience();
  }

Rather than basing your decisions on whether or not the user is on the one-they-make-you-use-at-work browser, and assuming that means they either do or do not have access to AwesomeNewFeature, feature detection programmatically checks if AwesomeNewFeature actually works in the browser, and gives you either a true or false result. So now as soon as your least favorite browser adds support for AwesomeNewFeature, your code works better in it, automatically! No more having to update. Ever. The code ends up being similar, but much more clear to its actual intention.

Downloading Modernizr

Unlike most JavaScript libraries, Modernizr does not have a single, base modernizr.js file. Instead, when you head over to the Download page, you first have to specifically select the features you want to use in your project. This way, we can provide the smallest file possible, which means a faster website for you. Once you have made your selection, just hit the Build button and you’ve got your own custom build of Modernizr, hot off the presses! And helpfully, the build includes a source comment with a link to recreate your configuration, in case you want to add or remove a feature in the future.

You may notice that in addition to the Build output there are additional options: Command Line Config, Grunt Config, and “Open build on codepen.io”.

Command Line Config

Since 3.0, Modernizr also ships its build system as a node module on npm. That means that you can quickly create multiple builds of Modernizr for different projects, without even having to open a new browser tab.

Once you have npm installed, you can install the Modernizr command line tool by running:

npm install -g modernizr

Now you are ready to start making your custom build! You can download the configuration file from the build menu (under "Command Line Config"). This will give you a JSON file that you will give to the Modernizr module to make your custom build.

modernizr -c modernizr-config.json

Note that you will need to give the command line config the file path to the configuration you downloaded from the site. In the above example, we are running the modernizr command from the same folder that we downloaded the modernizr-config.json file to.

Grunt Config

If you do not want to manually run your build from the command line every time you update your site, you also have the option to download a Grunt task to do it for you. This configuration file can be used with grunt-modernizr to automatically build your custom version. Just add it to your Gruntfile, and you are off to the races.

Note that you will need to update the provided configuration file with paths to the devFile and outputFile. More documentation is available on the grunt-modernizr documentation

Open build on codepen.io

This option is simply a link that populates a new Pen on CodePen, an online code editor for front-end web development that lets you test-drive HTML, CSS and JavaScript code snippets. The newly-created Pen will demonstrate your configured options in your current browser by way of listing your selected features in green (supported) or red (……not supported) as HTML output.

Configuration Options

In addition to the available options and “feature detects”, there are a handful of additional configuration options:

classPrefix - default: ""

A string that is added before each CSS class. A value of mzr- turns the output class no-cssgradients into mzr-no-cssgradients.

enableJSClass - default: true

Whether or not to update .no-js to .js on the root element.

enableClasses - default: true

Whether or not Modernizr should add its CSS classes at all to the <html> element when run on a webpage.

See the next section for more information on those options.

Using Modernizr with CSS

Modernizr’s classes

By default, Modernizr sets classes for all of your tests on the root element (<html> for websites). This means adding the class for each feature when it is supported, and adding it with a no- prefix when it is not (e.g. .feature or .no-feature). This makes it super simple to add features in via progressive enhancement!

Say you include Modernizr’s detection for CSS gradients. Depending on the browser, it will result in either <html class="cssgradients"> or <html class="no-cssgradients">. Now that you know those two states, you can write CSS to cover both cases:

.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

classPrefix

If one of Modernizr’s class names clashes with one of your preexisting classes, you have the option to add a classPrefix inside of your config. Consider the hidden detect, which adds a .hidden class - something a lot of code bases already use to, well, hide things. If you wanted to use that specific detection, you could use the following as your configuration:

{
  "classPrefix": "foo-",
  "feature-detects": ["dom/hidden"]
}

This would mean that rather than <html class="hidden">, you would get <html class="foo-hidden">.

no-js

By default, Modernizr will rewrite <html class="no-js"> to <html class="js">. This lets hide certain elements that should only be exposed in environments that execute JavaScript. If you want to disable this change, you can set enableJSClass to false in your config.

If you are using a classPrefix, such as supports-, then you must include that prefix on your html element. ie. supports-no-js instead of no-js.

enableClasses

If you do not want Modernizr to add any of its classes, you can set enableClasses to false. This does not affect the .no-js update, so if you do not want that updated either, you will need to set enableJSClass to false in your configuration.

Using Modernizr with JavaScript

The Modernizr object

Modernizr keeps track of the results of all of its feature detections via the Modernizr object. That means that for each test, a corresponding property will be added. You just have to test for truthiness in your code to figure out what you want to do:

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldBasicExperience();
  }

Helper methods

Modernizr optionally exposes a number of additional functions, that you can read more about in Modernizr API

Modernizr API

Features detected by Modernizr

Detect	CSS class/JS property
Ambient Light Events	ambientlight
Detects support for the API that provides information about the ambient light levels, as detected by the device's light detector, in terms of lux units.
Application Cache	applicationcache
Detects support for the Application Cache, for storing data to enable web-based applications run offline. The API has been heavily criticized and discussions are underway to address this.
HTML5 Audio Element	audio
Detects support of the audio element, as well as testing what types of content it supports. Subproperties are provided to describe support for `ogg`, `mp3`,`opus`, `wav` and `m4a` formats, e.g.: `Modernizr.audio // true Modernizr.audio.ogg // 'probably'`
Battery API	batteryapi
Detect support for the Battery API, for accessing information about the system's battery charge level.
Blob constructor	blobconstructor
Detects support for the Blob constructor, for creating file-like objects of immutable, raw data.
Canvas	canvas
Detects support for the `<canvas>` element for 2D drawing.
Canvas text	canvastext
Detects support for the text APIs for `<canvas>` elements.
Content Editable	contenteditable
Detects support for the `contenteditable` attribute of elements, allowing their DOM text contents to be edited directly by the user.
Context menus	contextmenu
Detects support for custom context menus.
Cookies	cookies
Detects whether cookie support is enabled.
Cross-Origin Resource Sharing	cors
Detects support for Cross-Origin Resource Sharing: method of performing XMLHttpRequests across domains.
Web Cryptography	cryptography
Detects support for the cryptographic functionality available under window.crypto.subtle
Custom Elements API	customelements
Detects support for the Custom Elements API, to create custom html elements via js
Custom protocol handler	customprotocolhandler
Detects support for the `window.registerProtocolHandler()` API to allow websites to register themselves as possible handlers for particular protocols.
CustomEvent	customevent
Detects support for CustomEvent.
Dart	dart
Detects native support for the Dart programming language.
DataView	dataview
Detects support for the DataView interface for reading data from an ArrayBuffer as part of the Typed Array spec.
Emoji	emoji
Detects support for emoji character sets.
Event Listener	eventlistener
Detects native support for addEventListener
EXIF Orientation	exiforientation
Detects support for EXIF Orientation in JPEG images. iOS looks at the EXIF Orientation flag in JPEGs and rotates the image accordingly. Most desktop browsers just ignore this data.
Flash	flash
Detects Flash support as well as Flash-blocking plugins
Force Touch Events	forcetouch
Tests whether the browser supports the detection of Force Touch Events. Force Touch Events allow custom behaviours and interactions to take place based on the given pressure or change in pressure from a compatible trackpad. Force Touch events are available in OS X 10.11 and later on devices equipped with Force Touch trackpads.
Fullscreen API	fullscreen
Detects support for the ability to make the current website take over the user's entire screen
GamePad API	gamepads
Detects support for the Gamepad API, for access to gamepads and controllers.
Geolocation API	geolocation
Detects support for the Geolocation API for users to provide their location to web applications.
Hashchange event	hashchange
Detects support for the `hashchange` event, fired when the current location fragment changes.
Hidden Scrollbar	hiddenscroll
Detects overlay scrollbars (when scrollbars on overflowed blocks are visible). This is found most commonly on mobile and OS X.
History API	history
Detects support for the History API for manipulating the browser session history.
HTML Imports	htmlimports
Detects support for HTML import, a feature that is used for loading in Web Components.
IE8 compat mode	ie8compat
Detects whether or not the current browser is IE8 in compatibility mode (i.e. acting as IE7).
IndexedDB	indexeddb
Detects support for the IndexedDB client-side storage API (final spec).
IndexedDB Blob	indexeddbblob
Detects if the browser can save File/Blob objects to IndexedDB
Input attributes	input
Detects support for HTML5 `<input>` element attributes and exposes Boolean subproperties with the results: `Modernizr.input.autocomplete Modernizr.input.autofocus Modernizr.input.list Modernizr.input.max Modernizr.input.min Modernizr.input.multiple Modernizr.input.pattern Modernizr.input.placeholder Modernizr.input.required Modernizr.input.step`
input[search] search event	inputsearchevent
There is a custom `search` event implemented in webkit browsers when using an `input[search]` element.
Form input types	inputtypes
Detects support for HTML5 form input types and exposes Boolean subproperties with the results: `Modernizr.inputtypes.color Modernizr.inputtypes.date Modernizr.inputtypes.datetime Modernizr.inputtypes['datetime-local'] Modernizr.inputtypes.email Modernizr.inputtypes.month Modernizr.inputtypes.number Modernizr.inputtypes.range Modernizr.inputtypes.search Modernizr.inputtypes.tel Modernizr.inputtypes.time Modernizr.inputtypes.url Modernizr.inputtypes.week`
Internationalization API	intl
Detects support for the Internationalization API which allow easy formatting of number and dates and sorting string based on a locale
JSON	json
Detects native support for JSON handling functions.
Font Ligatures	ligatures
Detects support for OpenType ligatures
Reverse Ordered Lists	olreversed
Detects support for the `reversed` attribute on the `<ol>` element.
MathML	mathml
Detects support for MathML, for mathematic equations in web pages.
Media Source Extensions API	mediasource
Detects support the Media Source Extensions API, which allows JavaScript to send byte streams to media codecs within web browsers that support HTML5 video.
Message Channel	messagechannel
Detects support for Message Channels, a way to communicate between different browsing contexts like iframes, workers, etc..
Notification	notification
Detects support for the Notifications API
Page Visibility API	pagevisibility
Detects support for the Page Visibility API, which can be used to disable unnecessary actions and otherwise improve user experience.
Navigation Timing API	performance
Detects support for the Navigation Timing API, for measuring browser and connection performance.
DOM Pointer Events API	pointerevents
Detects support for the DOM Pointer Events API, which provides a unified event interface for pointing input devices, as implemented in IE10+, Edge and Blink.
Pointer Lock API	pointerlock
Detects support the pointer lock API which allows you to lock the mouse cursor to the browser window.
postMessage	postmessage
Detects support for the `window.postMessage` protocol for cross-document messaging. `Modernizr.postmessage.structuredclones` reports if `postMessage` can send objects.
Proximity API	proximity
Detects support for an API that allows users to get proximity related information from the device's proximity sensor.
Proxy Object	proxy
Detects support for the Proxy object which is used to create dynamic proxies.
QuerySelector	queryselector
Detects support for querySelector.
Quota Storage Management API	quotamanagement
Detects the ability to request a specific amount of space for filesystem access
requestAnimationFrame	requestanimationframe
Detects support for the `window.requestAnimationFrame` API, for offloading animation repainting to the browser for optimized performance.
ServiceWorker API	serviceworker
ServiceWorkers (formerly Navigation Controllers) are a way to persistently cache resources to built apps that work better offline.
SVG	svg
Detects support for SVG in `<embed>` or `<object>` elements.
Template strings	templatestrings
Template strings are string literals allowing embedded expressions.
Text Encoding/Decoding	textencoder,textdecoder
Touch Events	touchevents
Indicates if the browser supports the W3C Touch Events API. This does not necessarily reflect a touchscreen device: Older touchscreen devices only emulate mouse events Modern IE touch devices implement the Pointer Events API instead: use `Modernizr.pointerevents` to detect support for that Some browsers & OS setups may enable touch APIs when no touchscreen is connected Future browsers may implement other event models for touch interactions See this article: You Can't Detect A Touchscreen. It's recommended to bind both mouse and touch/pointer events simultaneously – see this HTML5 Rocks tutorial. This test will also return `true` for Firefox 4 Multitouch support.
Typed arrays	typedarrays
Detects support for native binary data manipulation via Typed Arrays in JavaScript. Does not check for DataView support; use `Modernizr.dataview` for that.
Unicode Range	unicoderange
Unicode characters	unicode
Detects if unicode characters are supported in the current document.
IE User Data API	userdata
Detects support for IE userData for persisting data, an API similar to localStorage but supported since IE5.
Vibration API	vibrate
Detects support for the API that provides access to the vibration mechanism of the hosting device, to provide tactile feedback.
HTML5 Video	video
Detects support for the video element, as well as testing what types of content it supports. Subproperties are provided to describe support for `ogg`, `h264`, `h265`, `webm`, `vp9`, `hls` and `av1` formats, e.g.: `Modernizr.video // true Modernizr.video.ogg // 'probably'`
VML	vml
Detects support for VML.
Web Intents	webintents
Detects native support for the Web Intents APIs for service discovery and inter-application communication. Chrome added support for this in v19, but removed it again in v24 because of "a number of areas for development in both the API and specific user experience in Chrome". No other browsers currently support it, however a JavaScript shim is available.
Web Animation API	webanimations
Detects support for the Web Animation API, a way to create css animations in js
WebGL	webgl
WebSockets Support	websockets
XDomainRequest	xdomainrequest
Detects support for XDomainRequest in IE9 & IE8
a[download] Attribute	adownload
When used on an `<a>`, this attribute signifies that the resource it points to should be downloaded by the browser rather than navigating to it.
Audio Autoplay	audioautoplay
Checks for support of the autoplay attribute of the audio element.
Audio Loop Attribute	audioloop
Detects if an audio element can automatically restart, once it has finished
Audio Preload	audiopreload
Detects if audio can be downloaded in the background before it starts playing in the `<audio>` element
Web Audio API	webaudio
Detects the older non standard webaudio API, (as opposed to the standards based AudioContext API)
Low Battery Level	lowbattery
Enable a developer to remove CPU intensive CSS/JS when battery is low
canvas blending support	canvasblending
Detects if Photoshop style blending modes are available in canvas.
canvas.toDataURL type support	todataurljpeg,todataurlpng,todataurlwebp
canvas winding support	canvaswinding
Determines if winding rules, which controls if a path can go clockwise or counterclockwise
getRandomValues	getrandomvalues
Detects support for the window.crypto.getRandomValues method for generating cryptographically secure random numbers
cssall	cssall
Detects support for the `all` css property, which is a shorthand to reset all css properties (except direction and unicode-bidi) to their original value
CSS Animations	cssanimations
Detects whether or not elements can be animated using CSS
Appearance	appearance
Detects support for the `appearance` css property, which is used to make an element inherit the style of a standard user interface element. It can also be used to remove the default styles of an element, such as input and buttons.
Backdrop Filter	backdropfilter
Detects support for CSS Backdrop Filters, allowing for background blur effects like those introduced in iOS 7. Support for this was added to iOS Safari/WebKit in iOS 9.
CSS Background Blend Mode	backgroundblendmode
Detects the ability for the browser to composite backgrounds using blending modes similar to ones found in Photoshop or Illustrator.
CSS Background Clip Text	backgroundcliptext
Detects the ability to control specifies whether or not an element's background extends beyond its border in CSS
Background Position Shorthand	bgpositionshorthand
Detects if you can use the shorthand method to define multiple parts of an element's background-position simultaneously. eg `background-position: right 10px bottom 10px`
Background Position XY	bgpositionxy
Detects the ability to control an element's background position using css
Background Repeat	bgrepeatspace,bgrepeatround
Detects the ability to use round and space as properties for background-repeat
Background Size	backgroundsize
Background Size Cover	bgsizecover
Border Image	borderimage
Border Radius	borderradius
Box Decoration Break	boxdecorationbreak
Specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
Box Shadow	boxshadow
Box Sizing	boxsizing
CSS Calc	csscalc
Method of allowing calculated values for length units. For example: `//lem { width: calc(100% - 3em); }`
CSS :checked pseudo-selector	checked
CSS Font ch Units	csschunit
CSS Columns	csscolumns
CSS Grid (old & new)	cssgrid,cssgridlegacy
CSS Cubic Bezier Range	cubicbezierrange
CSS Custom Properties	customproperties
CSS Display run-in	display-runin
CSS Display table	displaytable
`display: table` and `table-cell` test. (both are tested under one name `table-cell` )
CSS text-overflow ellipsis	ellipsis
CSS.escape()	cssescape
Tests for `CSS.escape()` support.
CSS Font ex Units	cssexunit
CSS Filters	cssfilters
Flexbox	flexbox
Detects support for the Flexible Box Layout model, a.k.a. Flexbox, which allows easy manipulation of layout order and sizing within a container.
Flexbox (legacy)	flexboxlegacy
Flexbox (tweener)	flexboxtweener
Flex Gap	flexgap
Flex Line Wrapping	flexwrap
Detects support for the `flex-wrap` CSS property, part of Flexbox, which isn’t present in all Flexbox implementations (notably Firefox). This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return `true` for either of these implementations, as long as the `flex-wrap` property is supported. So to ensure the modern syntax is supported, use together with `Modernizr.flexbox`: if (Modernizr.flexbox && Modernizr.flexwrap) { // Modern Flexbox with `flex-wrap` supported } else { // Either old Flexbox syntax, or `flex-wrap` not supported }
CSS :focus-within pseudo-selector	focuswithin
Font Display	fontdisplay
Detects support for the `font-display` descriptor, which defines how font files are loaded and displayed by the browser.
@font-face	fontface
CSS Generated Content	generatedcontent
CSS Gradients	cssgradients
CSS Hairline	hairline
Detects support for hidpi/retina hairlines, which are CSS borders with less than 1px in width, for being physically 1px on hidpi screens.
CSS HSLA Colors	hsla
CSS Hyphens	csshyphens,softhyphens,softhyphensfind
CSS :invalid pseudo-class	cssinvalid
Detects support for the ':invalid' CSS pseudo-class.
CSS :last-child pseudo-selector	lastchild
CSS Mask	cssmask
CSS Media Queries	mediaqueries
CSS Multiple Backgrounds	multiplebgs
CSS :nth-child pseudo-selector	nthchild
Detects support for the ':nth-child()' CSS pseudo-selector.
CSS Object Fit	objectfit
CSS Opacity	opacity
CSS Overflow Scrolling	overflowscrolling
CSS Pointer Events	csspointerevents
CSS position: sticky	csspositionsticky
CSS Generated Content Animations	csspseudoanimations
CSS Generated Content Transitions	csspseudotransitions
CSS Reflections	cssreflections
CSS Regions	regions
CSS Font rem Units	cssremunit
CSS UI Resize	cssresize
Test for CSS 3 UI "resize" property
CSS rgba	rgba
CSS Stylable Scrollbars	cssscrollbar
Scroll Snap Points	scrollsnappoints
Detects support for CSS Snap Points
CSS Shapes	shapes
CSS general sibling selector	siblinggeneral
CSS Subpixel Fonts	subpixelfont
CSS Supports	supports
CSS :target pseudo-class	target
Detects support for the ':target' CSS pseudo-class.
CSS text-align-last	textalignlast
CSS textDecoration	textdecoration
CSS textshadow	textshadow
CSS Transforms	csstransforms
CSS Transforms 3D	csstransforms3d
CSS Transforms Level 2	csstransformslevel2
CSS Transform Style preserve-3d	preserve3d
Detects support for `transform-style: preserve-3d`, for getting a proper 3D perspective on elements.
CSS Transitions	csstransitions
CSS user-select	userselect
CSS :valid pseudo-class	cssvalid
Detects support for the ':valid' CSS pseudo-class.
Variable Open Type Fonts	variablefonts
CSS vh unit	cssvhunit
CSS vmax unit	cssvmaxunit
CSS vmin unit	cssvminunit
CSS vw unit	cssvwunit
will-change	willchange
Detects support for the `will-change` css property, which formally signals to the browser that an element will be animating.
CSS wrap-flow	wrapflow
classList	classlist
createElement with Attributes	createelementattrs,createelement-attrs
dataset API	dataset
Document Fragment	documentfragment
Append multiple elements to the DOM within a single insertion.
[hidden] Attribute	hidden
Does the browser support the HTML5 [hidden] attribute?
Intersection Observer	intersectionobserver
Determines if Intersection Observer API is available.
microdata	microdata
DOM4 MutationObserver	mutationobserver
Determines if DOM4 MutationObserver support is available.
Passive event listeners	passiveeventlisteners
Detects support for the passive option to addEventListener.
Shadow DOM API	shadowroot
Detects support for the Shadow DOM API.
Shadow DOM API (Legacy)	shadowrootlegacy
Detects support for the Shadow DOM API. (Legacy)
bdi Element	bdi
Detect support for the bdi element, a way to have text that is isolated from its possibly bidirectional surroundings
datalist Element	datalistelem
details Element	details
output Element	outputelem
picture Element	picture
progress Element	progressbar,meter
ruby, rp, rt Elements	ruby
Template Tag	template
time Element	time
Track element and Timed Text Track	texttrackapi,track
Unknown Elements	unknownelements
Does the browser support HTML with non-standard / new elements?
ES5 Array	es5array
Check if browser implements ECMAScript 5 Array per specification.
ES5 Date	es5date
Check if browser implements ECMAScript 5 Date per specification.
ES5 Function	es5function
Check if browser implements ECMAScript 5 Function per specification.
ES5 Object	es5object
Check if browser implements ECMAScript 5 Object per specification.
ES5	es5
Check if browser implements everything as specified in ECMAScript 5.
ES5 Strict Mode	strictmode
Check if browser implements ECMAScript 5 Object strict mode.
ES5 String	es5string
Check if browser implements ECMAScript 5 String per specification.
ES5 Syntax	es5syntax
Check if browser accepts ECMAScript 5 syntax.
ES5 Immutable Undefined	es5undefined
Check if browser prevents assignment to global `undefined` per ECMAScript 5.
ES6 Array	es6array
Check if browser implements ECMAScript 6 Array per specification.
ES6 Arrow Functions	arrow
Check if browser implements ECMAScript 6 Arrow Functions per specification.
ES6 Class	es6class
Check if browser implements ECMAScript 6 class.
ES6 Collections	es6collections
Check if browser implements ECMAScript 6 Map, Set, WeakMap and WeakSet
ES5 String.prototype.contains	contains
Check if browser implements ECMAScript 6 `String.prototype.contains` per specification.
ES6 Generators	generators
Check if browser implements ECMAScript 6 Generators per specification.
ES6 Math	es6math
Check if browser implements ECMAScript 6 Math per specification.
ES6 Number	es6number
Check if browser implements ECMAScript 6 Number per specification.
ES6 Object	es6object
Check if browser implements ECMAScript 6 Object per specification.
ES6 Promises	promises
Check if browser implements ECMAScript 6 Promises per specification.
ES6 Rest parameters	restparameters
Check if browser implements ECMAScript 6 Rest parameters per specification.
ES6 Spread array	spreadarray
Check if browser implements ECMAScript 6 spread syntax (in array and function calls)
ES6 Template Strings	stringtemplate
Check if browser implements ECMAScript 6 String template.
ES6 String	es6string
Check if browser implements ECMAScript 6 String per specification.
ES6 Symbol	es6symbol
Check if browser implements ECMAScript 6 Symbol per specification.
ES7 Array	es7array
Check if browser implements ECMAScript 7 Array per specification.
ES7 Rest destructuring	restdestructuringarray,restdestructuringobject
Check if browser implements ECMAScript 7 Destructuring Assignment per specification.
ES7 Spread object	spreadobject
Check if browser implements ECMAScript 7 object spread syntax
ES8 Object	es8object
Check if browser implements ECMAScript 8 Object.
Orientation and Motion Events	devicemotion,deviceorientation
Part of Device Access aspect of HTML5, same category as geolocation. `devicemotion` tests for Device Motion Event support, returns boolean value true/false. `deviceorientation` tests for Device Orientation Event support, returns boolean value true/false
onInput Event	oninput
`oninput` tests if the browser is able to detect the input event
File API	filereader
`filereader` tests for the File API specification Tests for objects specific to the File API W3C specification without being redundant (don't bother testing for Blob since it is assumed to be the File object's prototype.)
Filesystem API	filesystem
input[capture] Attribute	capture
When used on an `<input>`, this attribute signifies that the resource it takes should be generated via device's camera, camcorder, sound recorder.
input[file] Attribute	fileinput
Detects whether input type="file" is available on the platform E.g. iOS < 6, some android versions and embedded Chrome WebViews don't support this
input[directory] Attribute	directory
When used on an `<input type="file">`, the `directory` attribute instructs the user agent to present a directory selection dialog instead of the usual file selection dialog.
input[form] Attribute	formattribute
Detects whether input form="form_id" is available on the platform E.g. IE 10 (and below), don't support this
input[type="number"] Localization	localizednumber
Detects whether input type="number" is capable of receiving and displaying localized numbers, e.g. with comma separator.
placeholder attribute	placeholder
Tests for placeholder attribute in inputs and textareas
form#requestAutocomplete()	requestautocomplete
When used with input[autocomplete] to annotate a form, form.requestAutocomplete() shows a dialog in Chrome that speeds up checkout flows (payments specific for now).
Form Validation	formvalidation
This implementation only tests support for interactive form validation. To check validation for a specific type or a specific other constraint, the test can be combined: `Modernizr.inputtypes.number && Modernizr.formvalidation` (browser supports rangeOverflow, typeMismatch etc. for type=number) `Modernizr.input.required && Modernizr.formvalidation` (browser supports valueMissing)
iframe[sandbox] Attribute	sandbox
Test for `sandbox` attribute in iframes.
iframe[seamless] Attribute	seamless
Test for `seamless` attribute in iframes.
iframe[srcdoc] Attribute	srcdoc
Test for `srcdoc` attribute in iframes.
Animated PNG	apng
Test for animated png support.
Image crossOrigin	imgcrossorigin
Detects support for the crossOrigin attribute on images, which allow for cross domain images inside of a canvas without tainting it
JPEG 2000	jpeg2000
Test for JPEG 2000 support
JPEG XR (extended range)	jpegxr
Test for JPEG XR support
image and iframe native lazy loading	lazyloading
Test for the loading attribute of images and iframes
sizes attribute	sizes
Test for the `sizes` attribute on images
srcset attribute	srcset
Test for the srcset attribute of images
Webp Alpha	webpalpha
Tests for transparent webp support.
Webp Animation	webpanimation
Tests for animated webp support.
Webp Lossless	webplossless,webp-lossless
Tests for non-alpha lossless webp support.
Webp	webp
Tests for lossy, non-alpha webp support. Tests for all forms of webp support (lossless, lossy, alpha, and animated).. Modernizr.webp // Basic support (lossy) Modernizr.webp.lossless // Lossless Modernizr.webp.alpha // Alpha (both lossy and lossless) Modernizr.webp.animation // Animated WebP
input formaction	inputformaction
Detect support for the formaction attribute on form inputs
input formenctype	inputformenctype
Detect support for the formenctype attribute on form inputs, which overrides the form enctype attribute
input formmethod	inputformmethod
Detect support for the formmethod attribute on form inputs
input formnovalidate	inputformnovalidate
Detect support for the formnovalidate attribute on form inputs, which overrides the form novalidate attribute
input formtarget	inputformtarget
Detect support for the formtarget attribute on form inputs, which overrides the form target attribute
Hover Media Query	hovermq
Detect support for Hover based media queries
Pointer Media Query	pointermq
Detect support for Pointer based media queries
Beacon API	beacon
Detects support for an API that allows for asynchronous transfer of small HTTP data from the client to a server.
Connection Effective Type	connectioneffectivetype
Detects support for determining signal bandwidth via `navigator.connection.effectiveType`
Low Bandwidth Connection	lowbandwidth
Tests for determining low-bandwidth via `navigator.connection` There are two iterations of the `navigator.connection` interface. The first is present in Android 2.2+ and only in the Browser (not WebView) http://docs.phonegap.com/en/1.2.0/phonegap_connection_connection.md.html#connection.type https://davidbcalhoun.com/2010/using-navigator-connection-android The second is speced at https://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html and perhaps landing in WebKit https://bugs.webkit.org/show_bug.cgi?id=73528 Unknown devices are assumed as fast For more rigorous network testing, consider boomerang.js: https://github.com/bluesmoon/boomerang/
Server Sent Events	eventsource
Tests for server sent events aka eventsource.
Fetch API	fetch
Detects support for the fetch API, a modern replacement for XMLHttpRequest.
XHR responseType='arraybuffer'	xhrresponsetypearraybuffer
Tests for XMLHttpRequest xhr.responseType='arraybuffer'.
XHR responseType='blob'	xhrresponsetypeblob
Tests for XMLHttpRequest xhr.responseType='blob'.
XHR responseType='document'	xhrresponsetypedocument
Tests for XMLHttpRequest xhr.responseType='document'.
XHR responseType='json'	xhrresponsetypejson
Tests for XMLHttpRequest xhr.responseType='json'.
XHR responseType='text'	xhrresponsetypetext
Tests for XMLHttpRequest xhr.responseType='text'.
XHR responseType	xhrresponsetype
Tests for XMLHttpRequest xhr.responseType.
XML HTTP Request Level 2 XHR2	xhr2
Tests for XHR2.
script[async]	scriptasync
Detects support for the `async` attribute on the `<script>` element.
script[defer]	scriptdefer
Detects support for the `defer` attribute on the `<script>` element.
Speech Recognition API	speechrecognition
Speech Synthesis API	speechsynthesis
Local Storage	localstorage
Session Storage	sessionstorage
Web SQL Database	websqldatabase
style[scoped]	stylescoped
Support for the `scoped` attribute of the `<style>` element.
SVG as an <img> tag source	svgasimg
SVG clip paths	svgclippaths
Detects support for clip paths in SVG (only, not on HTML content). See this discussion regarding applying SVG clip paths to HTML content.
SVG filters	svgfilters
SVG foreignObject	svgforeignobject
Detects support for foreignObject tag in SVG.
Inline SVG	inlinesvg
Detects support for inline SVG in HTML (not within XHTML).
SVG SMIL animation	smil
textarea maxlength	textareamaxlength
Detect support for the maxlength attribute of a textarea element
Blob URLs	bloburls
Detects support for creating Blob URLs
Data URI	datauri
Detects support for data URIs. Provides a subproperty to report support for data URIs over 32kb in size: `Modernizr.datauri // true Modernizr.datauri.over32kb // false in IE8`
URL parser	urlparser
Check if browser implements the URL constructor for parsing URLs.
URLSearchParams API	urlsearchparams
Detects support for an API that provides utility methods for working with the query string of a URL.
Video Autoplay	videoautoplay
Checks for support of the autoplay attribute of the video element.
Video crossOrigin	videocrossorigin
Detects support for the crossOrigin attribute on video tag
Video Loop Attribute	videoloop
Video Preload Attribute	videopreload
PublicKeyCredential	publickeycredential
Detects support for PublicKeyCredential as part of the Web Authentication API (also known as webauthn)
WebGL Extensions	webglextensions
Detects support for OpenGL extensions in WebGL. It's `true` if the WebGL extensions API is supported, then exposes the supported extensions as subproperties, e.g.: `if (Modernizr.webglextensions) { // WebGL extensions API supported } if ('OES_vertex_array_object' in Modernizr.webglextensions) { // Vertex Array Objects extension supported }`
RTC Data Channel	datachannel
Detect for the RTCDataChannel API that allows for transfer data directly from one peer to another
getUserMedia	getusermedia
Detects support for the new Promise-based `getUserMedia` API.
RTC Peer Connection	peerconnection
Binary WebSockets	websocketsbinary
Base 64 encoding/decoding	atobbtoa
Detects support for WindowBase64 API (window.atob && window.btoa).
Framed window	framed
Tests if page is iframed.
matchMedia	matchmedia
Detects support for matchMedia.
Workers from Blob URIs	blobworkers
Detects support for creating Web Workers from Blob URIs.
Workers from Data URIs	dataworkers
Detects support for creating Web Workers from Data URIs.
Shared Workers	sharedworkers
Detects support for the `SharedWorker` API from the Web Workers spec.
Transferables Objects	transferables
Detects whether web workers can use `transferables` objects.
Web Workers	webworkers
Detects support for the basic `Worker` API from the Web Workers spec. Web Workers provide a simple means for web content to run scripts in background threads.