什么是 Modernizr?

¥What is Modernizr?

Modernizr 是一小段 JavaScript 代码,可自动检测用户浏览器中下一代 Web 技术的可用性。Modernizr 不是根据不可靠的“UA 嗅探”来猜测浏览器的功能集,而是使用 特性检测 在运行时通知你浏览器的实际功能。

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

有了 Modernizr 为你提供的这些知识,你就可以在可以渲染或利用它们的浏览器中进行 利用这些新功能,并且仍然可以轻松可靠地控制无法渲染或利用它们的浏览器的情况。

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

在“网络的黑暗时代”(大约 1998 年至 2008 年),开发者经常不得不诉诸 UA 嗅探,以确定他们的用户是否能够使用 AwesomeNewFeature 。实际上,这意味着执行如下操作:

¥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") {
  } else {

现在看起来没问题,对吧?我们正在使用 AwesomeNewFeature,当然,像这样的旧浏览器不支持它,对吗?情况很可能是这样 - 今天。但是,如果该浏览器的下一个版本添加了对 AwesomeNewFeature 的支持怎么办?现在你必须返回并审核你的代码,更新你正在执行此检查的每个位置。这是假设你有时间了解每个浏览器的每个功能更新。然后你意识到情况更糟:新功能实际上可以在最新的浏览器中运行,但所有这些用户(你在办公室的朋友)每个 getTheOldBasicExperience 都感谢此代码。

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

用户实际上可以进入他们的浏览器和操作系统设置并更改浏览器的名称(或 user-agent - 在执行“UA</abbr”时在代码中进行比较的内容) > 嗅”)到他们想要的任何东西。到那时,你的代码带来的伤害大于帮助,阻止了可能真正支持你所有功能的用户,并可能让那些不支持的用户进入。到处都是破碎的经历 - 谢天谢地,有更好的方法!

¥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!

它叫做 Feature Detection,看起来更像是这样:

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

  if (Modernizr.awesomeNewFeature) {
  } else {

功能检测不是根据用户是否使用 one-they-make-you-use-at-work 浏览器来做出决定,并假设他们有权或无权访问 AwesomeNewFeature,而是以编程方式检查 AwesomeNewFeature 是否确实在浏览器中运行,并为你提供 truefalse 结果。因此,现在一旦你最不喜欢的浏览器添加了对 AwesomeNewFeature 的支持,你的代码就会自动在其中运行得更好!不再需要更新。曾经。代码最终很相似,但更清楚地表达了其实际意图。

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

下载 Modernizr

¥Downloading Modernizr

与大多数 JavaScript 库不同,Modernizr 没有单个基本 modernizr.js 文件。相反,当你转到 下载 页面时,你首先必须专门选择要在项目中使用的功能。这样,我们可以提供尽可能小的文件,这意味着你的网站速度更快。一旦你做出选择,只需点击 Build 按钮,你就拥有了自己定制的 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.

你可能会注意到,除了 Build 输出之外,还有其他选项:命令行配置、Grunt 配置和“在 codepen.io 上打开构建”。

¥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

从 3.0 开始,Modernizr 还将其构建系统作为 npm 上的 node 模块提供。这意味着你可以为不同的项目快速创建 Modernizr 的多个版本,甚至无需打开新的浏览器选项卡。

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

拥有 安装了 npm 后,你可以通过运行以下命令来安装 Modernizr 命令行工具:

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

npm install -g modernizr

现在你已准备好开始进行定制构建!你可以从构建菜单(在 "命令行配置" 下)下载配置文件。这将为你提供一个 JSON 文件,你将将该文件提供给 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

请注意,你需要为命令行配置提供从站点下载的配置的文件路径。在上面的示例中,我们从下载 modernizr-config.json 文件的同一文件夹运行 modernizr 命令。

¥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 配置

¥Grunt Config

如果你不想每次更新站点时都从命令行手动运行构建,你还可以选择下载 Grunt 任务来为你执行此操作。此配置文件可与 grunt-modernizr 一起使用来自动构建你的自定义版本。只需将其添加到你的 Gruntfile 中,你就可以开始比赛了。

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

请注意,你需要使用 devFileoutputFile 的路径更新提供的配置文件。更多文档可在 grunt-modernizr 文档 上找到

¥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

在 codepen.io 上打开构建

¥Open build on codepen.io

此选项只是一个在 CodePen 上填充新 Pen 的链接,CodePen 是一个用于前端 Web 开发的在线代码编辑器,可让你测试驱动 HTML、CSS 和 JavaScript 代码片段。新创建的笔将通过以绿色(支持)或红色(……不支持)列出你选择的功能作为 HTML 输出来演示你在当前浏览器中配置的选项。

¥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 - 默认:""

¥classPrefix - default: ""

添加在每个 CSS 类之前的字符串。值 mzr- 将输出类别 no-cssgradients 转换为 mzr-no-cssgradients

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

enableJSClass - 默认:true

¥enableJSClass - default: true

是否将根元素上的 .no-js 更新为 .js

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

enableClasses - 默认:true

¥enableClasses - default: true

当在网页上运行时,Modernizr 是否应将其 CSS 类添加到 <html> 元素。

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

将 Modernizr 与 CSS 结合使用

¥Using Modernizr with CSS

Modernizr 的类

¥Modernizr’s classes

默认情况下,Modernizr 为根元素上的所有测试设置类(对于网站为 <html>)。这意味着在支持时为每个功能添加类,在不支持时添加 no- 前缀(例如 .feature.no-feature)。这使得通过渐进增强添加功能变得非常简单!

¥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!

假设你包含 Modernizr 对 CSS 渐变的检测。根据浏览器的不同,结果将是 <html class="cssgradients"><html class="no-cssgradients">。现在你知道了这两种状态,你可以编写 CSS 来涵盖这两种情况:

¥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);


如果 Modernizr 的某个类名与你先前存在的类之一冲突,你可以选择在 你的配置 内添加 classPrefix。考虑 hidden 检测,它添加了 .hidden 类 - 许多代码库已经使用它来隐藏东西。如果你想使用该特定检测,你可以使用以下配置:

¥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"]

这意味着你将得到 <html class="foo-hidden">,而不是 <html class="hidden">

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


默认情况下,Modernizr 会将 <html class="no-js"> 重写为 <html class="js">。这可以隐藏某些只应在执行 JavaScript 的环境中公开的元素。如果要禁用此更改,可以将 你的配置 中的 enableJSClass 设置为 false

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

如果你使用的是 classPrefix,例如 supports-,则必须在 html 元素上包含该前缀。IE。supports-no-js 而不是 no-js

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


如果你不希望 Modernizr 添加任何其类,你可以将 enableClasses 设置为 false。这不会影响 .no-js 更新,因此如果你也不希望更新,则需要在配置中将 enableJSClass 设置为 false

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

将 Modernizr 与 JavaScript 结合使用

¥Using Modernizr with JavaScript

Modernizr 对象

¥The Modernizr object

Modernizr 通过 Modernizr 对象跟踪所有特性检测的结果。这意味着对于每个测试,都会添加相应的属性。你只需在代码中测试 truthiness 即可确定你想要做什么:

¥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) {
  } else {


¥Helper methods

Modernizr 有选择地公开了许多附加功能,你可以在 Modernizr API 中阅读更多相关信息

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

Modernizr API

Modernizr 检测到的特性

检测CSS 类/JS 属性
Ambient Light Eventsambientlight

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 Cacheapplicationcache

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 Elementaudio

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 APIbatteryapi

Detect support for the Battery API, for accessing information about the system's battery charge level.

Blob constructorblobconstructor

Detects support for the Blob constructor, for creating file-like objects of immutable, raw data.


Detects support for the <canvas> element for 2D drawing.

Canvas textcanvastext

Detects support for the text APIs for <canvas> elements.

Content Editablecontenteditable

Detects support for the contenteditable attribute of elements, allowing their DOM text contents to be edited directly by the user.

Context menuscontextmenu

Detects support for custom context menus.


Detects whether cookie support is enabled.

Cross-Origin Resource Sharingcors

Detects support for Cross-Origin Resource Sharing: method of performing XMLHttpRequests across domains.

Web Cryptographycryptography

Detects support for the cryptographic functionality available under window.crypto.subtle

Custom Elements APIcustomelements

Detects support for the Custom Elements API, to create custom html elements via js

Custom protocol handlercustomprotocolhandler

Detects support for the window.registerProtocolHandler() API to allow websites to register themselves as possible handlers for particular protocols.


Detects support for CustomEvent.


Detects native support for the Dart programming language.


Detects support for the DataView interface for reading data from an ArrayBuffer as part of the Typed Array spec.


Detects support for emoji character sets.

Event Listenereventlistener

Detects native support for addEventListener

EXIF Orientationexiforientation

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.


Detects Flash support as well as Flash-blocking plugins

Force Touch Eventsforcetouch

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 APIfullscreen

Detects support for the ability to make the current website take over the user's entire screen

GamePad APIgamepads

Detects support for the Gamepad API, for access to gamepads and controllers.

Geolocation APIgeolocation

Detects support for the Geolocation API for users to provide their location to web applications.

Hashchange eventhashchange

Detects support for the hashchange event, fired when the current location fragment changes.

Hidden Scrollbarhiddenscroll

Detects overlay scrollbars (when scrollbars on overflowed blocks are visible). This is found most commonly on mobile and OS X.

History APIhistory

Detects support for the History API for manipulating the browser session history.

HTML Importshtmlimports

Detects support for HTML import, a feature that is used for loading in Web Components.

IE8 compat modeie8compat

Detects whether or not the current browser is IE8 in compatibility mode (i.e. acting as IE7).


Detects support for the IndexedDB client-side storage API (final spec).

IndexedDB Blobindexeddbblob

Detects if the browser can save File/Blob objects to IndexedDB

Input attributesinput

Detects support for HTML5 <input> element attributes and exposes Boolean subproperties with the results:

input[search] search eventinputsearchevent

There is a custom search event implemented in webkit browsers when using an input[search] element.

Form input typesinputtypes

Detects support for HTML5 form input types and exposes Boolean subproperties with the results:

Internationalization APIintl

Detects support for the Internationalization API which allow easy formatting of number and dates and sorting string based on a locale


Detects native support for JSON handling functions.

Font Ligaturesligatures

Detects support for OpenType ligatures

Reverse Ordered Listsolreversed

Detects support for the reversed attribute on the <ol> element.


Detects support for MathML, for mathematic equations in web pages.

Media Source Extensions APImediasource

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 Channelmessagechannel

Detects support for Message Channels, a way to communicate between different browsing contexts like iframes, workers, etc..


Detects support for the Notifications API

Page Visibility APIpagevisibility

Detects support for the Page Visibility API, which can be used to disable unnecessary actions and otherwise improve user experience.

Navigation Timing APIperformance

Detects support for the Navigation Timing API, for measuring browser and connection performance.

DOM Pointer Events APIpointerevents

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 APIpointerlock

Detects support the pointer lock API which allows you to lock the mouse cursor to the browser window.


Detects support for the window.postMessage protocol for cross-document messaging. Modernizr.postmessage.structuredclones reports if postMessage can send objects.

Proximity APIproximity

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

Proxy Objectproxy

Detects support for the Proxy object which is used to create dynamic proxies.


Detects support for querySelector.

Quota Storage Management APIquotamanagement

Detects the ability to request a specific amount of space for filesystem access


Detects support for the window.requestAnimationFrame API, for offloading animation repainting to the browser for optimized performance.

ServiceWorker APIserviceworker

ServiceWorkers (formerly Navigation Controllers) are a way to persistently cache resources to built apps that work better offline.


Detects support for SVG in <embed> or <object> elements.

Template stringstemplatestrings

Template strings are string literals allowing embedded expressions.

Text Encoding/Decodingtextencoder,textdecoder
Touch Eventstouchevents

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 arraystypedarrays

Detects support for native binary data manipulation via Typed Arrays in JavaScript.

Does not check for DataView support; use Modernizr.dataview for that.

Unicode Rangeunicoderange
Unicode charactersunicode

Detects if unicode characters are supported in the current document.

IE User Data APIuserdata

Detects support for IE userData for persisting data, an API similar to localStorage but supported since IE5.

Vibration APIvibrate

Detects support for the API that provides access to the vibration mechanism of the hosting device, to provide tactile feedback.

HTML5 Videovideo

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'

Detects support for VML.

Web Intentswebintents

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 APIwebanimations

Detects support for the Web Animation API, a way to create css animations in js

WebSockets Supportwebsockets

Detects support for XDomainRequest in IE9 & IE8

a[download] Attributeadownload

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 Autoplayaudioautoplay

Checks for support of the autoplay attribute of the audio element.

Audio Loop Attributeaudioloop

Detects if an audio element can automatically restart, once it has finished

Audio Preloadaudiopreload

Detects if audio can be downloaded in the background before it starts playing in the <audio> element

Web Audio APIwebaudio

Detects the older non standard webaudio API, (as opposed to the standards based AudioContext API)

Low Battery Levellowbattery

Enable a developer to remove CPU intensive CSS/JS when battery is low

canvas blending supportcanvasblending

Detects if Photoshop style blending modes are available in canvas.

canvas.toDataURL type supporttodataurljpeg,todataurlpng,todataurlwebp
canvas winding supportcanvaswinding

Determines if winding rules, which controls if a path can go clockwise or counterclockwise


Detects support for the window.crypto.getRandomValues method for generating cryptographically secure random numbers


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 Animationscssanimations

Detects whether or not elements can be animated using CSS


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 Filterbackdropfilter

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 Modebackgroundblendmode

Detects the ability for the browser to composite backgrounds using blending modes similar to ones found in Photoshop or Illustrator.

CSS Background Clip Textbackgroundcliptext

Detects the ability to control specifies whether or not an element's background extends beyond its border in CSS

Background Position Shorthandbgpositionshorthand

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 XYbgpositionxy

Detects the ability to control an element's background position using css

Background Repeatbgrepeatspace,bgrepeatround

Detects the ability to use round and space as properties for background-repeat

Background Sizebackgroundsize
Background Size Coverbgsizecover
Border Imageborderimage
Border Radiusborderradius
Box Decoration Breakboxdecorationbreak

Specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

Box Shadowboxshadow
Box Sizingboxsizing
CSS Calccsscalc

Method of allowing calculated values for length units. For example:

//lem {
  width: calc(100% - 3em);
CSS :checked pseudo-selectorchecked
CSS Font ch Unitscsschunit
CSS Columnscsscolumns
CSS Grid (old & new)cssgrid,cssgridlegacy
CSS Cubic Bezier Rangecubicbezierrange
CSS Custom Propertiescustomproperties
CSS Display run-indisplay-runin
CSS Display tabledisplaytable

display: table and table-cell test. (both are tested under one name table-cell )

CSS text-overflow ellipsisellipsis

Tests for CSS.escape() support.

CSS Font ex Unitscssexunit
CSS Filterscssfilters

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 Gapflexgap
Flex Line Wrappingflexwrap

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-selectorfocuswithin
Font Displayfontdisplay

Detects support for the font-display descriptor, which defines how font files are loaded and displayed by the browser.

CSS Generated Contentgeneratedcontent
CSS Gradientscssgradients
CSS Hairlinehairline

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 Colorshsla
CSS Hyphenscsshyphens,softhyphens,softhyphensfind
CSS :invalid pseudo-classcssinvalid

Detects support for the ':invalid' CSS pseudo-class.

CSS :last-child pseudo-selectorlastchild
CSS Maskcssmask
CSS Media Queriesmediaqueries
CSS Multiple Backgroundsmultiplebgs
CSS :nth-child pseudo-selectornthchild

Detects support for the ':nth-child()' CSS pseudo-selector.

CSS Object Fitobjectfit
CSS Opacityopacity
CSS Overflow Scrollingoverflowscrolling
CSS Pointer Eventscsspointerevents
CSS position: stickycsspositionsticky
CSS Generated Content Animationscsspseudoanimations
CSS Generated Content Transitionscsspseudotransitions
CSS Reflectionscssreflections
CSS Regionsregions
CSS Font rem Unitscssremunit
CSS UI Resizecssresize

Test for CSS 3 UI "resize" property

CSS rgbargba
CSS Stylable Scrollbarscssscrollbar
Scroll Snap Pointsscrollsnappoints

Detects support for CSS Snap Points

CSS Shapesshapes
CSS general sibling selectorsiblinggeneral
CSS Subpixel Fontssubpixelfont
CSS Supportssupports
CSS :target pseudo-classtarget

Detects support for the ':target' CSS pseudo-class.

CSS text-align-lasttextalignlast
CSS textDecorationtextdecoration
CSS textshadowtextshadow
CSS Transformscsstransforms
CSS Transforms 3Dcsstransforms3d
CSS Transforms Level 2csstransformslevel2
CSS Transform Style preserve-3dpreserve3d

Detects support for transform-style: preserve-3d, for getting a proper 3D perspective on elements.

CSS Transitionscsstransitions
CSS user-selectuserselect
CSS :valid pseudo-classcssvalid

Detects support for the ':valid' CSS pseudo-class.

Variable Open Type Fontsvariablefonts
CSS vh unitcssvhunit
CSS vmax unitcssvmaxunit
CSS vmin unitcssvminunit
CSS vw unitcssvwunit

Detects support for the will-change css property, which formally signals to the browser that an element will be animating.

CSS wrap-flowwrapflow
createElement with Attributescreateelementattrs,createelement-attrs
dataset APIdataset
Document Fragmentdocumentfragment

Append multiple elements to the DOM within a single insertion.

[hidden] Attributehidden

Does the browser support the HTML5 [hidden] attribute?

Intersection Observerintersectionobserver

Determines if Intersection Observer API is available.

DOM4 MutationObservermutationobserver

Determines if DOM4 MutationObserver support is available.

Passive event listenerspassiveeventlisteners

Detects support for the passive option to addEventListener.

Shadow DOM APIshadowroot

Detects support for the Shadow DOM API.

Shadow DOM API (Legacy)shadowrootlegacy

Detects support for the Shadow DOM API. (Legacy)

bdi Elementbdi

Detect support for the bdi element, a way to have text that is isolated from its possibly bidirectional surroundings

datalist Elementdatalistelem
details Elementdetails
output Elementoutputelem
picture Elementpicture
progress Elementprogressbar,meter
ruby, rp, rt Elementsruby
Template Tagtemplate
time Elementtime
Track element and Timed Text Tracktexttrackapi,track
Unknown Elementsunknownelements

Does the browser support HTML with non-standard / new elements?

ES5 Arrayes5array

Check if browser implements ECMAScript 5 Array per specification.

ES5 Datees5date

Check if browser implements ECMAScript 5 Date per specification.

ES5 Functiones5function

Check if browser implements ECMAScript 5 Function per specification.

ES5 Objectes5object

Check if browser implements ECMAScript 5 Object per specification.


Check if browser implements everything as specified in ECMAScript 5.

ES5 Strict Modestrictmode

Check if browser implements ECMAScript 5 Object strict mode.

ES5 Stringes5string

Check if browser implements ECMAScript 5 String per specification.

ES5 Syntaxes5syntax

Check if browser accepts ECMAScript 5 syntax.

ES5 Immutable Undefinedes5undefined

Check if browser prevents assignment to global undefined per ECMAScript 5.

ES6 Arrayes6array

Check if browser implements ECMAScript 6 Array per specification.

ES6 Arrow Functionsarrow

Check if browser implements ECMAScript 6 Arrow Functions per specification.

ES6 Classes6class

Check if browser implements ECMAScript 6 class.

ES6 Collectionses6collections

Check if browser implements ECMAScript 6 Map, Set, WeakMap and WeakSet

ES5 String.prototype.containscontains

Check if browser implements ECMAScript 6 String.prototype.contains per specification.

ES6 Generatorsgenerators

Check if browser implements ECMAScript 6 Generators per specification.

ES6 Mathes6math

Check if browser implements ECMAScript 6 Math per specification.

ES6 Numberes6number

Check if browser implements ECMAScript 6 Number per specification.

ES6 Objectes6object

Check if browser implements ECMAScript 6 Object per specification.

ES6 Promisespromises

Check if browser implements ECMAScript 6 Promises per specification.

ES6 Rest parametersrestparameters

Check if browser implements ECMAScript 6 Rest parameters per specification.

ES6 Spread arrayspreadarray

Check if browser implements ECMAScript 6 spread syntax (in array and function calls)

ES6 Template Stringsstringtemplate

Check if browser implements ECMAScript 6 String template.

ES6 Stringes6string

Check if browser implements ECMAScript 6 String per specification.

ES6 Symboles6symbol

Check if browser implements ECMAScript 6 Symbol per specification.

ES7 Arrayes7array

Check if browser implements ECMAScript 7 Array per specification.

ES7 Rest destructuringrestdestructuringarray,restdestructuringobject

Check if browser implements ECMAScript 7 Destructuring Assignment per specification.

ES7 Spread objectspreadobject

Check if browser implements ECMAScript 7 object spread syntax

ES8 Objectes8object

Check if browser implements ECMAScript 8 Object.

Orientation and Motion Eventsdevicemotion,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 Eventoninput

oninput tests if the browser is able to detect the input event

File APIfilereader

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 APIfilesystem
input[capture] Attributecapture

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] Attributefileinput

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] Attributedirectory

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] Attributeformattribute

Detects whether input form="form_id" is available on the platform E.g. IE 10 (and below), don't support this

input[type="number"] Localizationlocalizednumber

Detects whether input type="number" is capable of receiving and displaying localized numbers, e.g. with comma separator.

placeholder attributeplaceholder

Tests for placeholder attribute in inputs and textareas


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 Validationformvalidation

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] Attributesandbox

Test for sandbox attribute in iframes.

iframe[seamless] Attributeseamless

Test for seamless attribute in iframes.

iframe[srcdoc] Attributesrcdoc

Test for srcdoc attribute in iframes.

Animated PNGapng

Test for animated png support.

Image crossOriginimgcrossorigin

Detects support for the crossOrigin attribute on images, which allow for cross domain images inside of a canvas without tainting it

JPEG 2000jpeg2000

Test for JPEG 2000 support

JPEG XR (extended range)jpegxr

Test for JPEG XR support

image and iframe native lazy loadinglazyloading

Test for the loading attribute of images and iframes

sizes attributesizes

Test for the sizes attribute on images

srcset attributesrcset

Test for the srcset attribute of images

Webp Alphawebpalpha

Tests for transparent webp support.

Webp Animationwebpanimation

Tests for animated webp support.

Webp Losslesswebplossless,webp-lossless

Tests for non-alpha lossless webp support.


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 formactioninputformaction

Detect support for the formaction attribute on form inputs

input formenctypeinputformenctype

Detect support for the formenctype attribute on form inputs, which overrides the form enctype attribute

input formmethodinputformmethod

Detect support for the formmethod attribute on form inputs

input formnovalidateinputformnovalidate

Detect support for the formnovalidate attribute on form inputs, which overrides the form novalidate attribute

input formtargetinputformtarget

Detect support for the formtarget attribute on form inputs, which overrides the form target attribute

Hover Media Queryhovermq

Detect support for Hover based media queries

Pointer Media Querypointermq

Detect support for Pointer based media queries

Beacon APIbeacon

Detects support for an API that allows for asynchronous transfer of small HTTP data from the client to a server.

Connection Effective Typeconnectioneffectivetype

Detects support for determining signal bandwidth via navigator.connection.effectiveType

Low Bandwidth Connectionlowbandwidth

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 Eventseventsource

Tests for server sent events aka eventsource.

Fetch APIfetch

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 responseTypexhrresponsetype

Tests for XMLHttpRequest xhr.responseType.

XML HTTP Request Level 2 XHR2xhr2

Tests for XHR2.


Detects support for the async attribute on the <script> element.


Detects support for the defer attribute on the <script> element.

Speech Recognition APIspeechrecognition
Speech Synthesis APIspeechsynthesis
Local Storagelocalstorage
Session Storagesessionstorage
Web SQL Databasewebsqldatabase

Support for the scoped attribute of the <style> element.

SVG as an <img> tag sourcesvgasimg
SVG clip pathssvgclippaths

Detects support for clip paths in SVG (only, not on HTML content).

See this discussion regarding applying SVG clip paths to HTML content.

SVG filterssvgfilters
SVG foreignObjectsvgforeignobject

Detects support for foreignObject tag in SVG.

Inline SVGinlinesvg

Detects support for inline SVG in HTML (not within XHTML).

SVG SMIL animationsmil
textarea maxlengthtextareamaxlength

Detect support for the maxlength attribute of a textarea element

Blob URLsbloburls

Detects support for creating Blob URLs

Data URIdatauri

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 parserurlparser

Check if browser implements the URL constructor for parsing URLs.

URLSearchParams APIurlsearchparams

Detects support for an API that provides utility methods for working with the query string of a URL.

Video Autoplayvideoautoplay

Checks for support of the autoplay attribute of the video element.

Video crossOriginvideocrossorigin

Detects support for the crossOrigin attribute on video tag

Video Loop Attributevideoloop
Video Preload Attributevideopreload

Detects support for PublicKeyCredential as part of the Web Authentication API (also known as webauthn)

WebGL Extensionswebglextensions

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 Channeldatachannel

Detect for the RTCDataChannel API that allows for transfer data directly from one peer to another


Detects support for the new Promise-based getUserMedia API.

RTC Peer Connectionpeerconnection
Binary WebSocketswebsocketsbinary
Base 64 encoding/decodingatobbtoa

Detects support for WindowBase64 API (window.atob && window.btoa).

Framed windowframed

Tests if page is iframed.


Detects support for matchMedia.

Workers from Blob URIsblobworkers

Detects support for creating Web Workers from Blob URIs.

Workers from Data URIsdataworkers

Detects support for creating Web Workers from Data URIs.

Shared Workerssharedworkers

Detects support for the SharedWorker API from the Web Workers spec.

Transferables Objectstransferables

Detects whether web workers can use transferables objects.

Web Workerswebworkers

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.