Browser compatibility

Alternate rendition of Fyrd's when can I use... page with Wikimedia Mar 2015 browser usage statistics.

featureChromeAndroid BrowserSafariiOSIEFirefoxO.Mini%
30343738394041602.34.14.24.4537.1TP810.378910112031353655all
featureChromeAndroid BrowserSafariiOSIEFirefoxO.Mini%
webkitmsmozo
css2CSS min/max-width/height

Method of setting a minimum or maximum width or height to an element.

Browser-specific notes:
#1: IE7 does not support inherit as a value on any of these properties.
#2: IE8 has some bugs with max-width/height combined with overflow: auto/scroll.

Resources: JS library with support, WebPlatform Docs, CSS Basics post.
rec4‒602.1‒533.1‒TP3.2‒10.3789‒112‒55all100
css3CSS3 Text-overflow

Append ellipsis when text overflows its containing element.

Resources: jQuery polyfill for Firefox, MDN article, Information page, has.js test, WebPlatform Docs.
cr4‒602.1‒533.1‒TP3.2‒10.36‒117‒55all100
css2CSS 2.1 selectors

Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector).

Support for :visited styling varies across browsers due to security concerns.

Resources: Detailed support information, Examples of advanced selectors, Selectivizr: Polyfill for IE6-8, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.37‒112‒55all100
pngPNG alpha transparency

Semi-transparent areas in PNG files.

IE6 does support full transparency in 8-bit PNGs, which can sometimes be an alternative to 24-bit PNGs.

Resources: Wikipedia, Workaround for IE6.
rec4‒602.1‒533.1‒TP3.2‒10.37‒112‒55all100
domdocument.elementFromPoint()

Given coordinates for a point relative to the viewport, returns the element that a click event would be dispatched at if the user were to click the point (in other words, the element that hit-testing would find).

Resources: Mozilla Developer Network article.
wd15‒602.3‒535‒TP4.0‒10.36‒113‒55all100
css2CSS inline-block

Method of displaying an element as a block while flowing it with text.

Browser-specific notes:
#1: Only supported in IE6 and IE7 on elements with a display of "inline" by default. Alternative properties are available to provide complete cross-browser support.

Resources: Blog post w/info, Info on cross browser support, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.368‒113‒55all100
css2CSS Counters

Method of controlling number values in generated content, using the counter-reset and counter-increment properties.

Resources: Tutorial and information, MDN article, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.35.58‒112‒55all99
css2CSS Table display

Method of displaying elements as tables, rows, and cells. Includes support for all display: table-* properties as well as display: inline-table.

Browser-specific notes:
#1: Firefox 2 does not support inline-table.

Resources: Blog post on usage.
rec4‒602.1‒533.1‒TP3.2‒10.35.58‒113‒55all99
css3CSS3 Box-sizing

Method of specifying whether or not an element's borders and padding should be included in size units.

Firefox currently also supports the padding-box in addition to content-box and border-box, though this value has been removed from the specification.

Resources: MDN article, Blog post, Polyfill for IE, CSS Tricks, WebPlatform Docs.
cr10‒602.14‒535.1‒TP5.0‒10.35.58‒11229‒55all99
jsJSON parsing

Method of converting JavaScript objects to JSON strings and JSON back to objects using JSON.stringify() and JSON.parse().

Browser-specific notes:
#1: Requires document to be in IE8+ standards mode to work in IE8.

Resources: MDN article, JSON in JS (includes script w/support), has.js test, WebPlatform Docs.
Parent feature: ECMAScript 5.
other4‒602.1‒534‒TP4.0‒10.35.589‒113.5‒55all99
css3CSS first-line pseudo-element

Allows styling specifically for the first line of text using the ::first-line pseudo-element. Note that only a limited set of properties can be applied.

Browser-specific notes:
#1: IE8 only supports the single-colon CSS 2.1 syntax (i.e. :first-line). It does not support the double-colon CSS3 syntax (i.e. ::first-line).

Resources: MDN article, CSS tricks article.
Parent feature: CSS3 selectors.
rec4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all99
css3CSS3 Opacity

Method of setting the transparency level of an element.

Transparency for elements in IE8 and older can be achieved using the proprietary "filter" property and does not work well with PNG images using alpha transparency.

Resources: Information page, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all99
domreadonly attribute of input and textarea elements

Makes the form control non-editable. Unlike the disabled attribute, readonly form controls are still included in form submissions and the user can still select (but not edit) their value text.

Browser-specific notes:
#1: Readonly inputs of type datetime-local, date, month, and week can still be edited by pressing the Up or Down arrow keys on the keyboard while the input is focused.
#2: Text cannot be selected directly, but is possible by first selecting any text around the field.

Resources: WHATWG HTML specification for the readonly attribute of the `<textarea>` element, Mozilla Developer Network article.
ls26‒602.3‒535.1‒TP7.0‒10.36‒114‒55all99
css3CSS3 selectors

Advanced element selection using selectors including: [foo^="bar"], [foo$="bar"], [foo*="bar"], :root, :nth-child(),  :nth-last-child(), nth-of-type, nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not(), ~ (general sibling).

Browser-specific notes:
#1: IE7 and IE8 support only these CSS3 selectors: General siblings (element1~element2) and Attribute selectors [attr^=val], [attr$=val], and [attr*=val].

Resources: Detailed support information, Automated CSS3 selector test, Selectivizr: Polyfill for IE6-8, WebPlatform Docs.
rec4‒602.1‒533.2‒TP3.2‒10.37‒89‒113.5‒55all99
jsElement.getBoundingClientRect()

Method to get the size and position of an element's bounding box, relative to the viewport.

Browser-specific notes:
#1: The returned object lacks width and height properties.
#2: Returns incorrect values for elements which have had CSS transforms applied to them.
#3: The returned object cannot have new properties added to it; it's not extensible.
#4: Existing properties of the returned object are immutable.

Resources: Mozilla Developer Network, Microsoft Developer Network.
wd4‒602.3‒534‒TP4.0‒10.35.5‒89‒1112‒55all99
domquerySelector/querySelectorAll

Method of accessing DOM elements using CSS selectors.

Browser-specific notes:
#1: Partial support in IE8 is due to being limited to CSS 2.1 selectors and a small subset of CSS 3 selectors (see notes there). Additionally, it will have trouble with selectors including unrecognized tags (for example HTML5 ones).

Resources: MDN article on querySelector, MDN article on querySelectorAll, Blog post, WebPlatform Docs.
ls4‒602.1‒533.1‒TP3.2‒10.3689‒113.5‒55all98
css2CSS Generated content for pseudo-elements

Method of displaying text or images before or after the given element's contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr() notation in the content property.

For content to appear in pseudo-elements, the content property must be set (but may be an empty string).

Browser-specific notes:
#1: IE8 only supports the single-colon CSS 2.1 syntax (i.e. :pseudo-class). It does not support the double-colon CSS3 syntax (i.e. ::pseudo-element).

Resources: Guide on usage, Dev.Opera article, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.35.589‒112‒55all98
css::first-letter CSS pseudo-element selector

CSS pseudo-element that allows styling only the first "letter" of text within an element. Useful for implementing initial caps or drop caps styling.

The spec says that both letters of digraphs which are always capitalized together (such as "IJ" in Dutch) should be matched by ::first-letter, but no browser has ever implemented this.

Browser-specific notes:
#1: Excludes punctuation immediately after the first letter from the match. (The spec says it should be included in the match.).
#2: Acts like the first character is always a letter even when it's not. For example, given "!,X;", "!," is matched instead of the entire string.
#3: Only recognizes the deprecated :first-letter pseudo-class, not the ::first-letter pseudo-element.
#4: Only matches the very first character. The spec says that surrounding punctuation should also match.

Resources: Mozilla Developer Network.
rec9‒602.33‒535.1‒TP5.0‒10.3689‒113.5‒55all98
domDocument Object Model Range

A contiguous range of content in a Document, DocumentFragment or Attr.

See MDN for feature support details.

Resources: MDN, QuirksMode, "Rangy" Range library with old IE support.
ls4‒602.1‒533.1‒TP3.2‒10.36‒89‒112‒55all98
domgetElementsByClassName

Method of accessing DOM elements by class name.

Resources: Test page, WebPlatform Docs.
ls4‒602.1‒533.1‒TP3.2‒10.36‒89‒113‒55all98
css3CSS3 Media Queries

Method of applying styles based on media information. Includes things like page and device dimensions.

Browser-specific notes:
#1: Does not support nested media queries.
#2: Partial support refers to only acknowledging different media rules on page reload.

Resources: IE demo page with information, Media Queries tutorial, Polyfill for IE, WebPlatform Docs.
rec26‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒89‒113.5‒55all98
jsWeb Storage - name/value pairs

Method of storing data locally like cookies, but for larger amounts of data (sessionStorage and localStorage, used to fall under HTML5).

Resources: MDN article, Support library, Simple demo, has.js test, WebPlatform Docs.
ls4‒602.1‒534‒TP3.2‒10.368‒113.5‒55all98
cssCSS position:fixed

Method of keeping an element in a fixed location regardless of scroll position.

Browser-specific notes:
#1: Partial support in older iOS Safari refers to buggy behavior.
#2: Only works in Android 2.1 thru 2.3 by using the following meta tag: <meta name="viewport" content="width=device-width, user-scalable=no">.
#3: Android 4.0-4.3 ignore transforms and margin:auto on position:fixed elements.

Resources: Workaround for IE6, Article on mobile support, WebPlatform Docs.
rec4‒602.14‒4.34.4‒533.1‒TP8‒10.37‒112‒55all98
html5Hashchange event

Event triggered in JavaScript when the URL's hash has changed (for example: page.html#foo to page.html#bar).

Resources: MDN article, MSDN article, Simple demo, Polyfill, WebPlatform Docs.
ls5‒602.2‒535‒TP4.0‒10.35.58‒113.6‒55all98
css2CSS outline

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Browser-specific notes:
#1: Also supports the value of invert for outline-color. (support of this value is optional for browsers).

Resources: CSS Basic User Interface Module Level 3, Mozilla Developer Network: outline.
rec4‒602.1‒533.1‒TP3.2‒10.35.589‒112‒55all98
otherServer Name Indication

An extension to the TLS computer networking protocol by which a client indicates which hostname it is attempting to connect to at the start of the handshaking process.

Browser-specific notes:
#1: Only supported on Windows Vista or above (not Windows XP).

Resources: Wikipedia.
other6‒602.13‒533.1‒TP4.0‒10.37‒89‒112‒55all97
html5contenteditable attribute (basic support)

Method of making any HTML element editable.

This support only refers to very basic editing capability, implementations vary significantly on how certain elements can be edited.

Resources: Demo page, WHATWG blog post, Blog post on usage problems, WebPlatform Docs.
ls4‒602.13‒533.1‒TP5.0‒10.35.5‒113.5‒55all97
jsElement.insertAdjacentHTML()

Inserts a string of HTML into a specified position in the DOM relative to the given element.

Browser-specific notes:
#1: Throws an "Invalid target element for this operation." error when called on a table, tbody, thead, or tr element..

Resources: Mozilla Developer Network, Polyfill.
cr4‒602.3‒534‒TP4.0‒10.36‒910‒118‒55all97
otherXHTML served as application/xhtml+xml

A strict form of HTML, and allows embedding of other XML languages.

The XHTML syntax is very close to HTML, and thus is almost always (incorrectly) served as text/html on the web.

Resources: Wikipedia, Information on XHTML5, WebPlatform Docs.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all97
domEventTarget.addEventListener()

The modern standard API for adding DOM event handlers. Introduced in the DOM Level 2 Events spec. Also implies support for the capture phase of DOM event dispatch, as well as the stopPropagation() and preventDefault() event methods.

Browser-specific notes:
#1: IE<=8 instead only supports the proprietary .attachEvent() method. It also does not support the capture phase of DOM event dispatch; it only supports event bubbling.
#2: The useCapture parameter is non-optional and must be provided. Future versions made it optional, with a default value of false.

Resources: Mozilla Developer Network, Financial Times IE8 polyfill, WebReflection ie8 polyfill.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒117‒55all97
domDOMContentLoaded

JavaScript event that fires when the DOM is loaded, but before all page assets are loaded (CSS, images, etc.).

Resources: MDN: DOMContentLoaded.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all97
domnaturalWidth & naturalHeight image properties

Properties defining the intrinsic width and height of the image, rather than the displayed width & height.

Resources: Blog post on support in IE, gist on getting natural width & height in older IE.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all97
cssCSS currentColor value

A CSS value that will apply the existing color value to other properties like background-color, etc.

Resources: MDN article, CSS Tricks article.
rec4‒602.1‒534‒TP4.0‒10.35.5‒89‒112‒55all97
css3CSS3 Colors

Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing alpha-transparency with rgba() and hsla().

Resources: Dev.Opera article, Information page, WebPlatform Docs.
rec4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒113‒55all97
domEventTarget.dispatchEvent

Method to programmatically trigger a DOM event.

Browser-specific notes:
#1: Supports Microsoft's proprietary EventTarget.fireEvent() method.

Resources: Mozilla Developer Network, Financial Times IE8 polyfill, WebReflection ie8 polyfill.
ls4‒602.3‒533.2‒TP4.0‒10.36‒89‒10112‒55all97
domNode.textContent

DOM Node property representing the text content of a node and its descendants.

Node.textContent is somewhat similar to, but has important differences from, Node.innerText.

Resources: Mozilla Developer Network.
ls4‒602.3‒533.2‒TP4.0‒10.35.5‒89‒112‒55all97
css3CSS3 Multiple backgrounds

Method of using multiple images as a background.

Resources: Demo & information page, Information page, WebPlatform Docs.
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒113.6‒55all97
jsBasic console logging functions

Method of outputting data to the browser's console, intended for development purposes.

The basic functions that this information refers to include console.log, console.info, console.warn, console.error.

Browser-specific notes:
#1: Only supports console functions when developer tools are open, otherwise the console object is undefined and any calls will throw errors.
#2: Allows console functions to be used without throwing errors, but does not appear to output the data anywhere.
#3: Log output on iOS 6+ Safari can only be seen by connecting to a Mac and using the Safari debugger.
#4: Log output on older Android browsers can be retrieved via Android's logcat command or using Chrome Developer Tools in Android 4.4+/Chrome for Android see details.
#5: Log output on Firefox for Android can be accessed using WebIDE.
#6: See this article for details on how to see console logging in Opera Mini.

Resources: MDN article, Chrome console reference, Safari console reference, Edge/Internet Explorer console reference.
ls4‒602.1‒533.1‒TP6.0‒10.35.58‒910‒114‒55all97
domdocument.head

Convenience property for accessing the <head> element.

Resources: Mozilla Developer Network.
ls4‒602.3‒535.1‒TP4.0‒10.35.5‒89‒114‒55all97
css3@font-face Web fonts

Method of displaying fonts downloaded from websites.

Not supported by IE Mobile 9 and below.

Browser-specific notes:
#1: Partial support refers to only supporting EOT fonts.
#2: Partial support refers to only supporting SVG fonts.

Resources: News and information site, Wikipedia, Information page, WebPlatform Docs.
cr4‒602.24‒533.2‒TP4.2‒10.35.5‒89‒113.5‒55all96
canvasCanvas (basic support)

Method of generating fast, dynamic graphics using JavaScript.

For screen readers, IE, Chrome & Firefox support the accessible canvas element sub-DOM.
Firefox & Chrome also support the drawfocus ring.

Browser-specific notes:
#1: Does not support toDataURL().
#2: Opera Mini supports the canvas element, but is unable to play animations or run other more complex applications.

Resources: Tutorial by Mozilla, Animation kit, Another tutorial, Implementation for Internet Explorer, has.js test, Canvas Tutorial & Cheat Sheet.
ls4‒602.13‒534‒TP3.2‒10.36‒89‒113.6‒55all96
html5Inline SVG in HTML5

Method of using SVG tags directly in HTML documents. Requires HTML5 parser.

Browser-specific notes:
#1: Does not support CSS transforms on SVG elements (transform attribute can be used instead).

Resources: Mozilla Hacks blog post, Test suite.
ls7‒602.13‒4.34.4‒535.195.09.06‒89‒114‒55all96
canvasText API for Canvas

Method of displaying text on Canvas elements.

Resources: Examples by Mozilla, Support library, has.js test, WebPlatform Docs.
Parent feature: Canvas (basic support).
ls4‒602.1‒534‒TP3.2‒10.36‒89‒113.5‒55all96
jsGeolocation

Method of informing a website of the user's geographical location.

Browser-specific notes:
#1: Only works on secure (https) servers.

Resources: Simple demo, has.js test, WebPlatform Docs.
rec5‒41502.1‒4.4535‒TP3.210.06‒89‒113.5‒55all96
dommaxlength attribute for input and textarea elements

Declares an upper bound on the number of characters the user can input. Normally the UI ignores attempts by the user to type in additional characters beyond this limit.

Browser-specific notes:
#1: <textarea>'s' UI does not prevent the user from typing additional characters beyond the maxlength limit.
#2: Does not support the HTMLTextAreaElement.maxLength DOM property.
#3: Does not support ValidityState.tooLong. In some cases, this is because .validity is not supported in the first place.
#4: Does not support ValidityState.tooLong correctly in the (unlikely) case of the value being initially set too long, then changed by the user to a still incorrect state. See Firefox bug and MS Edge bug.
#5: <input>'s UI does not prevent the user from typing additional characters beyond the maxlength limit between two existing characters of the string.
#6: Allows text beyond maxlength to be entered at first, but removes all characters past the maxlength when focus is lost.

Resources: Mozilla Developer Network.
Parent feature: Form validation.
ls4‒602.3‒535.1‒TP89.06‒910‒114‒3651all96
css3getComputedStyle

API to get the current computed CSS styles applied to an element. This may be the current value applied by an animation or as set by a stylesheet.

Browser-specific notes:
#1: Partial support refers to requiring the second parameter to be included.
#2: Partial support refers to not supporting getComputedStyle on pseudo-elements.

Resources: MDN article, Demo, Polyfill for IE, WebPlatform Docs.
rec11‒602.14‒535‒TP5.0‒10.35.5‒89‒114‒55all96
css3CSS3 Border-radius (rounded corners)

Method of making the border corners round. Covers support for the shorthand border-radius as well as the long-hand properties (e.g. border-top-left-radius).

Browser-specific notes:
#1: Safari 6.1 and earlier did not apply border-radius correctly to image borders: http://stackoverflow.com/q/17202128.
#2: Dotted and dashed rounded border corners are rendered as solid in Firefox. see bug.

Resources: Border-radius CSS Generator, Detailed compliance table, Information page, Polyfill which includes border-radius, WebPlatform Docs.
cr5‒602.2‒535‒TP4.0‒10.35.5‒89‒114‒3650all96
html5dataset & data-* attributes

Method of applying and accessing custom data to elements.

Partial support refers to being able to use data-* attributes and access them using getAttribute.

"Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

Browser-specific notes:
#1: While the HTML spec doesn't require it, these browsers also support dataset and data-* attributes on SVG elements, in compliance with current plans for SVG2.

Resources: HTML5 Doctor article, Demo using dataset, has.js test, WebPlatform Docs, MDN Reference - dataset, MDN Guide - Using data-* attributes, MS Edge UserVoice #15885483: Support dataset and data attributes on SVG elements.
ls7‒602.13‒535.1‒TP5.0‒10.35.5‒10116‒3651all96
jsBase64 encoding and decoding

Utility functions for of encoding and decoding strings to and from base 64: window.atob() and window.btoa().

Resources: MDN article on btoa(), MDN article on atob(), Polyfill.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all95
css3rem (root em) units

Type of unit similar to em, but relative only to the root element, not any parent element. Thus compounding does not occur as it does with em units.

Browser-specific notes:
#1: IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements.
#2: iOS Safari 5.0-5.1 support rem but not in combination with media queries.

Resources: Article on usage, REM Polyfill.
cr4‒602.1‒535‒TP4.0‒10.35.5‒89‒10113.6‒55all95
domKeyboardEvent.charCode

A legacy KeyboardEvent property that gives the Unicode codepoint number of a character key pressed during a keypress event.

This property is legacy and deprecated, but its replacement(s) are not yet widely supported.

Browser-specific notes:
#1: Does not appear to support the keypress event at all.

Resources: Mozilla Developer Network.
unoff4‒602.3‒534‒TP5.0‒10.35.5‒89‒113‒55all95
html5Video element

Method of playing videos on webpages (without requiring a plug-in). Includes support for the following media properties: currentSrc, currentTime, paused, playbackRate, buffered, duration, played, seekable, ended, autoplay, loop, controls, volume & `muted'.

Different browsers have support for different video formats, see sub-features for details.

Browser-specific notes:
#1: The Android browser (before 2.3) requires specific handling to run the video element.
#2: Old Firefox versions were missing support for some properties: loop was added in v11, played in v15, playbackRate in v20.

Resources: Detailed article on video/audio elements, WebM format information, Video for Everybody, Video on the Web - includes info on Android support, has.js test, WebPlatform Docs.
ls4‒602.3‒534‒TP3.2‒10.35.5‒89‒1120‒55all95
jsDocument.execCommand()

Allows running commands to manipulate the contents of an editable region in a document switched to designMode.

To determine what commands are supported, see Document.queryCommandSupported().

Resources: MDN, execCommand and queryCommandSupported demo.
unoff4‒602.14.1‒4.4536‒TP7.0‒10.35.5‒119‒55all95
html5Audio element

Method of playing sound on webpages (without requiring a plug-in). Includes support for the following media properties: currentSrc, currentTime, paused, playbackRate, buffered, duration, played, seekable, ended, autoplay, loop, controls, volume & `muted'.

Browser-specific notes:
#1: Old Firefox versions were missing support for some properties: loop was added in v11, played in v15, playbackRate in v20.

Resources: HTML5 Doctor article, Detailed article on video/audio elements, Demos of audio player that uses the audio element, Detailed article on support, File format test page, The State of HTML5 Audio, has.js test, WebPlatform Docs.
ls4‒602.3‒534‒TP4.0‒10.35.5‒89‒1120‒55all95
css3CSS3 Box-shadow

Method of displaying an inner or outer shadow effect to elements.

Can be partially emulated in older IE versions using the non-standard "shadow" filter.

Browser-specific notes:
#1: Partial support in Safari, iOS Safari and Android Browser refers to missing "inset", blur radius value, and multiple shadow support.

Resources: MDN article, Live editor, Demo of various effects, Information page, WebPlatform Docs.
cr10‒602.14‒535.1‒TP5.0‒10.35.5‒89‒114‒55all95
css3SVG in CSS backgrounds

Method of using SVG images as CSS backgrounds.

Browser-specific notes:
#1: Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.
#2: Partial support in older Firefox and Opera Mini/Mobile refers to SVG images being blurry when scaled.

Resources: Tutorial for advanced effects.
cr5‒602.13‒535‒TP4.2‒10.35.5‒89‒11424‒55all95
css3CSS3 Text-shadow

Method of applying one or more shadow or blur effects to text.

Opera Mini ignores the blur-radius set, so no blur effect is visible. Text-shadow behavior can be somewhat emulated in older IE versions using the non-standard "dropshadow" or "glow" filters.

Browser-specific notes:
#1: IE 10+ supports a fourth length value for the shadow's "spread". This is not (yet) part of the specification.
#2: Partial support in Safari 3.* refers to not supporting multiple shadows.

Resources: Mozilla hacks article, Live editor, Information page, WebPlatform Docs.
cr4‒602.1‒534‒TP3.2‒10.35.5‒910‒113.5‒55all95
html5Offline web applications

Now deprecated method of defining web page files to be cached using a cache manifest file, allowing them to work offline on subsequent visits to the page.

This technology is being deprecated in favor of Service Workers.

Resources: Sitepoint tutorial, Dive Into HTML5 article, Mozilla Hacks article/demo, WebPlatform Docs.
unoff4‒602.1‒534‒TP3.2‒10.36‒8910‒113.5‒55all94
otherMP3 audio format

Popular lossy audio compression format.

Support refers to use using the audio element, not other conditions.

Browser-specific notes:
#1: Partial support in older Firefox refers to being limited to certain operating systems.

Resources: Wikipedia.
Parent feature: Audio element.
other4‒602.3‒534‒TP4.0‒10.35.5‒89‒113.522‒55all94
domdefer attribute for external scripts

The boolean defer attribute on script elements allows the external JavaScript file to run when the DOM is loaded, without delaying page load first.

Browser-specific notes:
#1: Partial support in older IE refers to a buggy implementation (see issue).
#2: Deferred scripts may run after DOMContentLoaded - https://bugzilla.mozilla.org/show_bug.cgi?id=688580.

Resources: MDN article, has.js test, WebPlatform Docs.
ls8‒602.13‒535‒TP5.0‒10.35.5‒910‒113.531‒55all94
dominput event

The input event is fired when the user changes the value of an <input> element, <select> element, or <textarea> element. By contrast, the "change" event usually only fires after the form control has lost focus.

Browser-specific notes:
#1: Doesn't fire an input event when deleting text (via Backspace, Delete, Cut, etc.).
#2: Doesn't fire an input event when drag-and-dropping text into an <input> or <textarea>.
#3: <select> doesn't fire input events. See MS Edge bug and Firefox bug.
#4: Doesn't fire an input event when (un)checking a checkbox or radio button, or when changing the selected file(s) of an <input type="file">. See Chrome bug, WebKit bug, and Firefox bug.
#5: Doesn't fire an input event when (un)checking a checkbox or radio button. See MS Edge bug.

Resources: Specification for `<select>` elements firing the `input` event, Mozilla Developer Network, Microsoft Edge feature request on UserVoice.
ls15‒3435‒602.3‒4.44.4.36.1‒TP8‒10.35.5‒8910‒113.6‒3649all94
dommatchMedia

API for finding out whether or not a media query applies to the document.

Resources: matchMedia.js polyfill, MDN article, MDN tutorial, WebPlatform Docs.
wd9‒602.13‒535.1‒TP5.0‒10.35.5‒910‒116‒55all94
html5Attributes for form submission

Attributes for form submission that may be specified on submit buttons. The attributes are: formaction, formenctype, formmethod, formnovalidate, and formtarget.

Resources: Article describing each attribute.
ls15‒602.14‒535.1‒TP5.0‒10.35.5‒910‒114‒55all94
otherECMAScript 5 Strict Mode

Method of placing code in a "strict" operating context.

Browser-specific notes:
#1: Partial support in older Safari refers to strict mode still accepting a lot of JS that should be considered invalid.

Resources: Information page, Article with test suite.
Parent feature: ECMAScript 5.
other13‒602.13‒536‒TP5.0‒10.35.5‒910‒114‒55all93
css:optional CSS pseudo-class

The :optional pseudo-class matches form inputs (<input>, <textarea>, <select>) which are not :required.

Browser-specific notes:
#1: Does not match non-required <select>s.

Resources: HTML specification for `:optional`, Mozilla Developer Network article, JS Bin testcase.
Parent feature: Form validation.
unoff15‒602.3‒535‒TP5.0‒10.35.5‒910‒114‒55all93
cssWindow.devicePixelRatio

Read-only property that returns the ratio of the (vertical) size of one physical pixel on the current display device to the size of one CSS pixel.

As the page is zoomed in the number of device pixels that one CSS pixel covers increases, and therefore the value of devicePixelRatio will also increase.

Resources: MDN.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒101118‒55all93
css3CSS3 2D Transforms

Method of transforming an element including rotating, scaling, etc. Includes support for transform as well as transform-origin properties.

The scale transform can be emulated in IE < 9 using Microsoft's "zoom" extension, others are (not easily) possible using the MS Matrix filter.

Browser-specific notes:
#1: Does not support CSS transforms on SVG elements (transform attribute can be used instead).

Resources: Live editor, MDN article, Workaround script for IE, Information page, Converter for IE, has.js test, WebPlatform Docs, IE platform status (SVG).
wd4‒3436‒602.1‒4.4533.193.29.06‒8910‒1116‒55all93
jsTyped Arrays

JavaScript typed arrays provide a mechanism for accessing raw binary data much more efficiently. Includes: Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array & Float64Array.

Includes support for ArrayBuffer objects.

Browser-specific notes:
#1: IE10 (and IE 10&11 mobile) does not support Uint8ClampedArray.

Resources: MDN article.
other7‒602.14‒536‒TP5.0‒10.35.5‒910114‒55all93
html5input placeholder attribute

Method of setting placeholder text for text-like input fields, to suggest the expected inserted information.

Browser-specific notes:
#1: Partial support refers to lacking placeholder support on textarea elements.

Resources: Article on usage, Polyfill, has.js test, WebPlatform Docs, Issue 24626: Placeholder text for an input type=.
Parent feature: HTML5 form features.
ls4‒602.144.2‒535‒TP3.2‒10.35.5‒910‒114‒55all93
html5Email, telephone & URL input types

Text input fields intended for email addresses, telephone numbers or URLs. Particularly useful in combination with form validation.

Browsers without support for these types will fall back to using the "text" type.

Browser-specific notes:
#1: Does not provide an email-specific keyboard for email addresses.

Resources: Article on usage.
Parent feature: HTML5 form features.
ls5‒602.13‒535‒TP3.2‒10.35.5‒910‒114‒55all93
html5hidden attribute

The hidden attribute may be applied to any element, and effectively hides elements similar to display: none in CSS.

The hidden state can be easily overridden with a CSS display property set to anything other than none.

Resources: Article on hidden attribute.
ls6‒602.14‒535.1‒TP5.0‒10.35.5‒10114‒55all92
otherData URIs

Method of embedding images and other files in webpages as a string of text, generally using base64 encoding.

Browser-specific notes:
#1: Support is limited to images and linked resources like CSS files, not HTML or JS files. Max URI length is 32KB.
#2: Support is limited to images and linked resources like CSS or JS, not HTML files. Maximum size limit is 4GB.

Resources: Information page, Wikipedia, Data URL converter, Information on security issues.
other4‒602.1‒533.1‒TP3.2‒10.35.589‒112‒55all92
jsCross-document messaging

Method of sending information from a page on one domain to a page on a different one (using postMessage).

Browser-specific notes:
#1: Partial support refers to only working in frames/iframes (not other tabs/windows). Also, objects cannot be sent using postMessage.
#2: Partial support refers to limitations in certain conditions.

Resources: MDN article, Simple demo, has.js test, WebPlatform Docs.
ls4‒602.1‒534‒TP3.2‒10.35.58‒910‒113‒55all92
css3CSS3 Transitions

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

Support listed is for transition properties as well as the transitionend event. The prefixed name in WebKit browsers is webkitTransitionEnd.

Resources: Article on usage, Information page, Examples on timing functions, Animation of property types support in Opera, WebPlatform Docs.
wd26‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒910‒1116‒55all92
html5sandbox attribute for iframes

Method of running external site pages with reduced privileges (e.g. no JavaScript) in iframes.

Resources: Chromium blog article, MSDN article, WebPlatform Docs.
ls4‒602.2‒535‒TP4.2‒10.35.5‒910‒111728‒55all92
svgSVG (basic support)

Method of displaying basic Vector Graphics features using the embed or object elements. Refers to the SVG 1.1 spec.

Browser-specific notes:
#1: Partial support in Android 3 & 4 refers to not supporting masking.
#2: IE9-11 desktop & mobile don't properly scale SVG files.  Adding height, width, viewBox, and CSS rules seem to be the best workaround.

Resources: Wikipedia, A List Apart article, SVG showcase site, SVG Web: Flash-based polyfill, Web-based SVG editor, has.js test.
rec4‒602.13‒4.34.4‒533.2‒TP3.2‒10.36‒89‒113‒55all92
css3CSS Gradients

Method of defining a linear or radial color gradient as a CSS image.

Syntax used by browsers with prefixed support may be incompatible with that for proper support.

Support can be somewhat emulated in older IE versions using the non-standard "gradient" filter.

Firefox 10+, Opera 11.6+, Chrome 26+ and IE10+ also support the new "to (side)" syntax.

Browser-specific notes:
#1: Partial support in Opera 11.10 and 11.50 also refers to only having support for linear gradients.

Resources: Cross-browser editor, Information page, Tool to emulate support in IE, WebPlatform Docs.
cr26‒602.14‒4.34.4‒536.1‒TP7.0‒10.35.5‒910‒1116‒55all92
domasync attribute for external scripts

The boolean async attribute on script elements allows the external JavaScript file to run when it's available, without delaying page load first.

Browser-specific notes:
#1: Using script.async = false; to maintain execution order for dynamically-added scripts isn't supported in Safari 5.0.

Resources: MDN article, Demo, has.js test.
ls8‒602.13‒535.1‒TP5.0‒10.35.5‒910‒113.6‒55all91
html5PageTransitionEvent

Fired at the Window when the page's entry in the session history stops being the current entry. Includes the pageshow and pagehide events.

Resources: pageshow - Event reference | MDN, HTML onpageshow Event Attribute.
ls4‒602.3‒535‒TP5.0‒10.35.5‒10112‒55all91
css3CSS pointer-events (for HTML)

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

Already part of the SVG specification, and all SVG-supporting browsers appear to support the property on SVG elements.

Resources: Article & tutorial, has.js test, Polyfill.
unoff4‒602.1‒534‒TP3.2‒10.35.5‒10113.6‒55all91
css3CSS Repeating Gradients

Method of defining a repeating linear or radial color gradient as a CSS image.

Firefox 10+, Chrome 26+ and Opera 11.6+ also support the new "to (side)" syntax.

Resources: MDN article, Information page, WebPlatform Docs.
Parent feature: CSS Gradients.
cr26‒602.14‒4.34.4‒536.1‒TP7.0‒10.35.5‒910‒1116‒55all91
html5Autofocus attribute

Allows a form field to be immediately focused on page load.

While not supported in iOS Safari, it does work in iOS WebViews.

Resources: Article on autofocus.
ls5‒602.13‒535‒TP3.2‒10.35.5‒910‒114‒55all91
cssletter-spacing CSS property

Controls spacing between characters of text (i.e. "tracking" in typographical terms). Not to be confused with kerning.

Browser-specific notes:
#1: Truncates or rounds fractional portions of values.

Resources: Mozilla Developer Network.
rec30‒602.3‒4.34.4‒536.1‒TP4.0‒10.36‒89‒112‒55all90
css3CSS3 Background-image options

New properties to affect background images, including background-clip, background-origin and background-size.

Safari also supports the unofficial -webkit-background-clip: text (only with prefix).

Browser-specific notes:
#1: Partial support in Opera Mini refers to not supporting background sizing or background attachments. However Opera Mini 7.5 supports background sizing (including cover and contain values).
#2: Partial support in Safari 6 refers to not supporting background sizing offset from edges syntax.
#3: Does not support background-size values in the background shorthand.

Resources: Detailed compatibility tables and demos, Information page, Polyfill for IE7-8.
cr15‒602.23‒4.34.4‒537‒TP7.0‒10.35.5‒89‒114‒55all90
domDOM Parsing and Serialization

Various DOM parsing and serializing functions, specifically DOMParser, XMLSerializer, innerHTML, outerHTML and insertAdjacentHTML.

Browser-specific notes:
#1: Partial support refers to lacking support for parseFromString on the DOMParser.
#2: Partial support refers to supporting only innerHTML.
#3: Partial support refers to supporting only innerHTML and insertAdjacentHTML.

Resources: MDN - XMLSerializer, Comparing Document Position by John Resig.
cr30‒602.1‒4.34.4‒537.1‒TP8‒10.35.5‒8910‒1112‒55all90
domKeyboardEvent.which

A legacy KeyboardEvent property that is equivalent to either KeyboardEvent.keyCode or KeyboardEvent.charCode depending on whether the key is alphanumeric.

This property is legacy and deprecated, but its replacement(s) are not yet widely supported.

Browser-specific notes:
#1: event.which number for keys does not always match expected value (difference may be dependent on hardware vs. on-screen keyboard?).

Resources: Mozilla Developer Network.
unoff4‒602.3‒4.34.4535.1‒TP5.0‒10.35.5‒89‒112‒55all90
html5Range input type

Form field type that allows the user to select a value using a slider widget.

Currently all Android browsers with partial support hide the slider input field by default. However, the element can be styled to be made visible and usable.

Resources: Polyfill for Firefox, Cross-browser polyfill, Tutorial, has.js test, WebPlatform Docs, rangeslider.js polyfill.
Parent feature: HTML5 form features.
ls4‒602.1‒4.14.2‒533.1‒TP5.0‒10.35.5‒910‒11223‒55all90
jsBlob URLs

Method of creating URL handles to the specified File or Blob object.

Resources: MDN article.
Parent feature: File API.
wd23‒602.14‒4.34.4‒536.1‒TP7.0‒10.35.5‒910‒114‒55all90
css3TTF/OTF - TrueType and OpenType font support

Support for the TrueType (.ttf) and OpenType (.otf) outline font formats in @font-face.

Browser-specific notes:
#1: Partial support in IE9+ refers to the fonts only working when set to be "installable". Support for this is tracked here.

Resources: What is the status of TTF support in Internet Explorer?.
Parent feature: @font-face Web fonts.
other4‒602.2‒533.1‒TP4.2‒10.35.5‒89‒113.5‒55all90
jsCross-Origin Resource Sharing

Method of performing XMLHttpRequests across domains.

Browser-specific notes:
#1: Does not support CORS for images in <canvas>.
#2: Supported somewhat in IE8 and IE9 using the XDomainRequest object (but has limitations).
#3: Does not support CORS for <video> in <canvas>: https://bugs.webkit.org/show_bug.cgi?id=135379.

Resources: Mozilla Hacks blog post, Alternative implementation by IE8, DOM access using CORS, has.js test.
ls13‒602.1‒4.34.4‒536‒TP6.0‒10.35.58‒910113.5‒55all89
html5Session history management

Method of manipulating the user's browser's session history in JavaScript using history.pushState, history.replaceState and the popstate event.

Older iOS versions and Android 4.0.4 claim support, but implementation is too buggy to be useful.

Resources: Introduction to history management, MDN article, Demo page, History.js polyfill, has.js test, WebPlatform Docs.
ls5‒602.234.2‒536‒TP5.0‒10.35.5‒910‒114‒55all89
jsOnline/offline status

Events to indicate when the user's connected (online and offline events) and the navigator.onLine property to see current status.

"online" does not always mean connection to the internet, it can also just mean connection to some network.

Early versions of Chrome and Safari always reported "true" for navigator.onLine.

Browser-specific notes:
#0: Safari 7.0 supports only the event listener on window, and not on document.body.
#1: Seems to support navigator.onLine but not online/offline events.
#2: IE8 only supports the online/offline events on document.body, rather than window.
#3: Desktop Firefox responds to the status of its "Work Offline" mode. If not in that mode, navigator.onLine is always true, regardless of the actual network connectivity status. See bug for details.

Resources: MDN article.
ls14‒602.3‒535‒TP4.2‒10.35.589‒114‒3641all89
jsECMAScript 5

Full support for the ECMAScript 5 specification. Features include Function.prototype.bind, Array methods like indexOf, forEach, map & filter, Object methods like defineProperty, create & keys, the trim method on Strings and many more.

As the specification includes many JavaScript features, un-numbered partial support varies widely and is shown in detail on the ECMAScript 5 compatibilty tables by Kangax.

Browser-specific notes:
#1: Does not support parseInt() ignoring leading zeros.
#2: Does not support Strict mode.
#3: Does not support zero-width chars in identifiers & Immutable undefined.
#4: IE8 has virtually no ES5 support, but does support Object.defineProperty, Object.getOwnPropertyDescriptor, JSON parsing & Property access on strings.

Resources: Detailed compatibility tables & tests, Overview of objects & properties, ES5 polyfill.
other23‒602.14.1‒4.34.4‒536‒TP6.0‒10.35.58910‒11421‒55all88
domNode.compareDocumentPosition()

Compares the relative position of two nodes to each other in the DOM tree.

Browser-specific notes:
#1: The spec requires that comparisons of nodes in different documents, and comparisons where at least one node is not in any document, must arbitrarily (but consistently) set either the DOCUMENT_POSITION_PRECEDING or DOCUMENT_POSITION_FOLLOWING bit in the result. These browser versions don't set either bit in some such cases.
#2: Sets neither the DOCUMENT_POSITION_DISCONNECTED bit nor the DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC bit in some cases when comparing nodes in different documents or when comparing a node which is not in any document.

Resources: Mozilla Developer Network article.
ls30‒602.3‒4.34.4‒536.1104.010.05.5‒89‒114‒55all88
domKeyboardEvent.location

A KeyboardEvent property that indicates the location of the key on the input device. Useful when there are more than one physical key for the same logical key (e.g. left or right "Control" key; main or numpad "1" key).

Browser-specific notes:
#1: Only supports KeyboardEvent.keyLocation from an older draft of the DOM Level 3 Events spec instead.

Resources: Mozilla Developer Network.
wd30‒602.3‒4.34.4‒536.1‒TP8‒10.35.5‒89‒1115‒55all88
svgSVG in HTML img element

Method of displaying SVG images in HTML using <img>.

Browser-specific notes:
#1: Partial support refers to not supporting embedded images (data URIs) inside the SVG.

Resources: Blog post with examples, Blog with SVGs an images.
ls28‒602.13‒4.34.4‒53493.29.05.5‒89‒114‒55all88
otherMPEG-4/H.264 video format

Commonly used video compression format.

Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.

Partial support for older Firefox versions refers to the lack of support in OS X & some non-Android Linux platforms.

Browser-specific notes:
#1: The Android 2.3 browser requires specific handling to play videos.
#2: Partial supports refers to the lack of hardware acceleration.

Resources: Wikipedia article, Firefox extension allowing support in Win7.
Parent feature: Video element.
other4‒602.33‒4.34.4‒533.2‒TP3.2‒10.35.5‒89‒1122135‒55all87
jsFileReader API

Method of reading the contents of a File or Blob object into memory.

Browser-specific notes:
#1: Does not support readAsBinaryString.

Resources: FileReader API, WebPlatform Docs.
Parent feature: File API.
wd6‒602.13‒536‒TP6.0‒10.35.5‒910‒113.6‒55all87
html5wbr (word break opportunity) element

Represents an extra place where a line of text may optionally be broken.

Resources: Mozilla Developer Network.
ls4‒602.3‒533.2‒TP5.0‒10.35.58‒112‒55all87
otherSPDY protocol

Networking protocol for low-latency transport of content over the web. Superseded by HTTP version 2.

See also support for HTTP2, successor of SPDY.

Chrome will be removing support in 2016 (in favor of HTTP2), other browsers likely to follow.

Resources: Wikipedia, SPDY whitepaper.
unoff4‒41512.13‒4.4533.188‒10.35.5‒101113‒3651all86
css3CSS Animation

Complex method of animating certain properties of an element.

Browser-specific notes:
#1: Partial support in Android browser refers to buggy behavior in different scenarios.

Resources: Blog post on usage, Information page, WebPlatform Docs.
wd4‒41432.14‒4.453493.29.05.5‒910‒1116‒55all86
domElement.insertAdjacentElement() & Element.insertAdjacentText()

Methods for inserting an element or text before or after a given element, or appending or prepending an element or text to a given element's list of children.

Resources: WHATWG DOM Specification for Element.insertAdjacentText(), Mozilla Developer Network article on Element.insertAdjacentElement(), Mozilla Developer Network article on Element.insertAdjacentText(), JS Bin testcase.
ls4‒602.3‒533.1‒TP3.2‒10.36‒112‒3648all86
domNode.innerText

A property representing the text within a DOM element and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard.

This test only checks that the property exists and works correctly in a very simple case.
This blog post by kangax explains the history of this property, gives much more detailed cross-browser compatibility information, and gives a detailed strawman specification for the property.
Node.innerText is similar to, but has some important differences from, the standard Node.textContent property.

Resources: Mozilla Developer Network, WHATWG Compatibility Standard issue #5: spec innerText, Rangy, a JS range and selection library which contains an innerText implementation, Standardizing innerText – Web Incubator Community Group (WICG) discussion, MSDN documentation.
ls4‒602.3‒533.2‒TP4.0‒10.36‒112‒3645all86
otherAAC audio file format

Advanced Audio Coding format, designed to be the successor format to MP3, with generally better sound quality.

Support refers to using the audio element, not other conditions.

Browser-specific notes:
#1: Partial support in Firefox refers to only supporting AAC in an MP4 container and only when the operating system already has the codecs installed.

Resources: Wikipedia article.
Parent feature: Audio element.
other12‒602.13‒534‒TP4.0‒10.35.5‒89‒11222‒55all86
domdocument.evaluate & XPath

Allow nodes in an XML/HTML document to be traversed using XPath expressions.

Resources: XPath in Javascript: Introduction, MDN article, Edge team article on implementation.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒113‒55all86
svgSVG SMIL animation

Method of using animation elements to animate SVG images.

Browser-specific notes:
#1: Partial support in older Safari versions refers to not working in HTML files or CSS background images.
#2: As of Chrome 45 & Opera 32 SMIL is deprecated and usage will result in a warning in the console. Support is expected to be dropped in some future version.

Resources: Examples on SVG WOW, MDN article, JS library to support SMIL in SVG, has.js test, Polyfill for SMIL animate events on SVG.
rec5‒41452.13‒536‒TP6.0‒10.36‒114‒55all85
domindeterminate checkbox

Indeterminate checkboxes are displayed in a state which is distinct both from being checked or being unchecked. They are commonly used in hierarchical checkboxes to indicate that only some of the checkbox's descendants are checked.

Indeterminacy does not affect a checkbox's checkedness state. It merely affects how the checkbox is displayed.

Resources: CSS-Tricks article, WebKit Bug 160484 - iOS doesn't support indeterminate checkboxes.
ls28‒602.1‒4.34.4‒536‒TP3.2‒10.36‒113.6‒55all85
css3CSS background-position edge offsets

Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px; for positioning 5px from the bottom-right corner.

Resources: MDN article on background-position, Basic information.
cr25‒602.1‒4.34.4‒537‒TP7.0‒10.35.5‒89‒1113‒55all84
domCustomEvent

A DOM event interface that can carry custom application-defined data.

Not supported in some versions of Android's old WebKit-based WebView.

Browser-specific notes:
#1: While a window.CustomEvent object exists, it cannot be called as a constructor. Instead of new CustomEvent(...), you must use e = document.createEvent('CustomEvent') and then e.initCustomEvent(...).
#2: There is no window.CustomEvent object, but document.createEvent('CustomEvent') still works.

Resources: Mozilla Developer Network, Polyfill based on the MDN snippet, EventListener polyfill which includes a CustomEvent polyfill.
ls15‒602.13‒4.34.4‒536.1‒TP6.0‒10.35.5‒89‒1111‒55all84
otherWOFF - Web Open Font Format

Compressed TrueType/OpenType font that contains information about the font's source.

Browser-specific notes:
#1: Reported to be supported in some modified versions of the Android 4.0 browser.

Resources: Mozilla hacks blog post.
Parent feature: @font-face Web fonts.
rec5‒602.1‒4.34.4‒535.1‒TP5.0‒10.35.5‒89‒113.6‒55all84
html5New semantic elements

HTML5 offers some new elements, primarily for semantic purposes. The elements include: section, article, aside, header, footer, nav, figure, figcaption, time, mark & main.

Browser-specific notes:
#1: Partial support refers to missing the default styling, as technically the elements are considered "unknown". This is easily taken care of by manually setting the default display value for each tag.
#2: Partial support refers to only the <main> element (added later to the spec) being "unknown", though it can still be used and styled.

Resources: Workaround for IE, Alternate workaround, Article on structural elements, has.js test.
ls26‒602.2‒4.34.4‒536.1‒TP7.0‒10.36‒89‒11421‒55all84
html5Form attribute

Attribute for associating input and submit buttons with a form.

Resources: Input attribute specification, Article on usage, Microsoft Edge feature request on UserVoice.
Parent feature: HTML5 form features.
ls10‒602.13‒535.1‒TP5.0‒10.35.5‒114‒55all84
svgSVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

Resources: Experiments with filter effects, SVG filter demos, WebPlatform Docs, SVG Filter effects.
rec8‒602.1‒4.34.4‒536‒TP6.0‒10.35.5‒910‒113‒55all84
otherWav audio format

Waveform Audio File Format, aka WAV or WAVE, a typically uncompressed audio format.

Support refers to use using the audio element, not other conditions.

Resources: Wikipedia article.
Parent feature: Audio element.
other8‒602.3‒534‒TP3.2‒10.35.5‒113.5‒55all84
cssbackground-position-x & background-position-y

CSS longhand properties to define x or y positions separately.

A workaround for the lack of support in Firefox 31 - Firefox 48 is to use CSS variables. See this Stack Overflow answer for an example.

Resources: MSDN article, Firefox implementation bug, Blog post on background-position-x & y properties.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒3649all84
cssCSS zoom

Non-standard method of scaling content.

Originally implemented only in Internet Explorer. Although several other browsers support the property, using transform: scale() is the recommended solution to scale content.

Browser-specific notes:
#1: The -ms-zoom property is an extension to CSS, and can be used as a synonym for zoom in IE8 Standards mode.

Resources: CSS Tricks, WebPlatform Docs, MSDN Library, Safari Developer Library, Article explaining usage of zoom as the hack for fixing rendering bugs in IE6 and IE7., Mozilla Developer Network.
unoff4‒602.1‒534‒TP4.0‒10.35.58‒112‒55all84
cssCSS user-select: none

Method of preventing text/element selection using CSS.

Resources: MDN article, CSS Tricks article, MSDN Documentation.
wd4‒41542.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all84
jsWeb Workers

Method of running scripts in the background, isolated from the web page.

Resources: MDN article, Web Worker demo, Polyfill for IE (single threaded), Tutorial.
ls4‒602.2‒4.34.4‒534‒TP5.0‒10.36‒910‒113.5‒55all83
css3Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex as well as display: flex, display: inline-flex, align-content, align-items, align-self, justify-content and order.

Most partial support refers to supporting an older version of the specification or an older syntax.

Browser-specific notes:
#1: Only supports the old flexbox specification and does not support wrapping.
#2: Only supports the 2012 syntax.
#3: Does not support flex-wrap, flex-flow or align-content properties.
#4: Partial support is due to large amount of bugs present (see known issues).

Resources: Flexbox CSS generator, Article on using the latest spec, Tutorial on cross-browser support, Examples on how to solve common layout problems with flexbox, A Complete Guide to Flexbox, Flexbox playground and code generator, Flexbugs: Repo for flexbox bugs, 10up Open Sources IE 8 and 9 Support for Flexbox, Ecligrid - Mobile first flexbox grid system, The Difference Between Width and Flex-Basis.
cr29‒602.1‒4.34.4‒536.197.09.05.5‒91011228‒55all83
css3CSS3 3D Transforms

Method of transforming an element in the third dimension using the transform property. Includes support for the perspective property to set the perspective in z-space and the backface-visibility property to toggle display of the reverse side of a 3D-transformed element.

Browser-specific notes:
#1: Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
#2: Safari 9 is reported to still require a prefix for the related backface-visibility property.

Resources: Multi-browser demo, Mozilla hacks article, 3D CSS Tester, has.js test, WebPlatform Docs, Intro to CSS 3D transforms.
wd12‒3436‒602.13‒4.453493.29.05.5‒910‒1116‒55all83
domclassList (DOMTokenList)

Method of easily manipulating classes on elements, using the DOMTokenList object.

Browser-specific notes:
#1: Does not have support for classList on SVG or MathML elements.
#2: Does not support the second parameter for the toggle method.
#3: Does not support multiple parameters for the add() & remove() methods.

Resources: Mozilla Hacks article, Polyfill script, WebPlatform Docs, SitePoint article, Demo using classList, MDN article.
ls28‒602.13‒4.34.4‒537‒TP7.0‒10.35.5‒910‒113.626‒55all83
jsSelection API

API for accessing selected content of a document, including the window.getSelection() method, as well as the selectstart & selectionchange events on document.

See also support for the related DOM range.

Browser-specific notes:
#1: Supports window.getSelection() but no selection events.
#2: Supports selection events, but not window.getSelection().
#3: Does not support the selectstart event.
#4: window.getSelection() may fail on tapping buttons, as the selection is lost right before the listener code runs.
#5: Selection events are supported behind the dom.select_events.enabled flag.

Resources: Firefox support bug.
wd15‒602.1‒4.14.24.4‒535.1‒TP5.0‒10.36‒89‒112‒3652all83
domfocusin & focusout events

The focusin and focusout events fire just before the element gains or loses focus, and they bubble. By contrast, the focus and blur events fire after the focus has shifted, and don't bubble.

In browsers that don't support these events, one alternative is to use a capture phase event listener for the focus and/or blur events.

Resources: focusin event at Mozilla Developer Network, focusout event at Mozilla Developer Network, Mozilla Bug 687787 - Add support for DOM3 focusin/focusout.
wd15‒602.14‒535.1‒TP5.0‒10.36‒112‒3652all83
html5progress element

Method of indicating a progress state.

Browser-specific notes:
#1: iOS Safari does not support "indeterminate" <progress> elements.

Resources: CSS-Tricks article, Mozilla Developer Network article, Dev.Opera article, Examples of progress and meter elements.
Parent feature: HTML5 form features.
ls8‒602.1‒4.34.4‒536‒TP7.0‒10.35.5‒910‒116‒55all83
cssCSS initial value

A CSS value that will apply a property's initial value as defined in the CSS specification that defines the property.

Resources: Mozilla Developer Network, CSS Tricks article.
cr4‒602.3‒533.2‒TP4.0‒10.35.5‒1119‒55all82
html5Spellcheck attribute

Attribute for input/textarea fields to enable/disable the browser's spellchecker.

The partial support in mobile browsers results from their OS generally having built-in spell checking instead of using the wavy underline to indicate misspelled words. spellcheck="false" does not seem to have any effect in these browsers.

Browsers have different behavior in how they deal with spellchecking in combination with the the lang attribute. Generally spelling is based on the browser's language, not the language of the document.

Resources: MDN article.
ls9‒602.1‒535.1‒TP3.2‒10.35.5‒910‒112‒55all82
cssMedia Queries: resolution feature

Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query.

Browser-specific notes:
#1: Supports the dpi unit, but does not support dppx or dpcm units.
#2: Firefox before 16 supports only dpi unit, but you can set 2dppx per min--moz-device-pixel-ratio: 2.
#3: Supports the non-standard min/max-device-pixel-ratio.

Resources: How to unprefix -webkit-device-pixel-ratio, WebKit Bug 78087: Implement the 'resolution' media query, WHATWG Compatibility Standard: -webkit-device-pixel-ratio.
Parent feature: CSS3 Media Queries.
rec29‒602.3‒4.34.4‒534‒TP4.0‒10.35.5‒89‒1116‒55all82
css::selection CSS pseudo-element

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

Resources: ::selection test, WebPlatform Docs.
wd4‒602.1‒4.34.4‒533.1‒TP3.2‒10.35.5‒89‒112‒55all82
jsWeb Sockets

Bidirectional communication technology for web apps.

Reported to be supported in some Android 4.x browsers, including Sony Xperia S, Sony TX and HTC.

Browser-specific notes:
#1: Partial support in older browsers refers to the websockets implementation using an older version of the protocol and/or the implementation being disabled by default (due to security issues with the older protocol).
#2: Partial support in older browsers refers to lacking support for binary data.

Resources: WebSockets information, Details on newer protocol, Wikipedia, has.js test, WebPlatform Docs.
ls16‒602.1‒4.34.4‒537‒TP6.0‒10.35.5‒910‒1111‒55all82
jsFileReaderSync

Allows files to be read synchronously in Web Workers.

Resources: MDN article.
Parent feature: FileReader API.
wd15‒602.1‒4.34.4‒536‒TP6.0‒10.35.5‒910‒118‒55all81
domMutation Observer

Method for observing and reacting to changes to the DOM. Replaces MutationEvents, which is deprecated.

When the content of a node with a single CharacterData child node is changed by innerHTML attribute and the node have a single different one as a result, WebKit browsers consider it as a characterData mutation of the child CharacterData node, while other browsers think it as a childList mutation of the parent node.

Resources: MutationObserver from MDN, Polyfill.
ls27‒602.14‒4.34.4‒536.1‒TP7.0‒10.35.5‒89‒101114‒55all81
jsBlob constructing

Construct Blobs (binary large objects) either using the BlobBuilder API (deprecated) or the Blob constructor.

Partial support refers to only supporting the now deprecated BlobBuilder to create blobs.

Resources: MDN article on BlobBuilder, MDN article on Blobs.
Parent feature: File API.
wd20‒602.13‒4.4536‒TP6.0‒10.35.5‒910‒1113‒55all81
jsrequestAnimationFrame

API allowing a more efficient way of running script-based animation, compared to traditional methods using timeouts. Also covers support for cancelAnimationFrame.

Browser-specific notes:
#1: Partial support refers to lacking cancelAnimationFrame support.
#2: Supports webkitCancelRequestAnimationFrame rather than `webkitCancelAnimationFrame.

Resources: Blog post, Mozilla Hacks article, WebPlatform Docs, MDN Docs.
ls24‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒910‒111123‒55all80
otherStrict Transport Security

Declare that a website is only accessible over a secure connection (HTTPS).

The HTTP header is 'Strict-Transport-Security'.

Browser-specific notes:
#1: IE 11 added support in an update on June 9, 2015.

Resources: Chromium article, MDN article, OWASP article.
other4‒602.1‒4.34.4‒537‒TP7.0‒10.35.5‒10114‒55all80
html5Form validation

Method of setting required fields and field types without requiring JavaScript. This includes preventing forms from being submitted when appropriate, the checkValidity() method as well as support for the :invalid, :valid, and :required CSS pseudo-classes.

Browser-specific notes:
#1: Partial support refers to lack of notice when form with required fields is attempted to be submitted. See WebKit bug.
#2: Partial support in IE10 mobile refers to lack of warning when blocking submission.
#3: Partial support in Opera Mini refers to only supporting the CSS pseudo classes.

Resources: WebPlatform Docs, WebKit Blog: HTML Interactive Form Validation.
Parent feature: HTML5 form features.
ls10‒602.14‒4.44.4.3510.14.010.35.5‒910‒114‒55all80
jsPage Visibility

JavaScript API for determining whether a document is visible on the display.

Resources: MDN article, WebPlatform Docs, SitePoint article, Demo.
rec1433‒602.1‒4.34.4536.1‒TP7.0‒10.35.5‒910‒1118‒55all80
domdisabled attribute of the fieldset element

Allows disabling all of the form control descendants of a fieldset via a disabled attribute on the fieldset element itself.

Browser-specific notes:
#1: Text inputs that are descendants of a disabled fieldset appear disabled but the user can still interact with them. See IE bug #962368..
#2: File inputs that are descendants of a disabled fieldset appear disabled but the user can still interact with them. See IE bug #817488..

Resources: JS Bin Testcase/Demo.
ls20‒602.1‒4.34.4‒536‒TP6.0‒10.368‒910‒114‒55all80
otherWebVTT - Web Video Text Tracks

Format for marking up text captions for multimedia resources.

WebVTT must be used with the <track> element.

Browser-specific notes:
#1: Firefox currently lacks support for the ::cue pseudo-element. See bug #865395..

Resources: Getting Started With the Track Element, An Introduction to WebVTT and track.
Parent feature: Video element.
wd18‒602.1‒4.34.4‒536‒TP7.0‒10.35.5‒910‒11231‒55all79
html5Number input type

Form field type for numbers.

Browser-specific notes:
#1: UI widget does not include increment/decrement buttons.
#2: UI widget does not take the "step", "min" or "max" attributes into account.
#3: Firefox doesn't support autocomplete content via datalist elements.
#4: Does not include increment/decrement buttons, but does supports increment/decrement via arrow up & down keys.

Resources: Tutorial, Polyfill, has.js test, WebPlatform Docs, Poor browser support for localized decimal marks, commas.
Parent feature: HTML5 form features.
ls6‒602.14‒535‒TP3.2‒10.35.5‒910‒11229‒55all79
otherOgg Vorbis audio format

Vorbis is a free and open source audio format, most commonly used with the Ogg container.

Support refers to use using the audio element, not other conditions.

Resources: Wikipedia article.
Parent feature: Audio element.
other4‒602.3‒533.1‒TP3.2‒10.35.5‒113.5‒55all79
css3CSS3 Overflow-wrap

Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the word-wrap property.

Partial support refers to requiring the legacy name "word-wrap" (rather than "overflow-wrap") to work.

Resources: MDN article, Information page, WebPlatform Docs, Bug on Firefox support, Microsoft Edge feature request on UserVoice.
wd23‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒113.5‒3649all79
domKeyboardEvent.getModifierState()

KeyboardEvent method that returns the state (whether the key is pressed/locked or not) of the given modifier key.

Resources: Mozilla Developer Network, WebKit feature request bug.
wd30‒602.1‒4.34.4‒533.110.13.210.35.5‒89‒1115‒55all78
jscrypto.getRandomValues()

Method of generating cryptographically random values.

Resources: MDN article.
cr11‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒1011221‒55all78
jsHigh Resolution Time API

Method to provide the current time in sub-millisecond resolution and such that it is not subject to system clock skew or adjustments. Called using performance.now().

Resources: MDN article, HTML5Rocks article, SitePoint article, Demo.
rec24‒602.1‒4.34.4‒533.188‒10.35.5‒910‒1115‒55all77
cssCSS background-attachment

Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local.

Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.

Browser-specific notes:
#1: Partial support refers to supporting fixed but not local.
#2: Partial support refers to supporting local but not fixed.
#3: Only supports local when -webkit-overflow-scrolling: touch is _not_ used.
#4: Does not support fixed, and due to a bug only supports local if a border-radius is set on the element.

Resources: MDN article.
cr4‒602.14.1‒4.34.4‒535‒TP5.0‒10.35.5‒89‒11225‒55all77
cssImproved kerning pairs & ligatures

Currently non-standard method of improving kerning pairs & ligatures using text-rendering: optimizeLegibility.

Browser-specific notes:
#1: Partial support in Android browser versions is due to a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render.

Resources: MDN article, CSS Tricks article.
unoff4‒602.13‒4.34.4‒535‒TP4.2‒10.35.5‒113‒55all77
css3ch (character) unit

Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.

Browser-specific notes:
#1: IE supports the ch unit, but unlike other browsers its width is that specifically of the "0" glyph, not its surrounding space. As a result, 3ch for example is shorter than the width of the string "000" in IE.

Resources: Blog post on using ch units, Various uses for the ch unit.
cr27‒602.1‒4.34.4‒537‒TP7.0‒10.35.5‒89‒112‒55all76
jsIndexedDB

Method of storing data client-side, allows indexed database queries.

Browser-specific notes:
#1: Partial support in IE 10 & 11 refers to a number of subfeatures not being supported.
#2: Partial support in Safari & iOS 8 & 9 refers to seriously buggy behavior as well as complete lack of support in WebViews.

Resources: Mozilla Hacks article, Polyfill for browsers supporting WebSQL, has.js test, WebPlatform Docs.
rec24‒602.1‒4.34.4‒537.110810.05.5‒910‒1116‒55all76
domXMLHttpRequest advanced features

Adds more functionality to XHR (aka AJAX) requests like file uploads, transfer progress information and the ability to send form data. Previously known as XMLHttpRequest Level 2, these features now appear simply in the XMLHttpRequest spec.

Browser-specific notes:
#1: Partial support refers to not supporting json as responseType.
#2: Partial support refers to not supporting .timeout and .ontimeout.
#3: Partial support refers to not supporting blob as responseType.

Resources: MDN article on FormData, Polyfill for FormData object, WebPlatform Docs.
ls2931‒602.13‒4.34.44.4.37.1‒TP8‒10.35.5‒910‒1112‒55all76
otherContent Security Policy 1.0

Mitigate cross-site scripting attacks by whitelisting allowed sources of script, style, and other resources.

The standard HTTP header is Content-Security-Policy which is used unless otherwise noted.

Browser-specific notes:
#1: Supported through the X-Content-Security-Policy header.
#2: Supported through the X-Webkit-CSP header.

Resources: HTML5Rocks article, CSP Examples & Quick Reference.
cr25‒602.1‒4.34.4‒537‒TP7.0‒10.35.5‒910‒11423‒55all76
css3Viewport units: vw, vh, vmin, vmax

Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Browser-specific notes:
#1: Partial support in IE9 refers to supporting "vm" instead of "vmin".
#2: Partial support refers to not supporting the "vmax" unit.
#3: Partial support in iOS7 is due to buggy behavior of the "vh" unit (see workarounds: 1, 2).

Resources: Blog post, Polyfill, Buggyfill - Polyfill that fixes buggy support, Back-Forward issue blog post, Microsoft Edge feature request on UserVoice.
cr26‒602.1‒4.34.4‒536.1‒TP8‒10.35.5‒8910‒1119‒55all76
css3calc() as CSS unit value

Method of allowing calculated values for length units, i.e. width: calc(100% - 3em).

Support can be somewhat emulated in older versions of IE using the non-standard expression() syntax.

Due to the way browsers handle sub-pixel rounding differently, layouts using calc() expressions may have unexpected results.

Browser-specific notes:
#1: Partial support in Android Browser 4.4 refers to the browser lacking the ability to multiply and divide values.
#2: Partial support in IE9 refers to the browser crashing when used as a background-position value.

Resources: Mozilla Hacks article, MDN article, WebPlatform Docs.
cr26‒602.1‒4.34.4536.1‒TP7.0‒10.35.5‒8910‒1116‒55all76
dommatches() DOM method

Method of testing whether or not a DOM element matches a given selector. Formerly known (and largely supported with prefix) as matchesSelector.

Partial support refers to supporting the older specification's "matchesSelector" name rather than just "matches".

Resources: MDN article, WebPlatform Docs, Microsoft Edge feature request on UserVoice.
ls434‒602.2‒4.4537.1‒TP8‒10.35.5‒89‒113.6‒3134‒55all76
html5srcdoc attribute for iframes

Override the content specified in the src attribute (if present) with HTML content within the attribute.

Resources: WebPlatform Docs, MDN Docs, Srcdoc Polyfill, Article.
ls20‒602.1‒4.34.4‒536‒TP6.0‒10.36‒11325‒55all75
jsResource Timing

Method to help web developers to collect complete timing information related to resources on a document.

Browser-specific notes:
#1: Can be enabled in Firefox using the dom.enable_resource_timing flag.

Resources: Demo, Blog post, SitePoint article.
cr25‒602.1‒4.34.4‒533.1TP3.2‒10.35.5‒910‒1123135‒55all74
jsInternationalization API

Locale-sensitive collation (string comparison), number formatting, and date and time formatting.

Resources: MDN reference, The ECMAScript Internationalization API, Working With Intl, WebKit tracking bug, Firefox for Android tracking bug.
other24‒602.1‒4.34.4‒533.1103.210.05.5‒1011229‒55all74
html5tabindex global attribute

Specifies the focusability of the element and in what order (if any) it should become focused (relative to other elements) when "tabbing" through the document.

Mac OS X "Full Keyboard Access" refers to setting Keyboard→Shortcuts→Full Keyboard Access to "All controls" in the System Preferences.

"Unknown" support for mobile browsers is due to lacking a method of tabbing through fields.

Browser-specific notes:
#1: On Mac OS X, unless Full Keyboard Access is enabled, <a> elements are not keyboard-focusable, even if they have tabindex="0".
#2: <a> elements are never keyboard-focusable, even if they have tabindex="0". Unless Full Keyboard Access is enabled, then <button>s, radio buttons, and checkboxes are also not keyboard-focusable, even if they have tabindex="0".
#3: Has "previous" and "next" virtual keyboard buttons that follow tabindex order.

Resources: Mozilla Developer Network article.
ls15‒602.1‒535.1‒TP3.2‒10.37‒114‒55all74
cssCSS widows & orphans

CSS properties to control when lines break across pages or columns by defining the amount of lines that must be left before or after the break.

Some older WebKit-based browsers recognize the properties, but do not appear to have actual support.

Browser-specific notes:
#1: Supports widows & orphans properties, but due to not supporting CSS multi-columns the support is only for page breaks (for print).

Resources: CSS last-line: Controlling Widows & Orphans, Firefox support bug, codrops article on orphans, codrops article on widows.
rec25‒602.1‒4.34.4‒537‒TP7.0‒10.35.58‒910‒112‒3652all73
html5Reversed attribute of ordered lists

This attribute makes an ordered list number its items in descending order (large to small), instead of ascending order (small to large; the default). The order that the list items are displayed in is not affected.

Resources: HTML5 Doctor article on <ol> element attributes (including reversed), Microsoft Edge feature request on UserVoice.
ls20‒602.1‒4.34.4‒536.1‒TP6.0‒10.35.5‒1118‒55all72
jsServer-sent events

Method of continuously sending data from a server to the browser, rather than repeatedly requesting it (EventSource interface, used to fall under HTML5).

Resources: HTML5 Rocks tutorial, Blog post with demo, has.js test, Polyfill.
ls6‒602.1‒4.34.4‒535‒TP4.0‒10.35.5‒116‒55all72
html5meter elementls8‒602.1‒4.34.4‒536‒TP3.210.35.5‒1116‒55all72
jsFile API

Method of manipulating file objects in web applications client-side, as well as programmatically selecting them and accessing their data.

Browser-specific notes:
#1: Does not have FileReader support.
#2: Does not support the File constructor.

Resources: MDN article, WebPlatform Docs, Polyfill.
wd13‒3738‒602.13‒4.34.44.4.36106.010.05.5‒910‒113.628‒55all72
css3CSS3 Cursors (original values)

CSS3 cursor values added in the 2004 spec, including none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize and all-scroll.

Browser-specific notes:
#1: Partial support refers to no support for the alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize or context-menu cursors.
#2: Partial support refers to not supporting 'none'.

Resources: MDN Documentation.
cr5‒602.1‒535‒TP3.2‒10.35.5‒89‒114‒55all71
css3CSS font-feature-settings

Method of applying advanced typographic and language-specific font features to supported OpenType fonts.

Whenever possible, font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position should be used. This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists. In particular, this CSS property shouldn't be used to enable small caps.

Browser-specific notes:
#1: From Gecko 2.0 (Firefox 4.0) to Gecko 14.0 (Firefox 14.0) included, Gecko supported an older syntax, slightly different from the modern one: http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/.
#2: Partial support in older Chrome versions refers to lacking support in Mac OS X.

Resources: Demo pages (IE/Firefox only), Mozilla hacks article, Detailed tables on accessability support, WebPlatform Docs, Mozilla Developer Network, OpenType layout feature tag registry, Syntax for OpenType features in CSS (Adobe Typekit Help).
cr21‒41482.1‒4.34.4533.19.17.09.35.5‒910‒1115‒3134‒55all71
jsChannel messaging

Method for having two-way communication between browsing contexts (using MessageChannel).

Browser-specific notes:
#1: Supported in Firefox behind the dom.messageChannel.enabled flag. Reported to not work in web workers before version 41.

Resources: An Introduction to HTML5 web messaging.
Parent feature: Cross-document messaging.
ls4‒602.1‒4.34.4‒535‒TP5.0‒10.35.5‒910‒11226‒3641all71
html5Details & Summary elements

The <details> element generates a simple no-JavaScript widget to show/hide element contents, optionally by clicking on its child <summary> element.

Browser-specific notes:
#1: Enabled in Firefox through the dom.details_element.enabled flag.
#2: 'toggle' event is not supported.
#3: <summary> is not keyboard accessible.

Resources: jQuery fallback script, Fallback script, HTML5 Doctor article, has.js test, WebPlatform Docs, Bug on Firefox support, Details Element Polyfill.
ls19‒3436‒602.14‒53610.16.0‒10.36‒89‒113‒3649all71
otherTLS 1.1

Version 1.1 of the Transport Layer Security (TLS) protocol.

Resources: Wikipedia article on TLS.
other22‒602.1‒4.4537‒TP5.0‒10.35.58‒1011224‒55all71
domTouch events

Method of registering when, where and how the interface is touched, for devices with a touch screen. These DOM events are similar to mousedown, mousemove, etc.

Internet Explorer implements Pointer Events specification which supports more input devices than Touch Events one.

There is a library on GitHub that is working toward bringing W3C touch events to IE 10 and 11: https://github.com/CamHenlin/TouchPolyfill.

Removed support in Firefox refers to desktop Firefox only.

Browser-specific notes:
#1: Can be enabled in Firefox using the dom.w3c_touch_events.enabled flag (disabled by default for site compatibility reasons).
#2: Supported on IE11 Mobile for phones with "Windows Phone 8.1 Update".
#3: Can be enabled in Edge using the "Enable touch events" flag under about:flags.

Resources: Detailed support tables, Multi-touch demo, Information on the spec development, Internet Explorer's gesture and touch implementation., Touch polyfill for supporting touch events on Internet Explorer, MDN – Touch events.
rec22‒602.1‒533.1‒TP3.2‒10.35.5‒910‒111825‒3652all70
cssCSS writing-mode property

Property to define whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

Browser-specific notes:
#1: Internet Explorer supports different values from an earlier version of the spec, which originated from SVG.
#2: Supported in Firefox under the layout.css.vertical-text.enabled flag.

Resources: MDN article, Chrome Platform Status.
cr8‒41482.13‒4.4535.1‒TP5.0‒10.35.5‒112‒353641all70
otherTLS 1.2

The latest version of the Transport Layer Security (TLS) protocol. Allows for data/message confidentiality, and message authentication codes for message integrity and as a by-product message authentication.

Resources: Wikipedia article on TLS.
other30‒602.1‒4.4537‒TP5.0‒10.35.58‒1011227‒55all70
jsWeb SQL Database

Method of storing data client-side, allows Sqlite database queries for access and manipulation.

The Web SQL Database specification is no longer being maintained and support may be dropped in future versions.

Resources: HTML5 Doctor article, has.js test.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all70
domChildNode.remove()

DOM node method to remove the node itself from the document.

Resources: Mozilla Developer Network.
ls24‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒11223‒55all70
domHTML templates

Method of declaring a portion of reusable markup that is parsed but not rendered until cloned.

Resources: HTML5Rocks - HTML's New template Tag, Polymer project (polyfill & web components framework).
ls26‒602.1‒4.34.4‒537.1‒TP8‒10.35.5‒11222‒55all69
html5Multiple file selection

Allows users to select multiple files in the file picker.

Browser-specific notes:
#1: Not supported on Android 4.x and below, presumably an OS limitation. Only seems to work in Android 5.x for the Chrome browser.

Resources: Chrome bug (for Android), Article.
Parent feature: HTML5 form features.
ls5‒602.1‒534‒TP6.0‒10.35.5‒910‒113.6‒55all69
canvasCanvas blend modes

Method of defining the effect resulting from overlaying two layers on a Canvas element.

Resources: Blog post.
Parent feature: Canvas (basic support).
cr30‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒1120‒55all69
cssCSS scrollbar styling

Non-standard methods of styling scrollbars.

Currently scrollbar styling doesn't appear to be on any standards track.

Browser-specific notes:
#1: Only supports styling scrollbar colors, no other properties to define the scrollbar's appearance.
#2: Supports scrollbar styling via CSS pseudo-properties.

Resources: Firefox support bug, Stackoverflow article discussiong cross-browser support, Tutorial for IE & WebKit/Blink browsers, "perfect-scrollbar" - Minimal custom scrollbar plugin, jQuery custom content scroller.
unoff4‒602.3‒535.1‒TP7.0‒10.35.5‒112‒55all69
css3CSS background-repeat round and space

Allows CSS background images to be repeated without clipping.

Browser-specific notes:
#1: IE9 does not appear to render "background-repeat: round" correctly.

Resources: MDN article on background-repeat, CSS-Tricks article on background-repeat.
cr432‒602.1‒4.34.4‒537‒TP7.0‒10.35.5‒8910‒112‒3649all69
otherWebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

Will work in IE9+ and Safari/MacOSX provided the user has the WebM codecs installed. Partial support indicates that at least one codec is supported but not all. MS Edge supports VP9 from MSE sources, also progressive sources are not supported by Edge.

Resources: Codec for IE9 support, Info on supporting WebM in Safari, Official website, has.js test, Perian :Mac OSX Webm Codec install.
Parent feature: Video element.
other25‒602.3‒533.2‒TP3.2‒10.35.5‒89‒11428‒55all69
html5Pattern attribute for input fields

Allows validation of an input field based on a given regular expression pattern.

Browser-specific notes:
#1: Partial support refers to not displaying a message for invalid patterns.
#2: Safari browsers support the pattern attribute but will still allow forms to be submitted if the pattern is incorrect. See the form validation data for details.

Resources: Site with common sample patterns.
Parent feature: Form validation.
ls10‒602.1‒4.44.4.35.110.15.010.35.5‒910‒114‒55all69
domElement.scrollIntoViewIfNeeded()

If the element is fully within the visible area of the viewport, it does nothing. Otherwise, the element is scrolled into view. A proprietary variant of the standard Element.scrollIntoView() method.

Resources: Mozilla Bug 403510 - Implement scrollIntoViewIfNeeded, W3C CSSOM View bug #17152: Support centering an element when scrolling into view..
unoff15‒602.3‒535.1‒TP5.0‒10.35.5‒112‒55all68
domautocomplete attribute: on & off values

The autocomplete attribute for input elements indicates to the browser whether a value should or should not be autofilled when appropriate.

This support information does not include support for other autocomplete values.

As described in detail below, many modern browsers ignore the off value on certain fields in certain cases intentionally in order to give the user more control over autofilling fields. One example is the use of password managers.

Browser-specific notes:
#1: Partial support refers to ignoring the off value for password fields. see related blog post.
#2: Partial support in Chrome refers to the browser intentionally ignoring autocomplete="off" when the user uses the browser's autofill functionality. see bug.
#3: Partial support in Firefox refers to ignoring autocomplete="off" for login forms. see bug.
#4: Browser does not display previously submitted values as options with on value.
#5: Safari ignores the off value for username, email and password fields.

Resources: MDN article.
ls27‒4041‒602.1‒537‒TP5.0‒10.35.5‒1011230‒55all68
css3CSS Feature Queries

CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.

See also the CSS.supports() DOM API.

Resources: MDN Article, @supports in Firefox, Test case, WebPlatform Docs.
cr28‒602.1‒4.34.4‒533.193.29.05.5‒11222‒55all68
jsdocument.currentScript

document.currentScript returns the <script> element whose script is currently being processed.

Resources: Polyfill (IE 6-10 only).
ls29‒602.1‒4.34.4‒533.188‒10.35.5‒114‒55all68
domCSS.supports() API

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.

See also @supports in CSS.

Browser-specific notes:
#1: Partial support in Presto-based Opera browsers refers to using an older API (window.supportsCSS).

Resources: MDN Docs, Demo (Chinese), Native CSS Feature Detection via the @supports Rule, CSS @supports, Article (Chinese).
cr28‒602.1‒4.34.4‒533.193.29.05.5‒112023‒55all67
css3CSS3 font-kerning

Controls the usage of the kerning information (spacing between letters) stored in the font. Note that this only affects OpenType fonts with kerning information, it has no effect on other fonts.

Browsers with support for font feature settings can also set kerning value.

Browser-specific notes:
#1: Disabled by default, can be enabled using preference layout.css.font-features.enabled - defaulting to true on Nightly and Aurora only.

Resources: MDN article.
cr2933‒602.1‒4.34.44.4.379.18‒10.35.5‒1122434‒55all67
css:indeterminate CSS pseudo-class

The :indeterminate pseudo-class matches indeterminate checkboxes, indeterminate <progress> bars, and radio buttons with no checked button in their radio button group.

Browser-specific notes:
#1: Doesn't match radio buttons whose radio button group lacks a checked radio button.
#2: Doesn't support the <progress> element.
#3: Doesn't match indeterminate <progress> bars.

Resources: HTML specification for `:indeterminate`, Mozilla Developer Network article, EdgeHTML issue 7124038 - `:indeterminate` pseudo-class doesn't match radio buttons, Mozilla Bug 885359 - Radio groups without a selected radio button should have `:indeterminate` applying, WebKit Bug 156270 - `:indeterminate` pseudo-class should match radios whose group has no checked radio, JS Bin testcase.
unoff15‒3839‒602.14‒4.34.4536.110.17.010.35.5‒8910‒116‒3651all66
html5Color input type

Form field allowing the user to select a color.

Resources: Tutorial, Polyfill, WebPlatform Docs, Microsoft Edge feature request on UserVoice.
Parent feature: HTML5 form features.
ls20‒602.1‒4.34.4‒533.1TP3.2‒10.35.5‒11229‒55all66
html5Drag and Drop

Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.

dataTransfer.items only supported by Chrome.

Currently no browser supports the dropzone attribute.

Firefox supports any kind of DOM elements for .setDragImage. Chrome must have either an HTMLImageElement or any kind of DOM elements attached to the DOM and within the viewport of the browser for .setDragImage.

Browser-specific notes:
#1: Partial support refers to no support for the dataTransfer.files or .types objects.
#2: Partial support refers to not supporting .setDragImage.
#3: Partial support refers to limited supported formats for dataTransfer.setData/getData.

Resources: HTML5 Doctor article, Shopping cart demo, Demo with link blocks, WebPlatform Docs, Polyfill for setDragImage in IE, Implementing Native Drag and Drop, iOS/Android shim for HTML 5 drag'n'drop, Microsoft Edge setDragImage feature request on UserVoice.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒910‒113.5‒55all66
html5Download attribute

When used on an anchor, this attribute signifies that the browser should download the resource the anchor points to rather than navigate to it.

Resources: HTML5Rocks post, Demo: creating a text file and downloading it., WebKit feature request bug.
ls14‒602.1‒4.34.4‒533.110.13.210.35.5‒1120‒55all66
jsWeb Cryptography

JavaScript API for performing basic cryptographic operations in web applications.

Many browsers support the crypto.getRandomValues() method, but not actual cryptography functionality under crypto.subtle.

Firefox also has support for unofficial features.

In Chrome the API is only usable over secure connections. (corresponding bug).

Browser-specific notes:
#1: Support in IE11 is based an older version of the specification.
#2: Supported in Firefox behind the dom.webcrypto.enabled flag.
#3: Supported in Safari using the crypto.webkitSubtle prefix.

Resources: The History and Status of Web Crypto API, Microsoft Research JavaScript Cryptography Library, Cross-browser cryptography library, Support for recommended algorithms in Firefox, Polyfill by Netflix with partial support, PKI.js - another crypto library for Public Key Infrastructure applications, Test suite for various algorithms/methods, Web Cryptography API shim for IE11 and Safari - set of bugfixes and workarounds of prefixed api implementations.
cr4‒3437‒602.1‒4.4537.1‒TP8‒10.36‒10112‒3134‒55all66
otherWebP image format

Image format that supports lossy and lossless compression, as well as animation and alpha transparency.

Both Safari & Firefox are experimenting with supporting WebP images.

Animated WebP images are supported in Chrome 32+ and Opera 19+.

Browser-specific notes:
#1: Partial support in older Chrome, Opera and Android refers to browsers not supporting lossless and alpha versions of WebP.

Resources: Official website, Polyfill for browsers with WebM support, Decoder in JS, Polyfill for browsers with or without WebM support (i.e. IE6-IE9, Safari/iOS version 6.1 and below; Firefox versions 24 and bel, Official website FAQ - Which web browsers natively support WebP?.
unoff23‒602.144.2‒533.1‒TP3.2‒10.35.5‒114‒55all66
jsVibration API

Method to access the vibration mechanism of the hosting device.

Resources: MDN article, Vibration API sample code & demo, Tuts+ article, Demo, Article and Usage Examples.
rec30‒602.1‒4.34.4‒533.1‒TP3.2‒10.35.5‒1116‒55all66
jsPromisesother433‒602.1‒4.44.4.37.1‒TP8‒10.35.5‒11229‒55all66
jsES6 Number

Extensions to the Number built-in object in ES6, including constant properties EPSILON, MIN_SAFE_INTEGER, and MAX_SAFE_INTEGER, and methods isFinite, isInteger, isSafeInteger, and isNaN.

Browser-specific notes:
#1: Partial refers to only supporting the isFinite, isInteger, and isNaN methods.
#2: Partial refers to supporting the same as #1 and the addition of the EPSILON property.
#3: Partial refers to supporting all new features except the isSafeInteger method.
#4: Partial refers to only supporting the isFinite and isNaN methods.

Resources: New number and Math features in ES6.
other1934‒602.14.1‒4.4533.193.29.05.5‒11163132‒55all64
html5accept attribute for file input

Allows a filter to be defined for what type of files a user may pick with from an <input type="file"> dialog.

Not supported means any file can be picked as if the accept attribute was not set, unless otherwise noted.

On Windows, files that do not apply are hidden. On OSX they are grayed out and disabled.

Browser-specific notes:
#1: Supports the type format (e.g. image/*) but not the extension format (e.g. .png).
#2: Offers appropriate file locations/input based on format type, but does not prevent other files from being selected.
#3: Does not allow any files to be picked at all.
#4: Supports the type format but does not allow any file to be picked when using the extension format.

Resources: Demo & information, Microsoft Edge feature request on UserVoice.
ls26‒602.13‒4.34.4‒536‒TP8‒10.35.5‒910‒114‒3637all64
cssCSS Filter Effects

Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.

Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

Browser-specific notes:
#1: Supported in Firefox under the layout.css.filters.enabled flag.
#2: Supported in MS Edge under the "Enable CSS filter property" flag.
#3: Partial support in Firefox before version 34 only implemented the url() function of the filter property.
#4: Partial support refers to supporting filter functions, but not the url function.

Resources: Demo file for WebKit browsers, HTML5Rocks article, Filter editor, Filter Playground.
wd18‒41532.1‒4.34.45369.16.09.35.5‒113.6‒3135‒55all64
css3CSS3 word-break

Property to prevent or allow words to be broken over multiple lines between letters.

Partial support refers to supporting the break-all value, but not the keep-all value.

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

Resources: MDN article, WebPlatform Docs.
wd4‒41442.1‒4.4533.193.29.05.5‒1115‒55all63
jsWeb Notifications

Method of alerting the user outside of a web page by displaying notifications (that do not require interaction by the user).

Browser-specific notes:
#1: Can be enabled in about:flags.

Resources: HTML5 Rocks tutorial, Chromium API, Add-on, MDN Notifications, SitePoint article, Demo, Plug-in for support in IE.
ls22‒602.1‒4.34.4‒536‒TP3.2‒10.35.5‒11222‒55all62
jsUser Timing API

Method to help web developers measure the performance of their applications by giving them access to high precision timestamps.

Resources: SitePoint article, HTML5Rocks article, Polyfill, Demo, UserTiming.js polyfill.
rec25‒602.1‒4.34.4‒533.1TP3.2‒10.35.5‒910‒112‒3638all62
css3Font unicode-range subsetting

This @font-face descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range (<urange>) values. The union of these ranges defines the set of codepoints that serves as a hint for user agents when deciding whether or not to download a font resource for a given text run.

Partial support indicates that unnecessary code-ranges are downloaded by the browser - see browser test matrix.

Browser-specific notes:
#1: Can be enabled in Firefox using the layout.css.unicode-range.enabled flag.

Resources: MDN: unicode-range, Safari CSS Reference: unicode-range, Web Platform Docs: unicode-range, Demo, Microsoft Edge feature request on UserVoice.
cr4‒3436‒602.1‒4.4533.1103.210.05.5‒89‒112‒353644all62
cssCSS text-stroke and text-fill

Method of declaring the outline (stroke) width and color for text.

Does not yet appear in any W3C specification. Was briefly included in a spec as the "text-outline" property, but this was removed.

Browser-specific notes:
#1: Firefox & Edge specifically support the -webkit-text-stroke property without having support with their own prefix.
#2: Requires the layout.css.prefixes.webkit flag to be enabled.

Resources: Information & workarounds, Live editor, Mozilla Developer Network article.
unoff4‒602.1‒533.1TP4.0‒10.35.5‒112‒3649all62
cssCSS Reflections

Method of displaying a reflection of an element.

Similar effect can be achieved in Firefox 4+ using the -moz-element() background property.

Resources: Webkit blog post, Microsoft Edge feature request on UserVoice.
unoff4‒602.1‒534‒TP3.2‒10.35.5‒112‒55all62
cssCSS line-clamp

Proprietary and undocumented CSS property that will contain text to a given amount of lines when used in combination with display: -webkit-box. It will end with ellipsis when text-overflow: ellipsis is included.

As there is no specification and the property is dependent on an outdated implementation of flexbox (hence display: -webkit-box) it is unlikely that other browsers will support the property as-is, although an alternative solution may at some point replace it.

Older (presto-based) versions of the Opera browser have also supported the same effect using the proprietary -o-ellipsis-lastline; value for text-overflow.

Resources: Article on cross-browser CSS line clamping, CSS Tricks article.
unoff14‒602.3‒535‒TP5.0‒10.35.5‒112‒55all61
canvasWebGL - 3D Canvas graphics

Method of generating dynamic 3D graphics using JavaScript, accelerated through hardware.

Support listed as "partial" refers to the fact that not all users with these browsers have WebGL access. This is due to the additional requirement for users to have up to date video drivers. This problem was solved in Chrome on Windows as of version 18.

Note that WebGL is part of the Khronos Group, not the W3C.

Browser-specific notes:
#1: WebGL context is accessed from "experimental-webgl" rather than "webgl".

Resources: Instructions on enabling WebGL, Tutorial, Firefox blog post, Webkit blog post, Polyfill for IE.
Parent feature: Canvas (basic support).
other1833‒602.1‒4.4535.188‒10.36‒1011424‒55all61
otherX-Frame-Options HTTP header

An HTTP header which indicates whether the browser should allow the webpage to be displayed in a frame within another webpage. Used as a defense against clickjacking attacks.

Partial support refers to not supporting the ALLOW-FROM option.
The X-Frame-Options header has been obsoleted by the frame-ancestors directive from Content Security Policy Level 2.

Resources: X-Frame-Options Compatibility Test, Mozilla Developer Network article, OWASP Clickjacking Defense Cheat Sheet, Combating ClickJacking With X-Frame-Options - IEInternals, IE8 Security Part VII: ClickJacking Defenses - IEBlog.
other26‒602.14‒535.1‒TP7.0‒10.35.58‒1118‒55all61
cssCSS Canvas Drawings

Method of using HTML5 Canvas as a background image. Not currently part of any specification.

A similar effect can be achieved in Firefox 4+ using the -moz-element() background property.

Resources: Webkit blog post.
unoff4‒41482.1‒4.4534‒TP3.2‒10.35.5‒112‒3652all60
html5Ping attribute

When used on an anchor, this attribute signifies that the browser should a ping request the resource the attribute points to.

While still in the WHATWG specification, this feature was removed from the W3C HTML5 specification in 2010.

Browser-specific notes:
#1: Disabled by default for privacy reasons. Can be enabled via the browser.send_pings flag.

Resources: Ping attribute on Mozilla Developer Network, UserVoice request for ping attribute.
ls15‒602.1‒4.34.4‒536‒TP5.0‒10.35.5‒113‒55all60
css3CSS resize property

Method of allowing an element to be resized by the user, with options to limit to a given direction.

Browser-specific notes:
#1: Presto-based Opera 12.10+ currently only supports the resize property for textarea elements.

Resources: CSS Tricks info, On textarea resizing, Microsoft Edge feature request on UserVoice.
cr4‒602.1‒4.4534‒TP3.2‒10.35.5‒115‒55all59
jsWeb Audio API

High-level JavaScript API for processing and synthesizing audio.

Not all browsers with support for the Audio API also support media streams (e.g. microphone input). See the getUserMedia/Streams API data for support for that feature.

Firefox versions < 25 support an alternative, deprecated audio API.

Chrome support went through some changes as of version 36.

Resources: Polyfill to support Web Audio API in Firefox, WebPlatform Docs, Additional browser compatibility tests for specific features, Polyfill to enable Web Audio API through Firefox Audio Data api or flash.
wd1034‒602.1‒4.4536‒TP6.0‒10.35.5‒11225‒55all58
css3CSS3 Cursors: zoom-in & zoom-out

Support for zoom-in, zoom-out values for the CSS3 cursor property.

Resources: MDN Documentation.
cr4‒3437‒602.1‒533.193.2‒10.35.5‒11224‒55all58
otherOgg/Theora video format

Free lossy video compression format.

Resources: Wikipedia article.
Parent feature: Video element.
other4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒113.5‒55all58
jsURL API

API to retrieve the various parts that make up a given URL from a given URL string.

See also URLSearchParams.

Browser-specific notes:
#1: Allows objects to be created via URL constructor, but instances do not have the expected url properties.

Resources: MDN article on URL interface, MDN article on URL constructor.
ls2332‒602.1‒4.34.44.4.37.1‒TP8‒10.35.5‒11226‒55all57
jsconst

Declares a constant with block level scope.

Browser-specific notes:
#1: const is recognized, but treated like var (no block scope, can be overwritten).
#2: const does not have block scope.
#3: Only recognized when NOT in strict mode.
#4: Supported correctly in strict mode, otherwise supported without block scope.

Resources: Variables and Constants in ES6, Const (MDN).
other21‒4041492.33‒4.4535.1105.010.05.5‒101113‒3536‒55all57
css3Intrinsic & Extrinsic Sizing

Allows for the heights and widths to be specified in intrinsic values using the fill, max-content, min-content, and fit-content properties.

Prefixes are on the values, not the property names (e.g. -webkit-min-content).

Older webkit browsers also support the unofficial intrinsic value which acts the same as max-content.

Browser-specific notes:
#1: Does not support for height/min-height/max-height property, only width. see test case Firefox bug.
#2: Firefox currently supports the "-moz-available" property rather than "-moz-fill".
#3: Does not support for "flex-basis" property. see specs.
Blink bug,Firefox bug.
#4: This does not yet unprefix fill-available (aka fill)See bug, because the CSSWG is not ready for that yet.

Resources: Min-Content tutorial.
wd22‒41462.1‒4.34.4536.197.09.05.5‒113‒55all56
html5Custom protocol handling

Method of allowing a webpage to handle a given protocol using navigator.registerProtocolHandler. This allows certain URLs to be opened by a given web application, for example mailto: addresses can be opened by a webmail client.

Browser-specific notes:
#1: Supports protocols mailto, mms, nntp, rtsp, and webcal but requires custom protocols to start with web+.

Resources: MDN article.
ls13‒602.1‒533.1‒TP3.2‒10.35.5‒113‒55all55
css3CSS3 object-fit/object-position

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

Browser-specific notes:
#1: Partial support in Safari refers to support for object-fit but not object-position.

Resources: Dev.Opera article, WebPlatform Docs, object-fit-images Polyfill for IE & Edge.
cr431‒602.1‒4.44.4.37.110810.05.5‒112‒3536‒55all55
jsShared Web Workers

Method of allowing multiple scripts to communicate with a single web worker.

Resources: Sitepoint article, Blog post.
Parent feature: Web Workers.
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒11229‒55all55
cssCSS background-blend-mode

Allows blending between CSS background images, gradients, and colors.

Browser-specific notes:
#1: Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.
#2: Chrome 46 has some serious bugs with multiply, difference, and exclusion blend modes.

Resources: codepen example, Blog post, Demo.
cr4‒3435‒602.1‒4.4537.1‒TP8‒10.35.5‒11230‒55all54
html5Date and time input types

Form field widget to easily allow users to enter a date, time or both, generally by using a calendar/time input widget.

Older versions of Safari provide date-formatted text fields, but no real calendar widget.

Chrome, Opera, and Microsoft Edge also support the datetime-local type for both date and time.

There used to also be a datetime type, but it was dropped from the HTML spec since only Presto ever fully supported it.

Browser-specific notes:
#1: Partial support in Microsoft Edge refers to supporting date, week, and month input types, and not time and datetime-local.
#2: Partial support in iOS Safari refers to not supporting min, max or step attributes.
#3: Some modified versions of the Android 4.x browser do have support for date/time fields.
#4: Can be enabled in Firefox using the dom.forms.datetime flag.

Resources: Datepicker tutorial w/polyfill, Polyfill for HTML5 forms, has.js test, WebPlatform Docs, Bug on Firefox support.
Parent feature: HTML5 form features.
ls20‒602.14‒4.34.4‒533.1‒TP5.0‒10.35.5‒112‒3654all54
otherCSS Paged Media (@page)

CSS at-rule (@page) to define page-specific rules when printing web pages, such as margin per page and page dimensions.

Currently no browsers appear to support the marks & bleed properties from the latest version of the specification.

Browser-specific notes:
#1: Does not support the size property.
#2: Does not appear to have a way to print web pages.

Resources: CSS Paged media article, MDN article, WebKit support bug, Firefox support bug, Edge support request.
wd15‒602.1‒533.1‒TP3.2‒10.35.58‒1119‒55all54
css3CSS3 Multiple column layout

Method of flowing information in multiple columns.

Browser-specific notes:
#1: Partial support refers to not supporting the break-before, break-after, break-inside properties. WebKit- and Blink-based browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.
#2: Partial support refers to not supporting the column-fill property.

Resources: Dev.Opera article, Introduction page, WebPlatform Docs, Polyfill, Chrome platform status for CSS column-fill.
cr4‒41502.1‒4.453797.09.05.5‒910‒112‒3652all54
domShadow DOM v0

Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.

Browser-specific notes:
#1: Supported in Firefox behind the dom.webcomponents.enabled flag.

Resources: Shadow DOM Visualizer, HTML5Rocks - Shadow DOM 101 article, Safari implementation bug, Firefox implementation bug, Google Developers - Shadow DOM v1: self-contained web components.
wd25‒3435‒602.1‒4.34.4533.1‒TP3.2‒10.35.5‒11229‒55all54
domscrollIntoView

The Element.scrollIntoView() method scrolls the current element into the visible area of the browser window. Parameters can be provided to set the position inside the visible area as well as whether scrolling should be instant or smooth.

Browser-specific notes:
#1: Supports scrollIntoView with boolean parameter, but not smooth behavior option.

Resources: MDN article.
wd4‒602.3‒535.1‒TP5.0‒10.35.58‒112‒3536‒55all53
jsGamepad API

API to support input from USB gamepad controllers through JavaScript.

Browser-specific notes:
#1: Can be enabled via the "Experimental Features" developer menu.

Resources: Controller demo, MDN article, HTML5Rocks article, Detailed tutorial.
wd25‒602.1‒533.110.13.210.35.5‒11229‒55all53
otherOpus

Royalty-free open audio codec by IETF, which incorporated SILK from Skype and CELT from Xiph.org, to serve higher sound quality and lower latency at the same bitrate.

Support refers to use using the audio element, not other conditions.

For Opera the Linux version may be able to play it when the GStreamer module is up to date and the served mime-type is 'audio/ogg'.

Resources: Introduction of Opus by Mozilla, Google's statement about the use of VP8 and Opus codec for WebRTC standard, Microsoft Edge feature request on UserVoice.
Parent feature: Audio element.
other433‒602.1‒533.1‒TP3.2‒10.35.5‒1115‒55all52
jsTextEncoder & TextDecoder

TextEncoder encodes a JavaScript string into bytes using the UTF-8 encoding and returns the resulting Uint8Array of those bytes. TextDecoder does the reverse.

Browser-specific notes:
#1: Not available in Web Workers in Firefox 19.

Resources: Mozilla Developer Network article, Microsoft Edge feature request on UserVoice, WebKit Bug 160653 - Support TextEncoder & TextDecoder APIs.
ls4‒3738‒602.1‒4.4533.110.13.210.35.5‒1120‒55all52
cssCSS all propertycr4‒3437‒602.1‒4.44.4.33.19.13.29.35.5‒11227‒55all52
jsPointerLock API

API that provides access to raw mouse movement data. This is done by ignoring boundaries resulting from screen edges where the cursor can't go beyond, providing proper control for first person or real time strategy games.

Resources: MDN article, Simple demo.
cr22‒3437‒602.1‒533.110.13.210.35.5‒1114‒3641all52
cssCSS touch-action property

touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes) or double-tap-zooming.

Browser-specific notes:
#1: Supported in Firefox behind the layout.css.touch_action.enabled flag, Firefox for Windows 8 Touch ('Metro') enabled by default.
#2: IE10+ has already supported these property which are not in standard at present such as double-tap-zoom, cross-slide-x, cross-slide-y.
#3: Safari only supports auto and manipulation.

Resources: MSDN Docs, 300ms tap delay, gone away, What Exactly Is..... The 300ms Click Delay, What Exactly Is..... The 300ms Click Delay (Chinese), Mozilla Developer Network, WebKit bug 149854: Implement touch-action: manipulation; for iOS, WebKit bug 133112: touch-action CSS property support.
rec4‒3436‒602.1‒4.4533.19.13.29.35.5‒91011229‒3652all52
css::placeholder CSS pseudo-element

The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text YYYY/MM/DD to clarify that numeric dates are to be entered in year-month-day order.

Partial support refers to using alternate names:.
::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345).
:-ms-input-placeholder for IE.
::-ms-input-placeholder for Edge (also supports webkit prefix).

Browser-specific notes:
#1: Firefox 18 and below supported the :-moz-placeholder pseudo-class rather than the ::-moz-placeholder pseudo-element.

Resources: MSDN article, CSS-Tricks article with all prefixes, CSSWG discussion, MDN article, Mozilla Bug 1069012 - unprefix :placeholder-shown pseudo-class and ::placeholder pseudo-element.
wd4‒41572.1‒53510.14.210.35.5‒910‒1119‒3651all51
cssCSS page-break properties

Properties to control the way elements are broken across (printed) pages.

Not all mobile browsers offer print support; support listed for these is based on browser engine capability.

Browser-specific notes:
#1: Supports the page-break-* alias from the CSS 2.1 specification, but not the break-* properties from the latest spec.
#2: Does not support avoid for page-break-before & page-break-after (only page-break-inside).
#3: Treats the left and right values like always.

Resources: CSS Tricks article, Latest fragmentation specification (includes column & region breaks).
rec4‒602.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all51
cssCSS Cross-Fade Function

Image function to create a "crossfade" between images. This allows one image to transition (fade) into another based on a percentage value.

Resources: Simple demo.
unoff17‒602.1‒4.34.4‒535.1105.010.05.5‒112‒55all51
css3CSS3 Border images

Method of using images for borders.

Note that both the border-style and border-width must be specified (not set to none or 0) for border-images to work.

Browser-specific notes:
#1: Has a bug where border-image incorrectly overrides border-style. See test case, WebKit bug, discussion.
#2: Partial support refers to not supporting border-image-repeat: space.
#3: Partial support refers to supporting the shorthand syntax, but not the individual properties (border-image-source, border-image-slice, etc).
#4: Partial support refers to not supporting border-image-repeat: round.

Resources: Information page, WebPlatform Docs, Border image on MDN.
cr30‒41512.1‒4.34.4‒5369.16.09.35.5‒101115‒3650all51
cssCSS image-set

Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI screens.

Resources: Demo, Microsoft Edge feature request on UserVoice.
unoff21‒602.1‒4.34.4‒536‒TP6.0‒10.35.5‒112‒55all51
jsBeacon API

Allows data to be sent asynchronously to a server with navigator.sendBeacon, even after a page was closed. Useful for posting analytics data the moment a user was finished using the page.

Resources: MDN article.
wd4‒3839‒602.1‒4.4533.1‒TP3.2‒10.35.5‒11231‒55all50
otherPublic Key Pinning

Declare that a website's HTTPS certificate should only be treated as valid if the public key is contained in a specified list to prevent MITM attacks that use valid CA-issued certificates.

The HTTP header syntax is 'Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"]'.

Resources: MDN article.
other4‒3738‒602.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3135‒55all50
svgSVG fragment identifiers

Method of displaying only a part of an SVG image by defining a view ID or view box dimensions as the file's fragment identifier.

Browser-specific notes:
#1: Partial support refers to support inside <img> but not as CSS background-image.

Resources: Blog post.
rec4‒3436‒41502.1‒4.4537.1989.05.5‒89‒1115‒55all50
cssCSS text-indent

The text-indent property applies indentation to lines of inline content in a block.

Browser-specific notes:
#1: Partial support refers to supporting a <length> value, but not the each-line or hanging keywords.
#2: Support for each-line & hanging is available behind the Experimental Web Platform features flag.

Resources: MDN article, Firefox support bug, WebKit support bug, Article on using text-indent for image replacement.
wd4‒3738‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all50
cssCSS will-change property

Method of optimizing animations by informing the browser which elements will change and what properties will change.

Browser-specific notes:
#1: Supported in Firefox behind the layout.css.will-change.enabled flag.

Resources: Detailed article, Blog post, will-change on MDN.
wd4‒3436‒602.1‒4.4533.19.13.29.35.5‒11229‒3536‒55all50
css:default CSS pseudo-class

The :default pseudo-class matches checkboxes and radio buttons which are checked by default, <option>s with the selected attribute, and the default submit button (if any) of a form.

Whether <option selected> matches :default (per the spec) was not tested since <select>s and <option>s are generally not styleable, which makes it hard to formulate a test for this.

Browser-specific notes:
#1: Does not match <input type="checkbox" checked> or <input type="radio" checked>.
#2: Does not match the default submit button of a form.

Resources: HTML specification for `:default`, Mozilla Developer Network article, MS Edge feature request on UserVoice, JS Bin testcase, WebKit bug 156230 - `:default` CSS pseudo-class should match checkboxes+radios with a `checked` attribute.
unoff15‒41512.14‒4.4535.110.17.010.35.5‒114‒55all49
svgSVG effects for HTML

Method of using SVG transforms, filters, etc on HTML elements using either CSS or the foreignObject element.

Partial support refers to lack of filter support or buggy result from effects. A CSS Filter Effects specification is in the works that would replace this method.

Browser-specific notes:
#1: IE11 and below do not support <foreignObject>.
#2: IE and Edge do not support applying SVG filter effects to HTML elements using CSS. Bug Report.

Resources: MDN Tutorial, MDN Reference page, Filter Effects draft.
rec4‒602.1‒4.34.4‒534‒TP3.2‒10.35.5‒89‒113.5‒55all49
jsWebRTC Peer-to-peer connections

Method of allowing two users to communicate directly, browser to browser using the RTCPeerConnection API.

Microsoft also offers a compatible implementation known as ObjectRTC. See Object RTC for support details for that API.

Browser-specific notes:
#1: BlackBerry 10 recognizes RTCPeerConnection but real support is unconfirmed.
#2: Can be enabled via the "Enable WebRTC 1.0" flag.

Resources: WebRTC Project site, Plug-in for support in IE & Safari, Prototype implementation for ORTC, Introducing WebRTC 1.0 and interoperable real-time communications in Microsoft Edge.
wd23‒602.1‒4.4533.1‒TP3.2‒10.35.5‒11222‒3644all49
domMedia Source Extensions

API allowing media data to be accessed from HTML video and audio elements.

Browser-specific notes:
#1: Requires the media.mediasource.enabled flag to be enabled, support is limited to a whitelist including the YouTube, Netflix, and Dailymotion websites.
#2: Partial support in IE11 refers to only working in Windows 8+.

Resources: MDN article, MSDN article, MediaSource demo.
cr2331‒602.1‒4.44.4.33.183.2‒10.35.5‒1011225‒3642all49
jsScreen Orientation

Provides the ability to read the screen orientation state, to be informed when this state changes, and to be able to lock the screen orientation to a specific state.

Partial support refers to an older version of the draft specification, and the spec has undergone significant changes since, for example renaming the screen.lockOrientation method to screen.orientation.lock.

Resources: Demo, MDN article, SitePoint article.
wd4‒3738‒602.1‒533.1‒TP3.2‒10.35.5‒101118‒3644all48
domMutation events

Deprecated mechanism for listening to changes made to the DOM, replaced by Mutation Observers.

See also support for Mutation Observer, which replaces mutation events and does not have the same performance drawbacks.

Browser-specific notes:
#1: Does not support DOMAttrModified.
#2: Does not support DOMNodeInsertedIntoDocument & DOMNodeRemovedFromDocument.

Resources: MDN article.
wd15‒602.3‒534‒TP4.2‒10.35.5‒89‒116‒55all48
cssCrisp edges/pixelated images

Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing blur. This is intended for images such as pixel art. Official values that accomplish this for the image-rendering property are crisp-edges and pixelated.

Note that prefixes apply to the value (e.g. -moz-crisp-edges), not the image-rendering property.

Browser-specific notes:
#1: Supported using the non-standard value -webkit-optimize-contrast.
#2: Internet Explorer accomplishes support using the non-standard declaration -ms-interpolation-mode: nearest-neighbor.
#3: Supports the crisp-edges value, but not pixelated.
#4: Supports the pixelated value, but not crisp-edges.
#5: Only works on <img>, not CSS backgrounds or <canvas>.
#6: Only works on <img> and CSS backgrounds, _not_ <canvas>.

Resources: MDN article, HTML5Rocks article.
unoff4‒4041‒602.1‒4.4536.1107.010.07‒113.6‒55all46
jsBattery Status API

Method to provide information about the battery status of the hosting device.

Browser-specific notes:
#1: Partial support refers to support for the older specification's navigator.battery rather than navigator.getBattery() to access the BatteryManager.

Resources: MDN Docs, Simple demo.
cr4‒343738‒602.1‒4.4533.1‒TP3.2‒10.35.5‒1116‒3643all46
jsSpeech Synthesis API

A web API for controlling a text-to-speech output.

Samsung Internet for GearVR: In Development, release based on Chromium m53 due Q1/2017.

Browser-specific notes:
#1: Can be enabled in Firefox using the media.webspeech.synth.enabled about:config flag.
#2: Speech Synthesis in Chrome since version 55 stops playback after about 15 seconds on Windows 7 & 10, and Ubuntu 14.04, possibly other platforms.

Resources: HTML5Rocks article, SitePoint article, Demo, Advanced demo and resource.
Parent feature: .
unoff433‒41552.1‒537‒TP7.0‒10.35.5‒11231‒3649all45
html5Ruby annotation

Method of adding pronunciation or other annotations using ruby elements (primarily used in East Asian typography).

Browsers without native support can still simulate support using CSS. Partial support refers to only supporting basic ruby, may still be missing writing-mode, Complex ruby and CSS3 Ruby.

Browser-specific notes:
#1: IE9+ supports properties of an older version of the CSS Ruby specification.

Resources: HTML5 Doctor article, WebPlatform Docs, Add-on "XHTML Ruby Support" for Firefox, Addon "HTML Ruby" for Firefox support, CSS specification.
ls5‒602.13‒535‒TP5.0‒10.35.5‒112‒3638all45
domCustom Elements v0wd2733‒602.1‒4.44.4.36‒TP7.0‒10.35.5‒910‒11230‒55all44
otherContent Security Policy Level 2

Mitigate cross-site scripting attacks by whitelisting allowed sources of script, style, and other resources. CSP 2 adds hash-source, nonce-source, and five new directives.

Browser-specific notes:
#1: Firefox 31-34 is missing the plugin-types, child-src, frame-ancestors, base-uri, and form-action directives.
#2: Firefox 35 is missing the plugin-types, child-src, frame-ancestors, and form-action directives.
#3: Firefox 36-44 is missing the plugin-types and child-src directives.
#4: Chrome 36-38 & Opera 23-25 are missing the plugin-types, child-src, frame-ancestors, base-uri, and form-action directives.
#5: Chrome 39 and Opera 26 are missing the plugin-types, child-src, base-uri, and form-action directives.
#6: Firefox 38 on Android is missing the child-src directive.
#7: Firefox 45+ is missing the plugin-types directive.

Resources: HTML5Rocks article.
cr4‒3436‒383940‒602.1‒4.4533.1103.29.35.5‒11231353645all44
otherWAI-ARIA Accessibility features

Method of providing ways for people with disabilities to use dynamic web content and web applications.

Support for ARIA is rather complex and currently is not fully supported in any browser. For detailed information on partial support see the ARIA 1.0 Implementation Report.

Resources: Information page, Links to various test results, Wikipedia, ALA Article, HTML5/WAI-ARIA information.
rec4‒602.1‒4.34.4‒534‒TP3.2‒10.35.58‒112‒55all44
html5Srcset and sizes attributes

The srcset and sizes attributes on img (or source) elements allow authors to define various image resources and "hints" that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).

Browser-specific notes:
#1: Can be enabled in Firefox by setting the about:config preference dom.image.srcset.enabled to true.
#2: Supports the subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).

Resources: Improved support for high-resolution displays with the srcset image attribute, Blog post on srcset & sizes.
ls434‒3738‒602.1‒4.4537.1989.05.5‒112‒3132‒3638all44
domHTML Imports

Method of including and reusing HTML documents in other HTML documents.

Browser-specific notes:
#1: Firefox has no plans to support HTML imports though for now it can be enabled through the "dom.webcomponents.enabled" preference in about:config.
#2: Enabled through the "Enable HTML Imports" flag in chrome://flags.
#3: Enabled through the "Experimental Web Platform features" flag in chrome://flags.
#4: Enabled through the "Enable HTML Imports" flag in opera://flags.
#5: Enabled through the "Experimental Web Platform features" flag in opera://flags.

Resources: Polymer project (polyfill & web components framework), HTML5Rocks - HTML Imports: #include for the web, Chromium tracking bug: Implement HTML Imports, Firefox tracking bug: Implement HTML Imports, IE Web Platform Status and Roadmap: HTML Imports.
wd30‒3436‒602.1‒4.4536‒TP7.0‒10.35.5‒910‒1123032‒55all44
jsDeviceOrientation & DeviceMotion events

API for detecting orientation and motion events from the device running the browser.

Partial support refers to the lack of compassneedscalibration event. Partial support also refers to the lack of devicemotion event support for Chrome 30- and Opera. Opera Mobile 14 lost the ondevicemotion event support. Firefox 3.6, 4 and 5 support the non-standard MozOrientation event.

Browser-specific notes:
#1: compassneedscalibration supported in IE11 only for compatible devices with Windows 8.1+.

Resources: HTML5 Rocks tutorial, has.js test, DeviceOrientation implementation prototype for IE10, Demo.
cr7‒602.13‒533.1‒TP4.2‒10.35.5‒10116‒55all43
jsClipboard API

API to provide copy, cut and paste events as well as provide access to the OS clipboard.

Internet Explorer will display a security prompt for access to the OS clipboard.

Chrome 42+, Opera 29+ and Firefox 41+ support clipboard reading/writing only when part of a user action (click, keydown, etc).

Firefox 40- users can enable support with a security preference setting.

Browser-specific notes:
#1: Only supports Text and URL data types and uses a non-standard method of interacting with the clipboard.
#2: Only fires copy event on a valid selection and only cut and paste in focused editable fields.
#3: Only supports OS clipboard reading/writing via shortcut keys, not through document.execCommand().
#4: Only supports paste event (on focused editable field).
#5: Does not support the ClipboardEvent constructor.
#6: Supports cut & copy events without a focused editable field, but not paste (presumably for security reasons).
#7: Supports cut & copy events without a focused editable field, but does not fire paste with document.execCommand('paste').

Resources: MDN page on ClipboardEvent, Guide on cross-platform clipboard access.
wd13‒41432.1‒4.34.4‒534105.0‒10.35.5‒11222‒3641all43
css3CSS Shapes Level 1

Allows geometric shapes to be set in CSS to define an area for text to flow around.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: Adobe demos and samples, CSS shapes support test by Adobe, A List Apart article, Firefox tracking bug.
cr43437‒602.1‒4.4537.110.1810.35.5‒112‒55all43
html5HTML5 form features

Expanded form options, including things like date pickers, sliders, validation, placeholders and multiple file uploads. Previously known as "Web forms 2.0".

Resources: HTML5 inputs and attribute support page, Cross-browser JS implementation (based on original spec).
ls4‒602.1‒4.34.4‒534‒TP4.0‒10.36‒910‒114‒55all42
css3CSS Font Loading

This CSS module defines a scripting interface to font faces in CSS, allowing font faces to be easily created and loaded from script. It also provides methods to track the loading status of an individual font, or of all the fonts on an entire page.

Browser-specific notes:
#1: Can be enabled in Firefox using the layout.css.font-loading-api.enabled flag. Enabled by default in Firefox 41. See this bug.

Resources: Optimizing with font load events, Microsoft Edge feature request on UserVoice.
cr4‒3435‒602.1‒4.4533.1103.210.05.5‒112‒3135‒3641all42
css3CSS box-decoration-break

Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).

Browser-specific notes:
#1: Partial support refers to working for inline elements but not across column or page breaks.

Resources: MDN article, Demo of effect on box border, Microsoft Edge feature request on UserVoice.
wd22‒602.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒112‒3132‒55all42
css:in-range and :out-of-range CSS pseudo-classes

If a temporal or number <input> has max and/or min attributes, then :in-range matches when the value is within the specified range and :out-of-range matches when the value is outside the specified range. If there are no range constraints, then neither pseudo-class matches.

Note that <input type="range"> can never match :out-of-range because the user cannot input such a value, and if the initial value is outside the range, the browser immediately clamps it to the minimum or maximum (as appropriate) bound of the range.

Browser-specific notes:
#1: Opera Mini correctly applies style on initial load, but does not correctly update when value is changed.
#2: :in-range also incorrectly matches temporal and number inputs which don't have min or max attributes. See Edge bug, Chrome bug, WebKit bug.
#3: :in-range and :out-of-range incorrectly match inputs which are disabled or readonly. See Edge bug, Mozilla bug, WebKit bug, Chrome bug.

Resources: MDN article, WHATWG HTML specification for `:in-range` and `:out-of-range`.
wd15‒41532.14‒4.4535.110.15.010.35.5‒11229‒3650all42
otherSDCH Accept-Encoding/Content-Encodingother4‒602.1‒4.4533.1‒TP3.2‒10.35.5‒112‒55all42
cssCSS Appearance

The appearance property defines how elements (particularly form controls) appear by default. By setting the value to none the default appearance can be entirely redefined using other CSS properties.

Browser-specific notes:
#1: The appearance property is supported with the none value, but not auto. Webkit, Blink, and Gecko browsers also support additional vendor specific values.
#2: Microsoft Edge and IE Mobile support this property with the -webkit- prefix, rather than -ms- for interop reasons.
#3: -moz-appearance:none doesn't remove the dropdown arrow in select tag.

Resources: CSS Tricks article.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒3135‒55all41
cssCSS Logical Properties

Use start/end properties that depend on LTR or RTL writing direction instead of left/right.

Browser-specific notes:
#1: Only supports the *-start, and *-end values for margin, border and padding, not the inline/block type values as defined in the spec.
#2: Like #1 but also supports *-before and *-end for *-block-start and *-block-end properties as well as start and end values for text-align.

Resources: MDN -moz-margin-start, MDN -moz-padding-start, Microsoft Edge feature request on UserVoice.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒113‒3641all41
domPicture element

A responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Enabled in Opera through the "experimental Web Platform features" flag in opera://flags.
#3: Enabled in Firefox by setting the about:config preference dom.image.picture.enable to true.

Resources: Demo, Tutorial, Read about the use cases, General information about Responsive Images, Blog post on usage, HTML5 Rocks tutorial, Picturefill - polyfill for picture, srcset, sizes, and more.
ls4‒343738‒602.1‒4.4533.19.13.29.35.5‒112‒3134‒3638all41
cssCSS Masks

Method of displaying part of an element, using a selected image as a mask.

Browser-specific notes:
#1: Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacking support for other parts of the spec.
#2: Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).
#3: Partial support refers to supporting the mask-box-image shorthand but not the longhand properties.

Resources: WebPlatform Docs, HTML5 Rocks article, Detailed blog post, Firefox implementation bug, Visual test cases.
cr4‒602.1‒4.34.4‒534‒TP3.2‒10.35.5‒113.5‒3653all41
cssBlending of HTML/SVG elements

Allows blending between arbitrary SVG and HTML elements.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.

Resources: codepen example, Blog post.
cr29‒4041‒602.1‒4.4537.1‒TP8‒10.35.5‒112‒3132‒55all41
html5Datalist element

Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.

While most commonly used on text fields, datalists can also be used on other input types. IE11 supports the element on range fields. Chrome and Opera also support datalists to suggest given values on range, color and date/time fields.

Browser-specific notes:
#1: Partial support refers to a bug where long lists of items are unscrollable resulting in unselectable options.
#2: Partial support in IE refers to significantly buggy behavior (IE11+ does send the input and change events upon selection).
#3: Partial support refers to no support for datalists on non-text fields (e.g. number, range, color).

Resources: Mozilla Hacks article, HTML5 Library including datalist support, MDN reference, WebPlatform Docs, Eiji Kitamura's options demos & tests, Minimal Datalist polyfill w/tutorial.
Parent feature: HTML5 form features.
ls20‒602.1‒4.44.4.33.1‒TP3.2‒10.36‒910‒114‒55all41
css:matches() CSS pseudo-class

The :matches() (formerly :any()) pseudo-class checks whether the element at its position in the outer selector matches any of the selectors in its selector list. It's useful syntactic sugar that allows you to avoid writing out all the combinations manually as separate selectors. The effect is similar to nesting in Sass and most other CSS preprocessors.

Most browsers support this spelled as a prefixed :-vendor-any() pseudo-class.

Browser-specific notes:
#1: Only supports the :-webkit-any() pseudo-class, which is deprecated due to handling specificity incorrectly.
#2: Also supports the :-webkit-any() pseudo-class, which is deprecated due to handling specificity incorrectly.
#3: Only supports the :-moz-any() pseudo-class.

Resources: Mozilla Developer Network article, WebKit blog post about adding `:matches()` and other Selectors Level 4 features, Mozilla Bug 906353 - Add support for css4 selector :matches(), the standard of :-moz-any(), Microsoft Edge UserVoice feature request for :matches(), JS Bin testcase, Issue 568705: Chrome does not support :matches() selector.
wd15‒602.14‒535.197.09.05.5‒114‒55all40
otherChaCha20-Poly1305 cipher suites for TLS

A set of cipher suites used in Transport Layer Security (TLS) protocol, using ChaCha20 for symmetric encryption and Poly1305 for authentication.

Browser-specific notes:
#1: Old versions of Chrome use non-standard code points for ChaCha20-Poly1305 cipher suites.

Resources: Chrome article, SSL/TLS Capabilities of Your Browser by Qualys SSL Labs, Microsoft Edge feature request on UserVoice.
other433‒41492.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3647all40
otherWOFF 2.0 - Web Open Font Format

TrueType/OpenType font that provides better compression than WOFF 1.0.

Browser-specific notes:
#1: Supported only on Safari for Mac OS Sierra, not El Capitan & older.

Resources: Basics about WOFF 2.0, WOFF 2.0 converter.
Parent feature: @font-face Web fonts.
cr4‒3436‒602.1‒4.4533.1103.210.05.5‒112‒3639all39
domDialog element

Method of easily creating custom dialog boxes to display to the user with modal or non-modal options. Also includes a ::backdrop pseudo-element for behind the element.

Browser-specific notes:
#1: Supported in Firefox by enabling "dom.dialog_element.enabled" in about:config.
#2: Enabled through the "Experimental Web Platform features" flag in chrome://flags.
#3: Enabled through the "Experimental Web Platform features" flag in opera://flags.

Resources: Polyfill.
ls43237‒602.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3653all39
jsObject.observe data binding

Method for data binding, a now-withdrawn ECMAScript 7 proposal.

Support in Blink-based browsers is expected to be removed in future versions.

Resources: Data-binding Revolutions with Object.observe(), Polyfill, Firefox tracking bug, An update on Object.observe.
unoff4‒3436‒41502.1‒533.1‒TP3.2‒10.35.5‒112‒55all38
html5Web App Manifest

The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON file, which browsers can use to give richer offline experiences.

Resources: Mozilla Developer Network article, Tool to generate a manifest from any given URL.
wd4‒3738‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all37
otherHTTP/2 protocol

Networking protocol for low-latency transport of content over the web. Originally started out from the SPDY protocol, now standardized as HTTP version 2.

See also support for the SPDY protocol, precursor of HTTP2.

Browser-specific notes:
#1: Partial support in IE11 refers to being limited to Windows 10.
#2: Only supports HTTP2 over TLS (https).
#3: Partial support in Safari refers to being limited to OSX 10.11+.
#4: Only supports HTTP2 if servers support protocol negotiation via ALPN.

Resources: Wikipedia, Browser support test.
other4‒4041512.1‒4.4533.193.29.05.5‒10112‒3536‒55all37
html5Minimum length attribute for input fields

Declares a lower bound on the number of characters a user can input.

The pattern attribute can be used as an alternative solution for browsers without support.

Resources: W3C usage example, Microsoft Edge feature request on UserVoice, Firefox tracking bug, WebKit feature request bug.
Parent feature: Form validation.
ls4‒3940‒602.1‒4.4533.110.13.210.35.5‒112‒3651all37
css3CSS3 tab-size

Method of customizing the width of the tab character. Only effective using 'white-space: pre' or 'white-space: pre-wrap'.

Browser-specific notes:
#1: Partial refers to supporting <integer> but not <length> values.

Resources: MDN article, Microsoft Edge feature request on UserVoice.
wd21‒41422.1‒4.34.4‒536.1‒TP7.0‒10.35.5‒114‒3653all36
jsFilesystem & FileWriter API

Method of reading and writing files to a sandboxed file system.

The File API: Directories and System specification is no longer being maintained and support may be dropped in future versions.

Resources: HTML5 Rocks tutorial, WebPlatform Docs, Firefox tracking bug.
unoff13‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all36
cssCSS unset value

A CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited.

Resources: Mozilla Developer Network, Resetting styles using `all: unset`, WebKit bug 148614: Add support for the `unset` CSS property value.
cr4‒4041‒602.1‒4.4533.19.13.29.35.5‒11227‒55all36
css3CSS clip-path property (for HTML)

Method of defining the visible region of an HTML element using SVG or a shape definition.

Support refers to the clip-path CSS property on HTML elements specifically. Support for clip-path in SVG is supported in all browsers with basic SVG support.

Browser-specific notes:
#1: Partial support refers to only supporting the url() syntax.
#2: Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.
#3: Supports shapes behind the layout.css.clip-path-shapes.enabled flag.

Resources: CSS Tricks article, Codepen Example Clipping an Image with a Polygon, Visual test cases.
Parent feature: CSS Masks.
cr24‒41552.1‒4.34.4‒537‒TP7.0‒10.35.5‒113.5‒3653all35
jsES6 Template Literals (Template Strings)

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. Formerly known as template strings.

Resources: MDN article, ES6 Template Literals in Depth.
other4‒4041‒602.1‒4.4533.19.13.29.05.5‒112‒3134‒55all35
domElement.closest()

DOM method that returns the current element if it matches the given selector, or else the closest ancestor element that matches the given selector, or else null.

Resources: Mozilla Developer Network, Polyfill, Microsoft Edge feature request on UserVoice.
ls4‒4041‒602.1‒4.4533.193.29.05.5‒112‒3135‒55all35
jsasm.js

an extraordinarily optimizable, low-level subset of JavaScript, indended to be a compile target from languages like C++.

Browser-specific notes:
#1: Chrome does not support Ahead-Of-Time compilation but performance doubled in Chrome 28: https://en.wikipedia.org/wiki/Asm.js#Implementations.
#2: Supported in MS Edge under the "Enable experimental Javascript features" flag.

Resources: Homepage, Source for spec and tools, Bringing Asm.js to Chakra and Microsoft Edge, Microsoft Edge support announcement.
other28‒602.1‒4.4533.1‒TP3.2‒10.35.5‒11222‒55all34
jsFull Screen API

API for allowing content (like a video or canvas element) to take up the entire screen.

Browser-specific notes:
#1: Partial support refers to supporting an earlier draft of the spec.
#2: Partial support refers to not supporting ::backdrop, and supporting the old :full-screen syntax rather than the standard :fullscreen.
#3: Partial support refers to not returning a Promise, as specified in the latest version of the spec.
#4: Unprefixed support is available behind the full-screen-api.unprefix.enabled flag.

Resources: MDN article, Blog post, Mozilla hacks article, WebPlatform Docs.
ls20‒602.1‒536‒TP3.2‒10.35.5‒101110‒3647all33
jsgetUserMedia/Stream API

Method of accessing external device data (such as a webcam video stream). Formerly this was envisioned as the <device> element.

As of Chrome 47, the getUserMedia API cannot be called from insecure origins.

Browser-specific notes:
#1: Blink-based (and some other) browsers support an older version of the spec that does not use srcObject. See Chromium issue 387740.

Resources: Technology preview from Opera, WebPlatform Docs, Media Capture functionality in Microsoft Edge.
cr21‒602.1‒4.4533.1‒TP3.2‒10.35.5‒1117‒55all33
otherReferrer Policy

Allow control of HTTP referrers via the referrer meta tag.

Browser-specific notes:
#1: Supports an older draft of the specification with never, always, origin & default values.

#2: Chrome does not support same-origin, strict-origin, or strict-origin-when-cross-origin values (issue 627968).

Resources: Mozilla security article.
wd21‒602.1‒4.4537.1‒TP8‒10.35.5‒112‒3536‒55all33
otherMathML

Special tags that allow mathematical formulas and notations to be written on web pages.

Opera's support is limited to a CSS profile of MathML. Support was added in Chrome 24, but removed afterwards due to instability.

Browser-specific notes:
#1: Before version 4, Firefox only supports the XHTML notation.
#2: Before version 10, Safari had issues rendering significant portions of the MathML torture test.

Resources: Wikipedia, MathML demos, Cross-browser support script, MDN element reference, MathML torture test.
rec4‒602.1‒533.1105.0‒10.36‒89‒114‒55all31
css3text-emphasis styling

Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks' position with respect to the text.

Some old WebKit browsers (like Chrome 24) support -webkit-text-emphasis, but does not support CJK languages and is therefore considered unsupported.

Browser-specific notes:
#1: Partial support refers to incorrect support for -webkit-text-emphasis-position. These browsers support over and under as values, but not the added left and right values required by the spec.
#2: Can be enabled in Firefox using the layout.css.text-emphasis.enabled flag.

Resources: A javascript fallback for CSS3 emphasis mark., Microsoft Edge feature request on UserVoice, Mozilla Developer Network.
cr25‒602.1‒4.34.4‒537.1‒TP7.0‒10.35.5‒112‒3646all30
svgSVG fonts

Method of using fonts defined as SVG shapes. Removed from SVG 2.0 and considered as a deprecated feature with support being removed from browsers.

Browser-specific notes:
#1: Chrome 38 and newer support SVG fonts only on Windows Vista and XP.
#2: Supported in Opera Mini in SVG images only, not in HTML.

Resources: Blog post, Blog post on usage for iPad.
Parent feature: @font-face Web fonts.
unoff4‒3738‒41512.13‒4.4533.2‒TP3.2‒10.36‒89‒112‒55all30
css3CSS3 text-align-last

CSS property to describe how the last line of a block or a line right before a forced line break when text-align is justify.

Browser-specific notes:
#1: In Internet Explorer, the start and end values are not supported.
#2: Enabled through the "Enable Experimental Web Platform Features" flag in chrome://flags.
#3: Enabled through the "Enable Experimental Web Platform Features" flag in opera://flags.

Resources: MDN text-align-last, Adobe Web Platform Article.
wd4‒3435‒41472.1‒4.4533.1‒TP3.2‒10.35.5‒1112‒3649all29
html5Printing Events

Window fires beforeprint and afterprint events so the printed document can be annotated.

Due to its wider support, consider using window.matchMedia('print') where possible.

Resources: MDN – Detecting print requests, Chrome support bug, Safari support bug.
rec4‒602.1‒533.1‒TP3.2‒10.36‒116‒55all28
css3CSS font-smooth

Controls the application of anti-aliasing when fonts are rendered.

Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from this specification and is currently not on the standard track.

Browser-specific notes:
#1: Webkit implements something similar with a different name -webkit-font-smoothing and different values: none, antialiased and subpixel-antialiased.
#2: Firefox implements something similar with a different name -moz-osx-font-smoothing and different values: auto, inherit, unset, grayscale.
#3: Works only on Mac OS X platform.

Resources: MDN article, Old version of W3C recommendation containing font-smooth.
unoff5‒602.1‒534‒TP3.2‒10.35.5‒11225‒55all28
jslet

Declares a variable with block level scope.

Browser-specific notes:
#1: Supports a non-standard version that can only be used in script elements with a type attribute of application/javascript;version=1.7. As other browsers do not support these types of script tags this makes support useless for cross-browser support.
#2: Requires the ‘Experimental Javascript features’ flag to be enabled.
#3: Only supported in strict mode.

Resources: Variables and Constants in ES6, Let (MDN).
other19‒4041492.1‒4.4533.1103.210.05.5‒10112‒3644all27
cssCSS font-stretch

If a font has multiple types of variations based on the width of characters, the font-stretch property allows the appropriate one to be selected. The property in itself does not cause the browser to stretch to a font.

Resources: MDN article, CSS Tricks article.
cr4‒41482.1‒4.4533.1‒TP3.2‒10.35.5‒89‒119‒55all27
otherHTTP Live Streaming (HLS)

HTTP-based media streaming communications protocol.

HLS is being replaced by Dynamic Adaptive Streaming over HTTP (aka MPEG-DASH).

Resources: Wikipedia article, Apple developer article.
unoff4‒602.13‒536‒TP3.2‒10.35.5‒112‒55all26
domKeyboardEvent.key

A KeyboardEvent property whose value is a string identifying the key that was pressed. Covers character keys, non-character keys (e.g. arrow keys), and dead keys.

Browser-specific notes:
#1: Partial support refers to these versions of Firefox returning "MozPrintableKey" for all character keys.

Resources: Mozilla Developer Network, Chrome tracking bug, WebKit feature request bug, Spec listing all key string values.
wd4‒41512.1‒533.110.13.210.35.5‒89‒11229‒55all25
domPointer events

This specification integrates various inputs from mice, touchscreens, and pens, making separate implementations no longer necessary and authoring for cross-device pointers easier. Not to be mistaken with the unrelated "pointer-events" CSS property.

Firefox, starting with version 28, provides the 'dom.w3c_pointer_events.enabled' flag to support this specification.

Browser-specific notes:
#1: Partial support in IE10 refers the lack of pointerenter and pointerleave events.
#2: Firefox support is disabled by default and only supports mouse input. On Windows only, touch can be enabled with the layers.async-pan-zoom.enabled and dom.w3c_touch_events.enabled flags.
#3: Can be enabled with the #enable-pointer-events flag.

Resources: Implementation of Pointer Events in IE10, Hand.js, the polyfill for browsers only supporting Touch Events, Article & tutorial, Abstraction library for pointer events, PEP: Pointer Events Polyfill.
rec22‒41552.1‒536.1‒TP3.2‒10.35.5‒910116‒3641all25
css3CSS Hyphenation

Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.

Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.

Browser-specific notes:
#1: Only supports the "auto" value on Mac for now.

Resources: MDN article, Blog post, WebPlatform Docs, Chrome bug for implementing hyphenation.
wd4‒41552.1‒535.1‒TP4.2‒10.35.5‒910‒116‒3643all25
html5HTML Media Capture

Facilitates user access to a device's media capture mechanism, such as a camera, or microphone, from within a file upload control.

Browser-specific notes:
#1: iOS6-10 do not support the capture attribute used to force capture straight from the device's camera or microphone.
#2: Android 2.2-2.3 do not support the capture attribute.
#3: Supports a "capture" button for any `<input type="file"> field, regardless of the whether the capture attribute is used.

Resources: Correct Syntax for HTML Media Capture, Programming the Mobile Web: File upload compatibility table, HTML Media Capture Test Bench.
cr4‒602.23‒533.1‒TP6.0‒10.35.5‒112‒55all25
cssMedia Queries: interaction media features

Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the pointer, any-pointer, hover, and any-hover media features.

Resources: Potential use cases for script, hover and pointer CSS Level 4 Media Features, Interaction Media Features and their potential (for incorrect assumptions), Polyfill for the `hover` media feature.
Parent feature: CSS3 Media Queries.
wd4‒4041‒602.1‒4.4533.193.29.05.5‒112‒55all23
jsSpeech Recognition API

Method to provide speech input in a web browser.

Browser-specific notes:
#1: Partial support refers to some attributes missing.
#2: Firefox currently has a media.webspeech.recognition.enable flag in about:config for this, but actual support is waiting for permissions to be sorted out.
#3: Reported to be in development for Samsung Internet for GearVR, due Q1/2017.

Resources: HTML5Rocks article, SitePoint article, Demo, Advanced demo and resource.
unoff25‒602.1‒533.1‒TP3.2‒10.35.5‒11222‒55all22
jsFIDO U2F API

Javascript API to interact with Universal Second Factor (U2F) devices. This allows users to log into sites more securely using two-factor authentication with a USB dongle.

Browser-specific notes:
#1: Requires the "FIDO U2F (Universal 2nd Factor)" Chrome extension.

Resources: Mozilla bug, Google Security article.
other4‒3738‒4041‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all21
jsFetch

A modern replacement for XMLHttpRequest.

Browser-specific notes:
#1: Partial support can be enabled in Firefox with the dom.fetch.enabled flag.
#2: Only available in Chrome and Opera within ServiceWorkers.
#3: Available in Chrome and Opera within Window and Workers by enabling the "Experimental Web Platform Features" flag in chrome://flags.
#4: Firefox <40 is not completely conforming to the specs and does not respect the <base> tag for relative URIs in fetch requests. https://bugzilla.mozilla.org/show_bug.cgi?id=1161625.
#5: Appears to exist in Safari Technology Preview but does not work in current build. Should work in next preview build.
#6: Can be enabled in about:flags.

Resources: Polyfill, Demo.
ls4‒394041422.1‒4.4533.110.13.210.35.5‒112‒3134‒3640all21
domWeb Animations API

Lets you create animations that are run in the browser and as well as inspect and manipulate animations created through declarative means like CSS.

Browser-specific notes:
#1: Partial support refers to basic support of element.animate().
#2: Partial support refers to basic support of element.animate() and playback control of AnimationPlayer.
#3: Partial support in Firefox is detailed in Are we animated yet?.

Resources: HTML5 Rocks, HTML5 Rocks, Current Firefox status, Polyfill.
wd4‒3436‒3839‒602.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3133‒3647all21
jsService Workers

Method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.

Details on partial support can be found on is ServiceWorker Ready?.

Browser-specific notes:
#1: Partial support can be enabled in Firefox with the dom.serviceWorkers.enabled flag.
#2: Available behind the "Enable service workers" flag.

Resources: HTML5Rocks article (introduction), MDN article, List of various resources.
wd4‒3940‒602.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3133‒3644all20
otherXHTML+SMIL animation

Method of using SMIL animation in web pages.

Internet Explorer supports the W3C proposal HTML+TIME, which is largely the same as XHTML+SMIL.

Resources: Wikipedia, JS library to support XHTML+SMIL.
Parent feature: XHTML served as application/xhtml+xml.
unoff4‒602.1‒533.1‒TP3.2‒10.36‒89‒112‒55all18
css3text-decoration styling

Method of defining the type, style and color of lines in the text-decoration property. These can be defined as shorthand (e.g. text-decoration: line-through dashed blue) or as single properties (e.g. text-decoration-color: blue).

All browsers support the CSS2 version of text-decoration, which matches only the text-decoration-line values (underline, etc.).

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partial support refers to not supporting the text-decoration-style property.
#3: Safari 8+ supports -webkit-text-decoration-skip with values none and skip (other values behave like none or skip).
#4: Partial support refers to not supporting the text-decoration-skip property.

Resources: MDN Documentation for text-decoration-style, MDN Documentation for text-decoration-color, MDN Documentation for text-decoration-line, Microsoft Edge feature request on UserVoice, MDN Documentation for text-decoration-skip, Firefox implementation bug.
cr26‒41572.1‒537.188‒10.35.5‒116‒3536‒55all16
pngAnimated PNG (APNG)

Like animated GIFs, but allowing 24-bit colors and alpha transparency.

Where support for APNG is missing, only the first frame is displayed.

Resources: Wikipedia, Polyfill using canvas, Chrome extension providing support, Microsoft Edge feature request on UserVoice, Opera extension providing support, Chromium issue.
unoff4‒41592.1‒533.188‒10.35.5‒113‒55all16
cssCSS Grid Layout

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors.

Supported in WebKit Nightly with -webkit- prefix.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partial support in IE refers to supporting an older version of the specification.
#3: Enabled in Firefox through the layout.css.grid.enabled flag.
#4: Grid does not initially display with certain JavaScript (bug report).

Resources: IE Blog post, Webkit (Chrome, Safari, etc.) feature request, Mozilla (Firefox) feature request, Polyfill based on old spec, Polyfill based on new spec, WebKit Blog post.
cr29‒41582.1‒4.14.2‒53610.16.010.35.5‒8910‒1119‒3652all16
cssCSS position:sticky

Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

Browser-specific notes:
#1: Can be enabled in Firefox by setting the about:config preference layout.css.sticky.enabled to true.
#2: Enabled through the "experimental Web Platform features" flag.

Resources: HTML5Rocks, MDN article, WebPlatform Docs, Polyfill, Another polyfill, geddski article: Examples and Gotchas.
wd23‒3437‒41562.1‒536.1‒TP6.0‒10.35.5‒1122632‒55all16
html5Audio Tracks

Method of specifying and selecting between multiple audio tracks. Useful for providing audio descriptions, director's commentary, additional languages, alternative takes, etc.

Browser-specific notes:
#1: Supported in Firefox by enabling "media.track.enabled" in about:config.

Resources: MSDN article.
ls4‒602.1‒536.1‒TP7.0‒10.35.5‒910‒112‒3133‒55all16
jsProxy object

The Proxy object allows custom behaviour to be defined for fundamental operations. Useful for logging, profiling, object virtualisation, etc.

Resources: ECMAScript 6 Proxies, MDN Proxy, Experimenting with ECMAScript 6 proxies, Meta programming with ECMAScript 6 proxies, Polyfill for Proxies.
other19‒3738‒41492.1‒4.4533.1103.210.05.5‒1118‒55all15
jsRest parameters

Allows representation of an indefinite number of arguments as an array.

Browser-specific notes:
#1: Requires the "Experimental Javascript features" flag to be enabled.

Resources: Rest parameters and defaults.
other4‒41472.1‒4.4533.1103.210.05.5‒1115‒55all15
otherEOT - Embedded OpenType fonts

Type of font that can be derived from a regular font, allowing small files and legal use of high-quality fonts. Usage is restricted by the file being tied to the website.

Proposal by Microsoft, being considered for W3C standardization.

Resources: Wikipedia, Example pages.
Parent feature: @font-face Web fonts.
unoff4‒602.1‒533.1‒TP3.2‒10.36‒112‒55all14
jsArrow functions

Function shorthand using => syntax and lexical this binding.

Resources: ECMAScript 6 features: Arrows, Arrow Functions (MDN).
other4‒41452.1‒4.4533.1103.210.05.5‒11222‒55all14
cssCSS font-size-adjust

Method of adjusting the font size in a matter that relates to the height of lowercase vs. uppercase letters. This makes it easier to set the size of fallback fonts.

Browser-specific notes:
#1: Enabled through the "experimental Web Platform features" flag in chrome://flags.
#2: Does not appear to work on Firefox mobile, despite recognition of the property.

Resources: Article on font-size-adjust, MDN article on font-size-adjust, Microsoft Edge feature request on UserVoice.
cr4‒41432.1‒533.1‒TP3.2‒10.35.5‒113‒55all14
cssCSSOM Scroll-behavior

Method of specifying the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.

Browser-specific notes:
#1: Partial support refers to support everything except of Element.scrollIntoView() and not together with pinch viewport.
#2: Supported in Chrome and Opera behind the 'Smooth Scrolling' and/or 'Enable experimental web platform features' flag.

Resources: Mozilla Developer Network, Chrome launch bug , Blog post with demo.
wd4‒4041‒602.1‒533.1‒TP3.2‒10.35.5‒112‒3536‒55all14
css3CSS Variables (Custom Properties)

Permits the declaration and usage of cascading variables in stylesheets.

Browser-specific notes:
#1: Enabled through the "Experimental Web Platform features" flag in chrome://flags.

Resources: Mozilla hacks article (older syntax), MDN article.
cr4‒41492.1‒4.4533.19.13.29.35.5‒11231‒55all14
cssCSS Device Adaptation

A standard way to override the size of viewport in web page using the @viewport rule, standardizing and replacing Apple's own popular <meta> viewport implementation.

Browser-specific notes:
#1: IE only supports the 'width' and 'height' properties.
#2: Opera Mobile and Opera Mini only support the 'orientation' property.

Resources: Introduction to meta viewport and @viewport in Opera Mobile, Device adaptation in Internet Explorer 10, Microsoft Edge feature request on UserVoice, Chrome tracking bug, WebKit tracking bug, Mozilla tracking bug.
wd29‒602.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all13
cssScoped CSS

Allows CSS rules to be scoped to part of the document, based on the position of the style element. The attribute has been removed from the current specification.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.

Resources: Polyfill, HTML5 Doctor article, HTML5Rocks article.
unoff20‒3437‒602.1‒533.1‒TP3.2‒10.35.5‒11221‒55all13
css3CSS3 image-orientation

CSS property used generally to fix the intended orientation of an image. This can be done using 90 degree increments or based on the image's EXIF data using the "from-image" value.

Opening the image in a new tab in Chrome results in the image shown in the orientation according to the EXIF data.

Browser-specific notes:
#1: Partial support in iOS refers to the browser using EXIF data by default, though it does not actually support the property.

Resources: MDN article, Blog post, Demo (Chinese).
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒11226‒55all13
domrelList (DOMTokenList)

Method of easily manipulating rel attribute values on elements, using the DOMTokenList object (similar to classList).

Browser-specific notes:
#1: Chrome and Chromium based browsers support relList on link elements, but not anchor elements.

Resources: MDN - DOMTokenList, domtokenlist polyfill.
ls4‒41502.1‒4.4533.193.29.05.5‒11230‒55all13
jsProximity API

Defines events that provide information about the distance between a device and an object, as measured by a proximity sensor.

Resources: Demo, SitePoint article.
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒1115‒55all13
domMediaRecorder API

The MediaRecorder API (MediaStream Recording) aims to provide a really simple mechanism by which developers can record media streams from the user's input devices and instantly use them in web apps, rather than having to perform manual encoding operations on raw PCM data, etc.

Browser-specific notes:
#1: Can be enabled via the experimental Web Platform features flag. Does not support audio recording, only video.

Resources: MDN article.
Parent feature: getUserMedia/Stream API.
wd4‒41492.1‒533.1‒TP3.2‒10.35.5‒11229‒55all12
css3CSS element() function

This function renders a live image generated from an arbitrary HTML element.

Browser-specific notes:
#1: In Firefox < 4, usage limited to the background and background-image CSS properties.

Resources: MDN page.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒114‒55all12
css3CSS font-variant-alternates

Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values for certain types of OpenType fonts.

Browser-specific notes:
#1: Low-level syntax available in font-feature-settings property equivalent to OpenType features: salt, ss01 through ss20, cv01 through cv99, swsh, cswh, ornm, nalt.
#2: Experimental support available by enabling the layout.css.font-features.enabled flag.

Resources: Mozilla Developer Network.
cr16‒602.1‒4.34.4‒533.19.13.29.35.5‒910‒1142434‒55all12
css:dir() CSS pseudo-class

Matches elements based on their directionality. :dir(ltr) matches elements which are Left-to-Right. :dir(rtl) matches elements which are Right-to-Left.

Resources: HTML specification for `:dir()`, Mozilla Developer Network article, Chrome issue #576815: CSS4 pseudo-class :dir(), Microsoft Edge feature request on UserVoice, WebKit bug #64861: Need support for :dir() pseudo-class, JS Bin testcase.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒1117‒3649all12
otherJPEG XR image format

The latest JPEG image format of Joint Photographic Experts Group which boasts better compression and supports lossless compression, alpha channel, and 48-bit deep color over normal jpg format.

Resources: Microsoft JPEG XR Codec Overview, Firefox support bug, Chrome support bug (marked as WONTFIX).
other4‒602.1‒533.1‒TP3.2‒10.35.5‒89‒112‒55all11
jsEfficient Script Yielding: setImmediate()

Yields control flow without the minimum delays enforced by setTimeout.

Resources: The case for setImmediate(), Script yielding with setImmediate, setImmediate polyfill, Firefox tracking bug, Chrome bug closed as WONTFIX.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all9
cssCSS Exclusions Level 1

Exclusions defines how inline content flows around elements. It extends the content wrapping ability of floats to any block-level element.

Resources: CSS Exclusions, Firefox tracking bug, WebKit tracking bug.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒910‒112‒55all8
css3CSS Regions

Method of flowing content into multiple elements.

Browser-specific notes:
#1: Support is limited to using an iframe as a content source with the -ms-flow-into: flow_name; and -ms-flow-from: flow_name; syntax.
#2: Partial support refers to not supporting the region-fragment property.

Resources: Adobe demos and samples, IE10 developer guide info, WebPlatform Docs, Firefox feature request bug.
wd19‒3435‒602.1‒536.1‒TP7.0‒10.35.5‒910‒112‒55all8
domResource Hints: Lazyload

Gives a hint to the browser to lower the loading priority of a resource.

Resources: lazyload attribute | lazyload property.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒10112‒55all8
jsURLSearchParams

The URLSearchParams interface defines utility methods to work with the query string of a URL.

Browser-specific notes:
#1: Partial support refers to only supporting entries(), keys(), values(), and for...of.

Resources: Easy URL manipulation with URLSearchParams, MDN reference.
ls4‒41492.1‒4.4533.110.13.210.35.5‒11229‒3644all7
jsInput Method Editor API

Provides scripted access to the Input Method Editor (IME). An IME is often used to input characters from East Asian languages by typing roman characters and selecting from the resulting suggestions.

Browser-specific notes:
#1: Prefixed implementation uses msGetInputContext() method from an earlier version of the spec to get the InputMethodContext, rather than the inputMethodContext attribute. Also includes support for getCompositionAlternatives() from the latest Editor'.

Resources: Building Better Input Experience for East Asian Users with the IME API in IE11.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒10112‒55all7
cssCSS text-justify

CSS property to define how text should be justified when text-align: justify is set.

Browser-specific notes:
#1: Supports inter-word, but not inter-character or  none. Also supports the following unofficial values: distribute , distribute-all-lines, distribute-center-last, inter-cluster, inter-ideograph, newspaper. See MSDN for details.
#2: inter-word and distribute values supported behind the "Experimental platform features" flag but distribute support is buggy.

Resources: Chrome support bug, WebKit support bug, Firefox support bug.
wd4‒41432.1‒4.4533.1‒TP3.2‒10.35.58‒112‒3652all7
domNetwork Information API

The Network Information API enables web applications to access information about the network connection in use by the device.

In Chrome the API is enabled on Android only, support for other platforms is coming . Support is also available on Firefox OS.

Browser-specific notes:
#1: Supports only the navigator.connection.type value which doesn't match the latest spec. see details.

Resources: (NetInfo) Capability reporting with ServiceWorker.
unoff4‒602.2‒4.34.4533.1‒TP3.2‒10.35.5‒112‒55all7
jsAmbient Light API

Defines events that provide information about the ambient light level, as measured by a device's light sensor.

Browser-specific notes:
#1: Partial support in desktop Firefox refers to support being limited to Mac OS X. Support for Windows 7 is in progress.

Resources: Demo, Article.
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒11222‒55all6
css3CSS Counter Styles

The @counter-style CSS at-rule allows custom counter styles to be defined. A @counter-style rule defines how to convert a counter value into a string representation.

Browser-specific notes:
#1: Partial support in Firefox refers to lacking support for image symbols.

Resources: MDN article.
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒3133‒55all6
cssCSS Scroll snap points

CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap points.

Works in the iOS WKWebView, but not UIWebView.

Browser-specific notes:
#1: Partial support in IE10 refers to support limited to touch screens.
#2: Partial support in IE11 documented here.
#4: Partial support in Safari refers to not supporting the none keyword in scroll-snap-points-x, scroll-snap-points-y and scroll-snap-coordinate, and length keywords (top, right, etc.) in scroll-snap-destination and scroll-snap-coordinate.
#5: Supports properties from an older version of the spec.
#6: Partial support in IE & Edge refers to not supporting scroll-snap-coordinate and scroll-snap-destination.

Resources: Blog post, MDN Documentation for CSS Scroll snap points, Polyfill.
cr4‒602.1‒533.1TP3.29.05.5‒910112‒3639all4
domCustom Elements v1

Method of defining new HTML tags.

Chrome 36+/Opera 20+ implemented a previous version of Custom Elements (v0) that used .registerElement(). Other browsers are implementing v1, window.customElements.define().

Browser-specific notes:
#1: Supports "Autonomous custom elements" but not "Customized built-in elements".

Resources: Firefox tracking bug: Implement Custom Elements (from Web Components), IE Web Platform Status and Roadmap: Custom Elements, Google Developers - Custom elements v1: reusable web components, customElements.define polyfill, WebKit Blog: Introducing Custom Elements.
ls4‒41542.1‒533.110.13.210.35.5‒910‒11230‒55all4
otherJPEG 2000 image format

JPEG 2000 (JP2) was created by the Joint Photographic Experts Group committee in 2000 with the intention of superseding their original discrete cosine transform-based JPEG standard (created in 1992) with a newly designed, wavelet-based method. It offers some advantages in image fidelity over standard JPEG.

Browser-specific notes:
#1: Not supported by Safari for Windows.

Resources: Wikipedia article.
other4‒602.1‒536‒TP5.0‒10.35.5‒112‒55all4
html5Video Tracks

Method of specifying and selecting between multiple video tracks. Useful for providing sign language tracks, burnt-in captions or subtitles, alternative camera angles, etc.

Resources: MSDN article.
ls4‒602.1‒536.1‒TP7.0‒10.35.5‒112‒55all3
dominputmode attribute

The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the form control.

Firefox OS is reported to have partial support for this property as x-inputmode.

Blink-based browsers appear to recognize the inputMode property on input & textarea fields though it is unclear what effect it currently has as the feature is still in development.

Browser-specific notes:
#1: Support can be enabled via the dom.forms.inputmode flag.

Resources: Demo on Wufoo (old).
ls4‒602.1‒533.1‒TP3.2‒10.35.5‒111721‒55all2
canvasWebGL 2.0

Next version of WebGL. Based on OpenGL ES 3.0.

Browser-specific notes:
#1: Can be enabled in Firefox by setting the about:config preference webgl.enable-prototype-webgl2 to true.
#2: WebGL2 context is accessed from "experimental-webgl2" rather than "webgl2".
#3: Can be enabled in Chrome by passing the "--enable-unsafe-es3-apis" flag when starting the browser through the command line.
#4: Can be enabled via the "Experimental Features" developer menu.

Resources: Firefox blog post, Getting a WebGL Implementation.
Parent feature: Canvas (basic support).
other4‒41562.1‒533.110.13.2‒10.35.5‒11225‒3651all2
jsES6 classes

ES6 classes are syntactical sugar to provide a much simpler and clearer syntax to create objects and deal with inheritance.

Browser-specific notes:
#1: Requires strict mode. Non-strict mode support is behind the flag 'Enable Experimental JavaScript', disabled by default.

Resources: MDN article on ES6 classes, Sitepoint deep dive on ES6 classes, List of resources critical of ES6 classes.
other4‒41492.1‒4.4533.193.29.05.5‒112‒3645all1
otherUpgrade Insecure Requests

Declare that browsers should transparently upgrade HTTP resources on a website to HTTPS.

The HTTP header is Content-Security-Policy: upgrade-insecure-requests. Alternatively, the HTML tag is <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">.

Resources: MDN article, Demo Website, WebKit feature request bug.
cr4‒41432.1‒4.4533.110.13.210.35.5‒112‒3642all1
jsWeb MIDI API

The Web MIDI API specification defines a means for web developers to enumerate, manipulate and access MIDI devices.

Resources: Polyfill, Firefox bug.
wd4‒41432.1‒4.4533.1‒TP3.2‒10.35.5‒112‒55all1
otherFLAC audio format

Popular lossless audio compression format.

Support refers to use using the audio element, not other conditions.

Browser-specific notes:
#1: HTMLMediaElement.canPlayType('audio/flac') returns an empty string.
#2: Only works on ChromeOS.

Resources: Wikipedia, Chrome support bug, Edge UserVoice request.
Parent feature: Audio element.
other4‒41562.13‒4.4533.1‒TP3.2‒10.35.5‒112‒3651all1
cssCSS Motion Path

Allows elements to be animated along SVG paths or shapes.

Browser-specific notes:
#1: Requires the "Experimental Web Platform features" flag to be enabled.

Resources: Blog post, MDN article, Demo, Firefox tracking bug.
unoff4‒41462.1‒4.4533.1‒TP3.2‒10.35.5‒112‒55all1
html5Subresource Integrity

Subresource Integrity enables browsers to verify that file is delivered without unexpected manipulation.

Resources: Subresource Integrity (MDN), SRI generation and browser support test, SRI hash webpage scanner, WebKit feature request bug.
rec4‒41452.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3643all1
css:placeholder-shown CSS pseudo-class

Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in HTML5. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.

For support of styling the actual placeholder text itself, see CSS ::placeholder.

Resources: WebKit commit, Firefox bug, Microsoft Edge feature request on UserVoice.
wd4‒41472.1‒4.4533.193.29.05.5‒112‒3651all1
otherBrotli Accept-Encoding/Content-Encoding

More effective lossless compression algorithm than gzip and deflate.

Browser-specific notes:
#1: Supported in Chrome and Opera behind the 'Brotli Content-Encoding' flag.
#2: Enabled since 27 May 2016.

Resources: Introducing Brotli, Blink's intent to ship, Official code repository, WebKit Bug 154859: Add support for format brotli for HTTP compression.
other4‒41512.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3644all1
domPassive event listeners

Event listeners created with the passive: true option cannot cancel (preventDefault()) the events they receive. Primarily intended to be used with touch events and wheel events. Since they cannot prevent scrolls, passive event listeners allow the browser to perform optimizations that result in smoother scrolling.

Resources: Improving scroll performance with passive event listeners - Google Developers Updates, Polyfill from the WICG, Original WICG EventListenerOptions repository, JS Bin testcase.
ls4‒41512.1‒4.4533.1103.210.05.5‒112‒3649all1
jsrequestIdleCallback

API allowing the execution of JavaScript to be queued to run in idle browser time, either at the end of a frame or when the user is inactive. Also covers support for cancelIdleCallback. The API has similarities with requestAnimationFrame.

Resources: MDN documentation, Google Developers article, Shim.
wd4‒41472.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3652all1
domrel=noopener

Ensure new browsing contexts are opened without a useful window.opener.

Resources: Explainer, Gecko/Firefox issue, WebKit/Safari issue, Edge feature request.
ls4‒41492.1‒4.4533.110.13.210.35.5‒112‒3652all1
domClient Hints: DPR, Width, Viewport-Width

DPR, Width, and Viewport-Width hints enable proactive content negotiation between client and server, enabling automated delivery of optimized assets - e.g. auto-negotiating image DPR resolution.

Resources: Automating resource selection with Client Hints, Mozilla Bug 935216 - Implement Client-Hints HTTP header, WebKit Bug 145380 - Add Content-DPR header support, Microsoft Edge feature request on UserVoice.
other4‒41462.1‒4.4533.1‒TP3.2‒10.35.5‒112‒55all1
domIntersectionObserver

API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.

Browser-specific notes:
#1: Enabled in Firefox by setting the about:config preference dom.IntersectionObserver.enabled to true.
#2: "Preliminary" support as feature is still in development.

Resources: MDN article, Polyfill, Google Developers article.
unoff4‒41512.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3652all1
domShadow DOM v1

Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM & CSS.

Shadow DOM v0 was implemented in Chrome/Opera but other browser vendors are implementing v1.

Browser-specific notes:
#1: Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.

Resources: Safari implementation bug, Firefox implementation bug, Google Developers - Shadow DOM v1: self-contained web components.
wd4‒41532.1‒4.4533.1103.210.05.5‒112‒55all1
cssCSS Containment

The CSS contain property lets developers limit the scope of the browser's styles, layout and paint work for faster and more efficient rendering.

Browser-specific notes:
#1: Enabled via the "Experimental Web Platform features" flag.

Resources: Google Developers article, Firefox bug.
unoff4‒41522.1‒4.4533.1‒TP3.2‒10.35.5‒112‒3652all1
jsCredential Management API

API that provides a programmatic interface to the browser's credential manager. In short, an origin can request a user's credentials to sign them in, or can ask the browser to save credentials on the user's behalf. Both of these requests are user-mediated.

Browser-specific notes:
#1: In Chrome 51 ~ 56, PSL matched credentials are not supported. This means you cannot use credentials set on a.example.com in b.example.com. This is supported since Chrome 57.

Resources: Tutorial by Google, Mozilla Developer Network, Codelab, Live Demo, Sample Code, Spec discussion.
wd4‒41572.1‒4.4533.1‒TP3.2‒10.35.5‒112‒55all1
css3CSS text-size-adjust

On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.

Browser-specific notes:
#1: If the viewport size is set using a <meta> element, the -ms-text-size-adjust property is ignored. See MSDN.
#2: Old versions of WebKit-based desktop browsers (Chrome<27, Safari<6) suffer from a bug where if -webkit-text-size-adjust is explicitly set to none, instead of ignoring the property, the browsers will prevent the user from zooming in or out on the webpage.

Resources: MDN Docs, Mozilla Bug #1226116: Unprefix -moz-text-size-adjust.
unoff4‒41542.1‒533.1‒TP5.0‒10.35.5‒112‒55all1
jsPermissions API

High-level JavaScript API for checking and requesting permissions.

Resources: Permission API samples and examples, Extended "polyfill" version of permission API.
unoff4‒41432.1‒533.1‒TP3.2‒10.35.5‒112‒3646all0
domKeyboardEvent.code

A KeyboardEvent property representing the physical key that was pressed, ignoring the keyboard layout and ignoring whether any modifier keys were active.

Browser-specific notes:
#1: Enabled in Chrome & Opera through the "experimental Web Platform features" flag.

Resources: Mozilla Developer Network, Chrome tracking bug, WebKit feature request bug.
wd4‒41482.1‒533.110.13.210.35.5‒112‒3638all0
jsBroadcastChannel

BroadcastChannel allows scripts from the same origin but other browsing contexts (windows, workers) to send each other messages.

Resources: MDN article.
ls4‒41542.1‒533.1‒TP3.2‒10.35.5‒112‒3638all0
cssCase-insensitive CSS attribute selectors

Including an i before the ] in a CSS attribute selector causes the attribute value to be matched in an ASCII-case-insensitive manner. For example, [b="xyz" i] would match both <a b="xyz"> and <a b="XYZ">.

Resources: Mozilla Developer Network article, JS Bin testcase.
unoff4‒41492.1‒533.193.29.05.5‒112‒3647all0
html5seamless attribute for iframes

The seamless attribute makes an iframe's contents actually part of a page, and adopts the styles from its hosting page. The attribute has been removed from the current specification.

Chrome 20-26 had partial support behind a flag, though this was later removed.

Browser-specific notes:
#1: Hides the border of seamless iframes and recognizes the 'seamless' DOM property, but does not provide actual support.

Resources: Experimental polyfill, Article, Bug on Firefox support.
unoff4‒602.1‒53783.2‒10.35.5‒112‒3652all0
jsPush API

API to allow messages to be pushed from a server to a browser, even when the site isn't focused or even open in the browser.

Browser-specific notes:
#1: Partial support refers to not supporting PushEvent.data and PushMessageData.
#2: Requires full browser to be running to receive messages.

Resources: MDN article, Google Developers article.
wd4‒41502.1‒533.1‒TP3.2‒10.35.5‒112‒3644all0
domDOM manipulation convenience methods

jQuery-like methods on DOM nodes to insert nodes around or within a node, or to replace one node with another. These methods accept any number of DOM nodes or HTML strings as arguments. Includes: ChildNode.before, ChildNode.after, ChildNode.replaceWith, ParentNode.prepend, and ParentNode.append.

Browser-specific notes:
#1: Enabled through the "Enable Experimental Web Platform Features" flag in chrome://flags.

Resources: WHATWG DOM Specification for ChildNode, WHATWG DOM Specification for ParentNode, JS Bin testcase, ParentNode article on Mozilla Developer Network, ChildNode article on Mozilla Developer Network, MS Edge feature request on UserVoice.
ls4‒41542.1‒533.1103.210.05.5‒112‒3649all0
dom"once" event listener option

Causes an event listener to be automatically removed after it gets invoked, so that it only gets invoked once. Similar to jQuery's $.one() feature.

Resources: Chromium Issue 615384: Support "once" event listener option, JS Bin testcase, MS Edge feature request on UserVoice.
ls4‒41552.1‒533.1103.210.05.5‒112‒3650all0
jsAsync functions

Async function make it possible treat functions returning Promise objects as if they were synchronous.

Browser-specific notes:
#1: Since build 14342 - disabled by default; can be enabled through about:flags.
#2: Async functions are present in Firefox Nightly since 31th October 2016.

Resources: Async Functions (MDN), Async functions - making promises friendly.
other4‒41552.1‒533.110.13.210.35.5‒112‒3652all0
css#rrggbbaa hex color notation

The CSS Color Module Level 4 defines new 4 & 8 character hex notation for color to include the opacity level.

Support in Chrome is currently disable due to this issue.

Browser-specific notes:
#1: Can be enabled via the "Experimental web platform features" flag.

Resources: JS Bin testcase, Edge support request for rrggbbaa.
unoff4‒41522.1‒533.1103.210.05.5‒112‒3649all0
otherWebAssembly

WebAssembly or "wasm" is a new portable, size- and load-time-efficient format suitable for compilation to the web.

Browser-specific notes:
#1: Can be enabled via the javascript.options.wasm in about:config.
#2: Can be enabled via the #enable-webassembly flag.
#3: Can be enabled via the Experimental JavaScript Features flag.
#4: Disabled for Firefox 52 ESR.

Resources: Official site.
other4‒41572.1‒533.1TP3.2‒10.35.5‒112‒3653all0
jsWeb Bluetooth

Allows web sites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way.

Browser-specific notes:
#1: Available by enabling the "Web Bluetooth" experimental flag in about:flags. Currently support varies by OS.
#2: Only in Opera Mobile.
#3: Available in Origin Trials for Chrome OS, Android M, and Mac.
#4: Currently support varies by OS.

Resources: Intro, Samples, Demos, Implementation Status.
unoff4‒41562.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
cssCSS Backdrop Filter

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform Features" flag.

Resources: Blog post, Mozilla Developer Network, Edge feature request.
unoff4‒41472.1‒533.193.29.05.5‒112‒55all0
cssselector list argument of :nth-child and :nth-last-child CSS pseudo-classes

The newest versions of :nth-child() and :nth-last-child() accept an optional of S clause which filters the children to only those which match the selector list S. For example, :nth-child(1 of .foo) selects the first child among the children that have the foo class (ignoring any non-foo children which precede that child). Similar to :nth-of-type, but for arbitrary selectors instead of only type selectors.

Resources: Mozilla Bug 854148 - Support for :nth-child(An+B of sel), :nth-last-child(An+B of sel) pseudo-classes, Chromium Issue 304163: Implement :nth-child(an+b of S) and :nth-last-child(an+b of S) pseudo-classes, MS Edge feature request on UserVoice.
unoff4‒602.1‒533.193.29.05.5‒112‒55all0
cssselector list argument of :not()

Selectors Level 4 allows the :not() pseudo-class to accept a list of selectors, which the element must not match any of. Selectors Level 3 only allowed :not() to accept a single simple selector. Thus, :not(a):not(.b):not([c]) can instead be written as :not(a, .b, [c]).

Resources: MDN article, Chrome feature request issue, Firefox feature request bug.
wd4‒41582.1‒533.193.29.05.5‒112‒3652all0
cssdisplay: flow-root

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. The result is the same as the "clearfix" hack.

Resources: Mozilla bug report, Chromium bug report, Webkit bug report, Edge bug report, Blog post: "The end of the clearfix hack?".
wd4‒41582.1‒533.1‒TP3.2‒10.35.5‒112‒3653all0
cssCSS filter() function

This function filters a CSS input image with a set of filter functions (like blur, grayscale or hue).

Resources: Blog post.
wd4‒602.1‒533.19.13.210.05.5‒112‒55all0
cssCSS font-rendering controls

@font-face descriptor (currently defined as font-display) that allows control over how a downloadable font renders before it is fully loaded.

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform features" flag.
#2: Can be enabled in Firefox through the layout.css.font-display.enabled flag at about:config.

Resources: Google Developers article, MDN article, CSS tricks article.
unoff4‒41492.1‒533.1‒TP3.2‒10.35.5‒112‒3646all0
cssCSS revert value

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block. This is in contrast to the initial value, which is simply defined on a per-property basis, and for display would be inline.

Resources: Mozilla Developer Network, Firefox feature request bug, Microsoft Edge feature request on UserVoice, Chrome feature request issue.
wd4‒602.1‒533.19.13.29.35.5‒112‒55all0
css:focus-within CSS pseudo-classunoff4‒602.1‒533.110.13.210.35.5‒112‒3652all0
jsPayment Request API

Payment Request is a new API for the open web that makes checkout flows easier, faster and consistent on shopping sites.

Apple provides an equivalent proprietary API called Apple Pay JS.

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform features" flag.
#2: Can be enabled via the "Experimental Web Payments API" flag.
#3: Preliminary implementation.

Resources: Spec discussion, Bringing easy and fast checkout with Payment Request API, Payment Request API Integration Guide, Mozilla Developer Network, Demo, Simpler Demos and Codes.
wd4‒41532.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
cssCSS @apply rule

Allows a set of CSS properties to be applied using a named variable.

See also support for CSS Variables.

Browser-specific notes:
#1: Can be enabled via the "Experimental web platform features" flag under about:flags.

Resources: Article on CSS @apply.
unoff4‒41512.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
cssCSS hanging-punctuation

Allows some punctuation characters from start (or the end) of text elements to be placed "outside" of the box in order to preserve the reading flow.

Resources: CSS tricks article.
wd4‒602.1‒533.1103.210.05.5‒112‒55all0
cssCSS Initial Letter

Method of creating an enlarged cap, including a drop or raised cap, in a robust way.

Firefox status: in-development.

Browser-specific notes:
#1: Safari implementation is incomplete. Does not allow applying web fonts to the initial letter.

Resources: Firefox Implementation Ticket, MDN, Blog post on Envato Tuts+, "Better CSS Drop Caps With initial-letter", Demos at Jen Simmons Labs.
wd4‒602.1‒533.19.13.29.05.5‒112‒55all0
jsObject RTC (ORTC) API for WebRTC

Enables mobile endpoints to talk to servers and web browsers with Real-Time Communications (RTC) capabilities via native and simple JavaScript APIs.

ORTC is often dubbed WebRTC 1.1. It is possible to make ORTC communicate with WebRTC 1.0 endpoints. See WebRTC 1.0 for support details for that API.

Resources: Bringing Interoperable Real-Time Communications to the Web.
other4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
jsES6 module

Import/export modules in JavaScript in ES6.

Browser-specific notes:
#1: Support can be enabled via about:flags.
#2: Support can be enabled via about:config.

Resources: Intro to ES6 modules, MS Edge blog post on ES6 modules support, Mozilla hacks article, Firefox support bug, Blog post: Native ECMAScript modules - the first overview.
ls4‒602.1‒533.110.13.210.35.5‒112‒3654all0
jsWebVR API

API for accessing virtual reality (VR) devices, including sensors and head-mounted displays.

Browser-specific notes:
#1: Available only in Firefox nightly & Firefox Developer Edition, not yet on track to be enabled for stable & beta builds.
#2: Enabled behind the WebVR & "Gamepad Extensions" flags under chrome://flags. Currently builds use an older version of the (still changing) specification.
#3: In development in the latest Edge builds.

Resources: Detailed device support information, WebVR polyfill, WebVR framework, WebVR info.
unoff4‒41572.1‒533.1‒TP3.2‒10.35.5‒112‒3654all0
cssExplicit descendant combinator >>

An explicit, non-whitespace spelling of the descendant combinator. A >> B is equivalent to A B.

Resources: MDN article, JS Bin testcase, Chrome issue #446050: Implement Descendant Combinator ">>", Mozilla bug #1266283 - Implement CSS4 descendant combinator `>>`.
unoff4‒41582.1‒533.1TP3.2‒10.35.5‒112‒55all0
cssCSS3 attr() function

CSS Values and Units Level 3 adds the ability to use attr() on any CSS property, not just content, and to use it for non-string values (e.g. numbers, colors).

Resources: Mozilla Developer Network article, Microsoft Edge feature request on UserVoice, Mozilla Bug #435426: implement css3-values extensions to `attr()`, Chromium issue #246571: Implement CSS3 attribute / attr references, WebKit Bug #26609: Support CSS3 attr() function.
cr4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
css:has() CSS relational pseudo-class

Only select elements containing specified content. For example, a:has(>img) selects all <a> elements that contain an <img> child.

Resources: :has() on MDN, Firefox support bug.
unoff4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all0
css3CSS ::marker pseudo-element

The ::marker pseudo-element allows list item markers to be styled or have their content value customized.

Resources: Chrome support bug, Firefox support bug, WebKit support bug, Edge UserVoice request, MDN article, CSS-Tricks article.
wd4‒602.1‒533.1‒TP3.2‒10.35.5‒112‒55all0

supported partial optional missing unknown prefixed

Usage percentage: 0 - .01 - 1-9 - 10 - 20 - majority