W3cubDocs

/Modernizr

Modernizr

What is Modernizr?

Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers. Rather than blacklisting entire ranges of browsers based on “UA sniffing,” Modernizr uses feature detection to allow you to easily tailor your user's experiences based on the actual capabilities of their browser.

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 web development, we often had to resort to UA sniffing in order to determine if their user's would be able to make use of Awesome-New-Feature™. In practice, that means doing something like the following

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

Now that looks ok, right? We are using Awesome-New-Feature™, 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 Awesome-New-Feature™? 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. Worse still, until you realize that it actually works in the newest version, all of those users back at the office getTheOldLameExperience, for no reason whatsoever.

Those users - given a substandard website for apparently no reason - can actually go into their browser and OS settings and change the name of the browser (or user-agent - what we compare against in code when performing a UA sniff) to whatever they would like. At that point - your code is meaningless. You are blocking out users who may actually support all of your features, and possibly letting those in who don't. Nearly everyone gets a broken experience. There has to be a better way!

There is, and it is called Feature Detection, and it looks more like this

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

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 Awesome-New-Feature™, feature detection actually programmatically checks if Awesome-New-Feature™ 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 Awesome-New-Feature™, your code works there - automatically! No more having to update, ever. The code ends up being similar, but much more clear to its actual intention

Downloading Modernizr

A lot has changed since the last version of Modernizr. There no longer is a single, base modernizr.js file. Instead, just head over to the Download page as you could have previously, and 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 done that, just hit the Build button and you’ve got your own custom build of Modernizr, hot off the presses!

You may notice that in addition to the Build output, where you have been able to download custom builds one at a time for years now - there are two new options.

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 get your 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 for grunt-modernizr here

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.

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

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.

enableClasses

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.

Finally, if you do not want Modernizr to add any of it's classes, you can set enableClasses to false. This does not effect 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 it's 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 {
  getTheOldLameExperience();
}

Helper methods

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

Modernizr API

Modernizr.on

Modernizr.on(feature,cb)

Modernizr.on('flash', function( result ) {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

Modernizr.addTest

Modernizr.addTest(feature,test)

The most common way of creating your own feature detects is by calling Modernizr.addTest with a string (preferably just lowercase, without any punctuation), and a function you want executed that will return a boolean result

Modernizr.addTest('itsTuesday', function() {
 var d = new Date();
 return d.getDay() === 2;
});

When the above is run, it will set Modernizr.itstuesday to true when it is tuesday, and to false every other day of the week. One thing to notice is that the names of feature detect functions are always lowercased when added to the Modernizr object. That means that Modernizr.itsTuesday will not exist, but Modernizr.itstuesday will. Since we only look at the returned value from any feature detection function, you do not need to actually use a function. For simple detections, just passing in a statement that will return a boolean value works just fine.

Modernizr.addTest('hasJquery', 'jQuery' in window);

Just like before, when the above runs Modernizr.hasjquery will be true if jQuery has been included on the page. Not using a function saves a small amount of overhead for the browser, as well as making your code much more readable. Finally, you also have the ability to pass in an object of feature names and their tests. This is handy if you want to add multiple detections in one go. The keys should always be a string, and the value can be either a boolean or function that returns a boolean.

var detects = {
 'hasjquery': 'jQuery' in window,
 'itstuesday': function() {
   var d = new Date();
   return d.getDay() === 2;
 }
}
Modernizr.addTest(detects);

There is really no difference between the first methods and this one, it is just a convenience to let you write more readable code.

Modernizr.atRule

Modernizr.atRule(prop)

var keyframes = Modernizr.atRule('@keyframes');
if (keyframes) {
  // keyframes are supported
  // could be `@-webkit-keyframes` or `@keyframes`
} else {
  // keyframes === `false`
}

Modernizr._domPrefixes

Modernizr._domPrefixes is exactly the same as _prefixes, but rather than kebab-case properties, all properties are their Capitalized variant

Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ];

Modernizr.hasEvent

Modernizr.hasEvent(eventName,[element])

Modernizr.hasEvent lets you determine if the browser supports a supplied event. By default, it does this detection on a div element

hasEvent('blur') // true;

However, you are able to give an object as a second argument to hasEvent to detect an event on something other than a div.

hasEvent('devicelight', window) // true;

Modernizr.mq

Modernizr.mq(mq)

Modernizr.mq allows for you to programmatically check if the current browser window state matches a media query.

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
  // the browser window is larger than 900px
}

Only valid media queries are supported, therefore you must always include values with your media query

// good
 Modernizr.mq('(min-width: 900px)');
// bad
 Modernizr.mq('min-width');

If you would just like to test that media queries are supported in general, use

Modernizr.mq('only all'); // true if MQ are supported, false if not

Note that if the browser does not support media queries (e.g. old IE) mq will always return false.

Modernizr.prefixed

Modernizr.prefixed(prop,[obj],[elem])

Modernizr.prefixed takes a string css value in the DOM style camelCase (as opposed to the css style kebab-case) form and returns the (possibly prefixed) version of that property that the browser actually supports. For example, in older Firefox...

prefixed('boxSizing')

returns 'MozBoxSizing' In newer Firefox, as well as any other browser that support the unprefixed version would simply return boxSizing. Any browser that does not support the property at all, it will return false. By default, prefixed is checked against a DOM element. If you want to check for a property on another object, just pass it as a second argument

var rAF = prefixed('requestAnimationFrame', window);
raf(function() {
 renderFunction();
})

Note that this will return the actual function - not the name of the function. If you need the actual name of the property, pass in false as a third argument

var rAFProp = prefixed('requestAnimationFrame', window, false);
rafProp === 'WebkitRequestAnimationFrame' // in older webkit

One common use case for prefixed is if you're trying to determine which transition end event to bind to, you might do something like...

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd', * Saf 6, Android Browser
    'MozTransition'    : 'transitionend',       * only for FF < 15
    'transition'       : 'transitionend'        * IE10, Opera, Chrome, FF 15+, Saf 7+
};
var transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

If you want a similar lookup, but in kebab-case, you can use prefixedCSS.

Modernizr.prefixedCSS

Modernizr.prefixedCSS(prop)

Modernizr.prefixedCSS is like Modernizr.prefixed, but returns the result in hyphenated form

Modernizr.prefixedCSS('transition') // '-moz-transition' in old Firefox

Since it is only useful for CSS style properties, it can only be tested against an HTMLElement. Properties can be passed as both the DOM style camelCase or CSS style kebab-case.

Modernizr.prefixedCSSValue

Modernizr.prefixedCSSValue(prop,value)

Modernizr.prefixedCSSValue is a way test for prefixed css properties (e.g. display: -webkit-flex)

Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

Modernizr._prefixes

Modernizr._prefixes is the internal list of prefixes that we test against inside of things like prefixed and prefixedCSS. It is simply an array of kebab-case vendor prefixes you can use within your code. Some common use cases include Generating all possible prefixed version of a CSS property

var rule = Modernizr._prefixes.join('transform: rotate(20deg); ');
rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'

Generating all possible prefixed version of a CSS value

rule = 'display:' +  Modernizr._prefixes.join('flex; display:') + 'flex';
rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'

Modernizr.testAllProps

Modernizr.testAllProps(prop,[value],[skipValueTest])

testAllProps determines whether a given CSS property, in some prefixed form, is supported by the browser.

testAllProps('boxSizing')  // true

It can optionally be given a CSS value in string form to test if a property value is valid

testAllProps('display', 'block') // true
testAllProps('display', 'penguin') // false

A boolean can be passed as a third parameter to skip the value check when native detection (@supports) isn't available.

testAllProps('shapeOutside', 'content-box', true);

Modernizr.testProp

Modernizr.testProp(prop,[value],[useValue])

Just like testAllProps, only it does not check any vendor prefixed version of the string. Note that the property name must be provided in camelCase (e.g. boxSizing not box-sizing)

Modernizr.testProp('pointerEvents')  // true

You can also provide a value as an optional second argument to check if a specific value is supported

Modernizr.testProp('pointerEvents', 'none') // true
Modernizr.testProp('pointerEvents', 'penguin') // false

Modernizr.testStyles

Modernizr.testStyles(rule,callback,[nodes],[testnames])

Modernizr.testStyles takes a CSS rule and injects it onto the current page along with (possibly multiple) DOM elements. This lets you check for features that can not be detected by simply checking the IDL.

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) {
  // elem is the first DOM node in the page (by default #modernizr)
  // rule is the first argument you supplied - the CSS rule in string form
  addTest('widthworks', elem.style.width === '9px')
});

If your test requires multiple nodes, you can include a third argument indicating how many additional div elements to include on the page. The additional nodes are injected as children of the elem that is returned as the first argument to the callback.

Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) {
  document.getElementById('modernizr').style.width === '1px'; // true
  document.getElementById('modernizr2').style.width === '2px'; // true
  elem.firstChild === document.getElementById('modernizr2'); // true
}, 1);

By default, all of the additional elements have an ID of modernizr[n], where n is its index (e.g. the first additional, second overall is #modernizr2, the second additional is #modernizr3, etc.). If you want to have more meaningful IDs for your function, you can provide them as the fourth argument, as an array of strings

Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) {
  elem.firstChild === document.getElementById('foo'); // true
  elem.lastChild === document.getElementById('bar'); // true
}, 2, ['foo', 'bar']);

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 the audio element

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 search

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.

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.

Proximity API proximity

Detects support for an API that allows users to get proximity related information from the device's proximity sensor.

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.

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 and webm 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 animation

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 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 simultaniously.

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 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 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 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-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 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?

microdata microdata
DOM4 MutationObserver mutationobserver

Determines if DOM4 MutationObserver support is available.

Passive event listeners passiveeventlisteners

Detects support for the passive option to addEventListener.

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 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 String es6string

Check if browser implements ECMAScript 6 String per specification.

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 and some android version 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

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 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.

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
  • http://davidbcalhoun.com/2010/using-navigator-connection-android

The second is specced at http://dev.w3.org/2009/dap/netinfo/ 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
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.

© 2009–2020 The Modernizr team
Licensed under the MIT License.
https://modernizr.com/docs/