什么是 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") {
getTheOldBasicExperience();
} else {
showOffAwesomeNewFeature();
}
现在看起来没问题,对吧?我们正在使用 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) {
showOffAwesomeNewFeature();
} else {
getTheOldBasicExperience();
}
功能检测不是根据用户是否使用 one-they-make-you-use-at-work
浏览器来做出决定,并假设他们有权或无权访问 AwesomeNewFeature,而是以编程方式检查 AwesomeNewFeature 是否确实在浏览器中运行,并为你提供 true
或 false
结果。因此,现在一旦你最不喜欢的浏览器添加了对 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.
请注意,你需要使用 devFile
和 outputFile
的路径更新提供的配置文件。更多文档可在 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);
}
classPrefix
如果 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">
.
no-js
默认情况下,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
.
enableClasses
如果你不希望 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) {
showOffAwesomeNewFeature();
} else {
getTheOldBasicExperience();
}
辅助方法
¥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 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
| |
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 text | canvastext |
Detects support for the text APIs for | |
Content Editable | contenteditable |
Detects support for the | |
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 | |
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 | |
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[search] search event | inputsearchevent |
There is a custom | |
Form input types | inputtypes |
Detects support for HTML5 form input types and exposes Boolean subproperties with the results:
| |
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 | |
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 | |
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 | |
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 | |
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:
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 | |
Typed arrays | typedarrays |
Detects support for native binary data manipulation via Typed Arrays in JavaScript. Does not check for DataView support; use | |
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
| |
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 | |
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 | |
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 | |
CSS Animations | cssanimations |
Detects whether or not elements can be animated using CSS | |
Appearance | appearance |
Detects support for the | |
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 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:
| |
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 |
| |
CSS text-overflow ellipsis | ellipsis |
CSS.escape() | cssescape |
Tests for | |
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 This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return
| |
CSS :focus-within pseudo-selector | focuswithin |
Font Display | fontdisplay |
Detects support for the | |
@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 | |
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 | |
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 | |
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 | |
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.
| |
onInput Event | oninput |
| |
File API | filereader |
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[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[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:
| |
iframe[sandbox] Attribute | sandbox |
Test for | |
iframe[seamless] Attribute | seamless |
Test for | |
iframe[srcdoc] Attribute | srcdoc |
Test for | |
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 | |
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 | |
Low Bandwidth Connection | lowbandwidth |
Tests for determining low-bandwidth via There are two iterations of the The first is present in Android 2.2+ and only in the Browser (not WebView)
The second is speced at https://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html and perhaps landing in WebKit
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 | |
script[defer] | scriptdefer |
Detects support for the | |
Speech Recognition API | speechrecognition |
Speech Synthesis API | speechsynthesis |
Local Storage | localstorage |
Session Storage | sessionstorage |
Web SQL Database | websqldatabase |
style[scoped] | stylescoped |
Support for the | |
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:
| |
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
| |
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 | |
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 | |
Transferables Objects | transferables |
Detects whether web workers can use | |
Web Workers | webworkers |
Detects support for the basic |