Browser compatibility

Append ellipsis when text overflows its containing element.

Resources: jQuery polyfill for Firefox, MDN Web Docs - text-overflow, has.js test, WebPlatform Docs.

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.

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.

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.

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.

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 Web Docs - ::first-line, CSS tricks article.
Parent feature: CSS3 selectors.

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: WebPlatform Docs.

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: WHATWG blog post, Blog post on usage problems, WebPlatform Docs, MDN Web Docs - contentEditable attribute.

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

Resources: Tutorial and information, MDN Web Docs - CSS Counters, WebPlatform Docs.

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(), MDN Web Docs - Element.insertAdjacentElement(), MDN Web Docs - Element.insertAdjacentText(), JS Bin testcase.

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

Firefox versions before 57 also supported the padding-box value for box-sizing, though this value was been removed from the specification and later versions of the browser.

Resources: MDN Web Docs - CSS box-sizing, Blog post, Polyfill for IE, CSS Tricks, WebPlatform Docs.

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.

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

See MDN for feature support details.

Resources: MDN Web Docs - Range, QuirksMode, "Rangy" Range library with old IE support.

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: Firefox implementation bug, Blog post on background-position-x & y properties, MDN Web Docs - background-position-x, MDN Web Docs - background-position-y.

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

Resources: MDN Web Docs - Web Storage, Support library, Simple demo, has.js test, WebPlatform Docs.

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.

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 Web Docs - querySelector, MDN Web Docs - querySelectorAll, WebPlatform Docs.

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.
#4: in Safari 9.1, having a position:fixed-element inside an animated element, may cause the position:fixed-element to not appear.

Resources: Article on mobile support, position: fixed on MDN.

Method of accessing DOM elements by class name.

Resources: Test page, getElementsByClassName on MDN.

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: Wikipedia, WebPlatform Docs.

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, MDN Web Docs - Canvas API.

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.

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 Web Docs - execCommand, execCommand and queryCommandSupported demo.

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.

The modern standard API for adding DOM event handlers. Introduced in the DOM Level 2 Events spec. Also implies support for removeEventListener, 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: MDN Web Docs - addEventListener, Financial Times IE8 polyfill, WebReflection ie8 polyfill.

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.

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

Resources: MDN Web Docs - DOMContentLoaded.

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, Practical Guide to Media Queries.

Method of displaying text on Canvas elements.

Resources: Examples by Mozilla, Support library, has.js test, WebPlatform Docs.
Parent feature: Canvas (basic support).

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, WebPlatform Docs.

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

Resources: MDN Web Docs - btoa(), MDN Web Docs - atob(), Polyfill.

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: https://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, Polyfill which includes border-radius, WebPlatform Docs, MDN Web Docs - CSS border-radius.

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.
#5: The returned object lacks x & y values, though existing top & left values can be used instead.

Resources: MDN Web Docs - getBoundingClientRect, Microsoft Developer Network.

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 Web Docs - Console, Chrome console reference, Edge/Internet Explorer console reference.

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: MDN Web Docs - elementFromPoint.

Method of using multiple images as a background.

Resources: Demo & information page, WebPlatform Docs.

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 Web Docs - CSS transform, Workaround script for IE, Converter for IE, has.js test, WebPlatform Docs, Microsoft Edge Platform Status (SVG).

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.
HTMLElement.innerText is similar to, but has some important differences from, the standard Node.textContent property.

Resources: MDN Web Docs - innerText, 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.

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

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

Resources: has.js test, WebPlatform Docs, Geolocation API on MDN.

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 Web Docs - dataset, MDN Guide - Using data-* attributes.

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.
#3: Ignores the autoplay attribute by default, though autoplay behavior can be enabled by users.

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.

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.
#3: SVGs with XML declarations are not displayed when used in data-urls.

Resources: Information page, Wikipedia, Data URL converter, Information on security issues.

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: MDN Web Docs - insertAdjacentHTML, Polyfill.

The CSS outline properties draw a border around an element that does not affect layout, making it ideal for highlighting. This covers the outline shorthand, as well as outline-width, outline-style, outline-color and outline-offset.

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

Resources: CSS Basic User Interface Module Level 3, MDN Web Docs - CSS outline.

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: Partial support in IE9-11 refers to not supporting animations.
#3: IE9-11 & Edge don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seems to be the best workaround.

Resources: Wikipedia, A List Apart article, SVG showcase site, Web-based SVG editor, has.js test.

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, WebPlatform Docs.

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: MDN Web Docs - attribute maxlength.
Parent feature: Form validation.

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 Web Docs - CSS word-break, WebPlatform Docs.

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 Web Docs - Working with JSON, JSON in JS (includes script w/support), has.js test, WebPlatform Docs, JSON explainer.
Parent feature: ECMAScript 5.

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

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.

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 Web Docs - window.postMessage, Simple demo, has.js test, WebPlatform Docs.

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

Resources: MDN Web Docs - onhashchange, Simple demo, Polyfill, WebPlatform Docs.

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: MDN Web Docs - CSS letter-spacing.

Using the @namespace at-rule, elements of other namespaces (e.g. SVG) can be targeted using the pipe (|) selector.

Resources: MDN Web Docs - CSS @namespace.

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 Web Docs - XMLSerializer, Comparing Document Position by John Resig.

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

Resources: MDN Web Docs - Element wbr.

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 Web Docs - devicePixelRatio.

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, MDN Web Docs - readonly attribute.

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

Resources: MDN Web Docs - CSS currentColor, CSS Tricks article.

Method to programmatically trigger a DOM event.

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

Resources: MDN Web Docs - dispatchEvent, Financial Times IE8 polyfill, WebReflection ie8 polyfill.

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

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

Resources: MDN Web Docs - Node.textContent.

Controls for setting and getting text selection via setSelectionRange() and the selectionStart & selectionEnd properties.

Resources: MDN article on setSelectionRange.

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

Resources: Wikipedia article, Firefox extension allowing support in Win7.
Parent feature: Video element.

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: MDN Web Docs - :first-letter.

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

Resources: MDN Web Docs - Using Web Workers, Web Worker demo, Polyfill for IE (single threaded), Tutorial.

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 Web Docs - box-shadow, Live editor, Demo of various effects, WebPlatform Docs.

Functions for measuring performance.

console.time() starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started. These functions are not always available in workers. For example, in Firefox, they are available from version 38. More on using the console on mobile devices, see here.

Resources: MDN Web Docs - Console.time.
Parent feature: Basic console logging functions.

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.

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 Web Docs - getComputedStyle, Demo, Polyfill for IE.

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.
#3: Partial support in Edge 15 and older refers to a lack of support for SVG data URIs. see bug.

Resources: Tutorial for advanced effects.

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.

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.
"Some key events, or their values, might be suppressed by the IME in use". On mobile (virtual keyboard), all keys are reported as 0.

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

Resources: MDN Web Docs - charCode.

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 Web Docs - Script Attributes, has.js test, WebPlatform Docs, async vs defer attributes.

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.

Browser-specific notes:
#1: Does not support the steps(), step-start & step-end timing functions.

Resources: Article on usage, Examples on timing functions, WebPlatform Docs.

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Browser-specific notes:
#1: Only supports basic support without locale & options parameters.

Resources: MDN article.

Popular lossy audio compression format.

Support refers to this format's use in 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.

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, MDN web docs, Tutorial.

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

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix). Safari does not support -webkit-background-clip: text; for <button> elements. But you can put <span> inside <button> to get the same result.

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, Polyfill for IE7-8, MDN Web Docs - background-image.

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.

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

Resources: XPath in Javascript: Introduction, MDN Web Docs - XPath introduction, Edge team article on implementation, DOM XPath - WHATWG Wiki.

Icon used by browsers to identify a webpage or site. While all browsers support the .ico format, the PNG format can be preferable.

Favicon support is a complicated topic. See this guide for more information.

See also SVG favicons.

Browser-specific notes:
#1: Does not use favicons at all (but may have alternative for bookmarks, etc.).

Resources: How to favicon in 2021.

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.
#4: Does not support CORS for resources which redirect: https://bugzilla.mozilla.org/show_bug.cgi?id=1346749.

Resources: Mozilla Hacks blog post, Alternative implementation by IE8, DOM access using CORS, has.js test, MDN Web Docs - Access control CORS.

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 compatibility 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, Polyfill for all possible ES5 features is available in the core-js library.

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

Whether or not a document was/will be cached by a back-forward cache is indicated by event.persisted property where developers can opt to reload the page if needed.

Resources: MDN Web Docs - pageshow, HTML onpageshow Event Attribute, Back/forward cache: web-exposed behaviour, Back-forward cache on Android, web.dev - Back/forward cache.

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.
#2: Does not support the steps(), step-start & step-end timing functions.

Resources: Blog post on usage, WebPlatform Docs.

Convenience property for accessing the <head> element.

Resources: MDN Web Docs - head.

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.

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?, OTF Specification.
Parent feature: @font-face Web fonts.

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: MDN Web Docs - focusin, MDN Web Docs - focusout, Mozilla Bug 687787 - Add support for DOM3 focusin/focusout.

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: WebPlatform Docs, Bug on Firefox support, MDN Web Docs - CSS overflow-wrap.

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, has.js test, Chrome Platform Status: `<time>` element.

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.

Resources: Examples on SVG WOW, MDN Web Docs - animation with SMIL, JS library to support SMIL in SVG, has.js test, Polyfill for SMIL animate events on SVG.

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 with SVGs and images.

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.

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 Web Docs - Manipulating the browser history, Demo page, History.js polyfill, has.js test, WebPlatform Docs.

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

Resources: Chromium blog article, MSDN article, WebPlatform Docs.

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

Resources: SVG filter demos, WebPlatform Docs, SVG Filter effects.

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, iOS versions below 12 don't support indeterminate checkboxes (WebKit Bug 160484).

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: MDN Web Docs - location.

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 Web Docs - Strict Transport Security, OWASP article.

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.

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: Details on newer protocol, Wikipedia, has.js test, WebPlatform Docs, MDN Web Docs - WebSockets API.

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

WebGL support is dependent on GPU support and may not be available on older devices. This is due to the additional requirement for users to have up to date video drivers.

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, Polyfill for IE.
Parent feature: Canvas (basic support).

Method of positioning elements in horizontal or vertical stacks. Support includes 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.

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

Support refers to this format's use in the audio element, not other conditions.

Resources: Wikipedia article.
Parent feature: Audio element.

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 Web Docs - Script attributes, Demo, has.js test, async vs defer attributes.

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

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

Browser-specific notes:
#1: Not supported on quotes property.

Resources: MDN Web Docs - CSS initial, CSS Tricks article.

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, MDN Web Docs - Channel Messaging API.
Parent feature: Cross-document messaging.

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`, MDN Web Docs - CSS :optional, JS Bin testcase.
Parent feature: Form validation.

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.

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.
#4: Does not support assign to classList or the replace() method.

Resources: Mozilla Hacks article, Polyfill script, WebPlatform Docs, SitePoint article, Demo using classList, MDN Web Docs - Element.classList.

Method of indicating a progress state.

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

Resources: CSS-Tricks article, MDN Web Docs - Element progress, Dev.Opera article, Examples of progress and meter elements.

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

Resources: matchMedia.js polyfill, MDN Web Docs - matchMedia, MDN Web Docs - Using matchMedia, WebPlatform Docs.

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 #149398, WebKit bug #190223 and Firefox bug.
#5: Doesn't fire an input event when (un)checking a checkbox or radio button. See MS Edge bug.
#6: Doesn't fire an input event when changing the selected file(s) of an <input type="file">. See WebKit bug #149398 and WebKit bug #204292.

Resources: Specification for `<select>` elements firing the `input` event, MDN Web Docs - input event.

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:
#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.
#4: Safari 7.0 supports only the event listener on window, and not on document.body.

Resources: MDN Web Docs - NavigatorOnLine.onLine.

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.
#2: Does not support Float64Array.

Resources: MDN Web Docs - Typed arrays, Polyfill for this feature is available in the core-js library.
Parent feature: ECMAScript 2015 (ES6).

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 Web Docs - CSS repeating linear gradient.
Parent feature: CSS Gradients.

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.

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

Browser-specific notes:
#1: Created blob url can't be used as object or iframe src.

Resources: MDN Web Docs - createObjectURL.
Parent feature: File API.

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.

API for accessing timing information related to navigation and elements.

Removed in iOS 8.1 due to poor performance.

Resources: MDN Web Docs - Navigation Timing, HTML5 Rocks tutorial, WebPlatform Docs.

When used in HTML, the unofficial text-rendering: optimizeLegibility CSS property enables high-quality kerning and ligatures in certain browsers. Newer browsers have this behavior enabled by default.

The text-rendering property is specified in SVG, though behavior there is not related to kerning pairs & ligatures.

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 Web Docs - CSS text-rendering, CSS Tricks article.

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 Web Docs - BlobBuilder, MDN Web Docs - Blobs.
Parent feature: File API.

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 Web Docs - background-position, Basic information.

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 Web Docs - requestAnimationFrame.

Allows files to be read synchronously in Web Workers.

Resources: MDN Web Docs - FileReaderSync.
Parent feature: FileReader API.

Search field form input type. Intended to look like the underlying platform's native search field widget (if there is one). Other than its appearance, it's the same as an <input type="text">.

Browser-specific notes:
#1: Does not use a special search-specific UI for the field, just the same UI as a regular <input type="text">.

Resources: CSS-Tricks article, Wufoo's The Current State of HTML5 Forms: The search Type.

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

Browser-specific notes:
#1: Does not support readAsBinaryString, but readAsBinaryString can be polyfilled.

Resources: MDN Web Docs - FileReader, WebPlatform Docs.
Parent feature: File API.

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

Resources: MDN Web Docs - Page Visibility, SitePoint article, Demo.

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

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

When changing the innerHTML content of a node containing a single CharacterData node, resulting in a single-but-different CharacterData child node, WebKit browsers consider this a characterData mutation of the child CharacterData node, while other browsers consider it a childList mutation of the parent node.

Resources: MutationObserver from MDN, Polyfill.

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, MDN Web Docs - input element: pattern attribute.
Parent feature: Form validation.

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: MDN Web Docs - Node.compareDocumentPosition.

Method of generating cryptographically random values.

Resources: MDN Web Docs - crypto.getRandomValues.

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: MDN Web Docs - CustomEvent, Polyfill based on the MDN snippet, EventListener polyfill which includes a CustomEvent polyfill.

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, What is the CSS ‘ch’ Unit?.

Version 1.2 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 about TLS 1.2.

Format for marking up text captions for multimedia resources.

WebVTT must be used with the <track> element.

Browser-specific notes:
#1: Firefox 31 - 54 lacks support for the ::cue pseudo-element. See bug #865395..
#2: Firefox 55+ implements ::cue but still lacks support for the ::cue(<selector>) pseudo-element with selector. See bug #1321489..

Resources: Getting Started With the Track Element, An Introduction to WebVTT and track, MDN Web Docs - WebVTT.
Parent feature: Video element.

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.
"Some key events, or their values, might be suppressed by the IME in use". On mobile (virtual keyboard), all keys are reported as 229.

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: MDN Web Docs - which.

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 Web Docs - Element matches, WebPlatform Docs.

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, has.js test, Polyfill.

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 Web Docs - CSS writing-mode, Chrome Platform Status.

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.
#3: Partial support in IE10/IE11 refers to calc not working properly with various use cases mentioned in known issues.

Resources: Mozilla Hacks article, MDN Web Docs - calc, WebPlatform Docs.

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

The timestamp is not actually high-resolution. To mitigate security threats such as Spectre, browsers currently round the result to varying degrees.

Browser-specific notes:
#1: In Firefox 55-57, the privacy.resistFingerprinting preference can be enabled to change the precision to 100ms.
#2: In Firefox, the privacy.resistFingerprinting preference can be enabled to change the precision to 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.
#3: In Firefox 58-59, the privacy.reduceTimerPrecision preference is enabled by default and defaults to 20us.
#4: In Firefox, the privacy.reduceTimerPrecision preference is enabled by default and defaults to 2ms.

Resources: MDN Web Docs - Performance.now, HTML5Rocks article, SitePoint article, Demo.

Mitigate cross-site scripting attacks by only allowing certain 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, MDN Web Docs - Content Security Policy.

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

Resources: MDN Web Docs - iframe, Srcdoc Polyfill, Article.

A promise represents the eventual result of an asynchronous operation.

Resources: Promises/A+ spec, JavaScript Promises: There and back again - HTML5 Rocks, A polyfill for ES6-style Promises, Polyfill for this feature is available in the core-js library.

Links with rel="noreferrer" set do not send the request's "referrer" header. This prevents the destination site from seeing what URL the user came from.

Browser-specific notes:
#1: Only supported in IE11 in later versions of Windows 10 (creators update).

Resources: Blog post on rel="noreferrer".

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.

Browser-specific notes:
#1: Support in IE11 is based on an older version of the specification.
#2: Support in Safari before version 11 was using the crypto.webkitSubtle prefix.
#3: In Edge 12-18, Web Crypto was not supported in Web Workers and Service Workers.

Resources: The History and Status of Web Crypto API, Microsoft Research JavaScript Cryptography Library, Cross-browser cryptography library, 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, MDN Web Docs - Web Crypto API.

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: https://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 accessibility support, WebPlatform Docs, MDN Web Docs - font-feature-settings, OpenType layout feature tag registry, Syntax for OpenType features in CSS (Adobe Typekit Help).

Length units representing a percentage of the current viewport dimensions: 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.

Attribute for associating input and submit buttons with a form.

Resources: Input attribute specification, Article on usage.

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. Edge does not support IndexedDB inside blob web workers. See issue.
#2: Partial support in Safari 7.1 – 9.3 refers to seriously buggy behavior as well as a lack of support in WebViews.
#3: Partial support refers to a bug in Safari 14.1.1 that causes indexedDB to not load when the browser is initially opened.

Resources: Mozilla Hacks article, Polyfill for browsers supporting WebSQL, has.js test, WebPlatform Docs.

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 Web Docs - CSS unicode-range, Safari CSS Reference: unicode-range, Web Platform Docs: unicode-range, Demo.

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 Web Docs - background-repeat, CSS-Tricks article on background-repeat.

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.
#4: Some versions of Safari display smaller font-size than intended when using rem units with system fonts. (See: https://colloq.io/blog/safaris-detailssummary-rem-font-size-issue).

Resources: jQuery fallback script, Fallback script, HTML5 Doctor article, has.js test, WebPlatform Docs, Bug on Firefox support, Details Element Polyfill.

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 Web Docs - Using Files, WebPlatform Docs, Polyfill.

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

Resources: MDN Web Docs - getModifierState, WebKit feature request bug.

The non-scaling-stroke value for the vector-effect SVG attribute/CSS property makes strokes appear as the same width regardless of any transformations applied.

Other values for the vector-effect attribute/property are currently at risk of being removed from the specification as they are not being developed by browser vendors.

Resources: MDN Docs article on vector-effect, Firefox implementation bug for other values, Chromium implementation bug for other values.

Method of indicating the current level of a gauge.

Resources: MDN Web Docs - Element meter, HTML5 Doctor on meter element, Dev.Opera article, Examples of progress and meter elements, The HTML `<meter>` element and its (undefined) segment boundaries.

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 Web Docs - CSS Image rendering, HTML5Rocks article, Firefox bug #856337: Implement image-rendering: pixelated, Chrome bug #317991: Implement image-rendering:crisp-edges.

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

The new color added in CSS Color Module Level 4.

Browser-specific notes:
#1: Only works in IE11 for Windows 10, not older versions of Windows.

Resources: Codepen blog post.

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.
#5: Not supported in for-in and for-of loops.

Resources: Variables and Constants in ES6, MDN Web Docs - const.

:read-only and :read-write pseudo-classes to match elements which are considered user-alterable.

Browser-specific notes:
#1: Supports selector only for input and textarea fields, but not for contenteditable.

Resources: CSS Tricks article, MDN :read-only, MDN Web Docs - CSS :read-write, Selectors Level 4 § The Mutability Pseudo-classes: :read-only and :read-write, Firefox feature request bug.

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

Resources: MDN Web Docs - ChildNode.remove.

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

Resources: MDN Web Docs - Internationalization, The ECMAScript Internationalization API, Working With Intl, WebKit tracking bug, Firefox for Android tracking bug.

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

Resources: Blog post.
Parent feature: Canvas (basic support).

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: WebPlatform Docs, MDN Web Docs - Border image.

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

For newer Resource Timing APIs search for specific methods or see the sub-features under PerformanceResourceTiming API.

Browser-specific notes:
#1: Can be enabled in Firefox using the dom.enable_resource_timing flag.
#2: Partial support in Safari refers to being limited to OSX 10.12+.

Resources: Demo, Blog post, SitePoint article.

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

Resources: Polyfill (IE 6-10 only).

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, Polyfill to enable Web Audio API through Firefox Audio Data api or flash, MDN Web Docs - Web Audio API.

Method of applying filter effects using the filter property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.

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, HTML5Rocks article, Filter editor, Filter Playground.

API for better control over form field validation. Includes support for checkValidity(), setCustomValidity(), reportValidity() and validation states.

Browser-specific notes:
#1: Does not support reportValidity.
#2: Does not support validity.tooShort. See also support for minlength..
#3: Does not support validity.badInput.

Resources: MDN article on constraint validation, `reportValidity()` ponyfill.

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`, MDN Web Docs - CSS :indeterminate, 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.

The :any-link CSS pseudo-class matches all elements that match :link or :visited.

Resources: MDN Web Docs - CSS :any-link.

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 Web Docs - CSS font-kerning.

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.

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 Web Docs - URL interface, MDN Web Docs - URL constructor, Polyfill for this feature is available in the core-js library.

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

Browser-specific notes:
#1: Does not support Document.importNode on templates, nested templates or elements that contain templates.
#2: Does not support Node.cloneNode on templates, nested templates or elements that contain templates.
#3: Safari 6.2 has the same partial support as Safari 7.1.

Resources: web.dev - HTML's New template Tag, Polyfill script, Template element on MDN.

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 Web Docs - CSS @supports, @supports in Firefox, Test case, WebPlatform Docs.

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, Polyfill for those features is available in the core-js library.
Parent feature: ECMAScript 2015 (ES6).

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

HTTP/2 is only supported over TLS (HTTPS). See also the precursor of HTTP/2, the SPDY protocol, which has been deprecated and removed from most browsers, in favor of HTTP/2.

Browser-specific notes:
#1: Partial support in Internet Explorer refers to being limited to Windows 10.
#2: Partial support in Safari refers to being limited to OS X 10.11 El Capitan and newer.
#3: Only supports HTTP/2 if the server supports protocol negotiation via ALPN.

Resources: Wikipedia article about HTTP/2, Browser support test.

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.
#2: Partial support in Edge refers to object-fit only supporting <img> (see this comment).

Resources: Dev.Opera article, WebPlatform Docs, object-fit-images Polyfill for IE & Edge, MDN (object-fit), MDN (object-position).

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.

A shorthand property for resetting all CSS properties except for direction and unicode-bidi.

Resources: MDN Web Docs - CSS all, Resetting styles using `all: unset`, WebKit bug 116966: [css3-cascade] Add support for `all` shorthand property.

ES6 Generators are special functions that can be used to control the iteration behavior of a loop. Generators are defined using a function* declaration.

Resources: Exploring JS chapter on generators, MDN article on the `function*` declaration.
Parent feature: ECMAScript 2015 (ES6).

The EncryptedMediaExtenstions API provides interfaces for controlling the playback of content which is subject to a DRM scheme.

Browser-specific notes:
#1: Only supports the older event-based specification.

Resources: HTML5rocks article, Wikipedia article, Encrypted Media Extensions API on MDN.

A CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited.

Resources: MDN Web Docs - CSS unset, Resetting styles using `all: unset`, WebKit bug 148614: Add support for the `unset` CSS property value.

Template literals are string literals allowing embedded expressions using backtick characters (`). You can use multi-line strings and string interpolation features with them. Formerly known as template strings.

Browser-specific notes:
#1: Safari 12 sometimes garbage collects the cached TemplateStrings used by Tagged Template Literals.

Resources: MDN Web Docs - Template literals, ES6 Template Literals in Depth.
Parent feature: ECMAScript 2015 (ES6).

Updated functionality to the original XHR specification including things like file uploads, transfer progress information and the ability to send FormData. Previously known as XMLHttpRequest Level 2, these features now appear simply in the XMLHttpRequest spec.

See also support for the FormData API and its sub-features, which received more updates since the original XHR Level 2 specification was released.

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.
#4: Partial support refers to missing some newer FormData functionality (search for specific APIs for details).

Resources: MDN Web Docs - FormData, Polyfill for FormData object, WebPlatform Docs.

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: MDN Web Docs - TextEncoder, WebKit Bug 160653 - Support TextEncoder & TextDecoder APIs.

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, MDN Web Docs - will-change.

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: MDN Web Docs - closest, Polyfill.

Date method to generate a language sensitive representation of a given date, formatted based on a specified locale and options.

Browser-specific notes:
#1: Does not support the locale or options parameters.
#2: Does not support all locales correctly.
#3: Does not support the timeZone option.

Resources: MDN article on Date​.prototype​.toLocale​Date​String().

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 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: CSS-Tricks article with all prefixes, CSSWG discussion, MDN Web Docs - CSS ::-moz-placeholder, Mozilla Bug 1069012 - unprefix :placeholder-shown pseudo-class and ::placeholder pseudo-element, MDN web docs - ::placeholder.

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

The legacy Edge browser 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: Edge does not support RTCDataChannel. See API Catalogue.

Resources: WebRTC Project site, Plug-in for support in IE & Safari, Introducing WebRTC 1.0 and interoperable real-time communications in Microsoft Edge.

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.

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 Web Docs - Beacon.

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`, MDN Web Docs - CSS :default, WebKit bug 156230 - `:default` CSS pseudo-class should match checkboxes+radios with a `checked` attribute, JS Bin testcase.

Mitigate cross-site scripting attacks by only allowing certain 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 child-src, frame-ancestors, base-uri, and form-action directives.
#2: Firefox 35 is missing the child-src, frame-ancestors, and form-action directives.
#3: Firefox 36-44 is missing the child-src directives.
#4: Chrome 36-38 & Opera 23-25 are missing the child-src, frame-ancestors, base-uri, and form-action directives.
#5: Chrome 39 and Opera 26 are missing the child-src, base-uri, and form-action directives.
#6: Edge has broken nonce support as it ignores nonces on sourced scripts.

Resources: HTML5Rocks article, MDN Web Docs - Content Security Policy.

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.
#2: Partial support refers to lack of external fragments support.

Resources: Blog post, WebKit support bug.

The includes() method determines whether one string may be found within another string, returning true or false as appropriate.

Resources: MDN: String.prototype.includes(), Polyfill for this feature is available in the core-js library.
Parent feature: ECMAScript 2015 (ES6).

Allows geometric shapes to be set in CSS to define an area for text to flow around. Includes properties shape-outside, shape-margin and shape-image-threshold.

Browser-specific notes:
#1: Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
#2: Partially supported in Firefox by enabling "layout.css.shape-outside.enabled" in about:config.

Resources: A List Apart article, Firefox tracking bug.

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, IE11 polyfill, Download attribute on MDN.

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.

Support for the ECMAScript 2015 specification. Features include Promises, Modules, Classes, Template Literals, Arrow Functions, Let and Const, Default Parameters, Generators, Destructuring Assignment, Rest & Spread, Map/Set & WeakMap/WeakSet and many more.

As ES6 refers to a huge specification and browsers have various levels of support, "Supported" means at least 95% of the spec is supported. "Partial support" refers to at least 10% of the spec being supported. For full details see the Kangax ES6 support table.

Browser-specific notes:
#1: Notable partial support in IE11 includes (at least some) support for const, let, block-level function declaration, typed arrays, Map, Set and WeakMap.
#2: Does not support tail call optimization.
#3: Only has partial Symbol support and partial support for RegExp.prototype properties.

Resources: ES6 New features: overview and comparisons, Exploring ES6 (book), Polyfill for all possible ES2015 features is available in the core-js library.

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.

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. See bug 1161625.

Resources: Polyfill, Demo, Polyfill (minimal, 500 bytes).

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 Web Docs - font-stretch, CSS Tricks article.

Method of customizing the width of the tab character. Only effective using 'white-space: pre', 'white-space: pre-wrap', and 'white-space: break-spaces'.

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

Resources: MDN Web Docs - CSS tab-size, Firefox bug to unprefix `-moz-tab-size`.

Form field allowing the user to select a color.

Browser-specific notes:
#1: Supported through WKWebView and Safari but not through UIWebView.

Resources: Polyfill, WebPlatform Docs, MDN web docs.

Returns the number of logical cores of the user's CPU. The value may be reduced to prevent device fingerprinting or because it exceeds the allowed number of simultaneous web workers.

Browser-specific notes:
#1: WebKit browsers clamp the maximum value returned to 2 on iOS devices and 8 on all others. Disabled in Safari behind the ENABLE_NAVIGATOR_HWCONCURRENCY build option.

Resources: MDN Web Docs - navigator.hardwareConcurrency, Original Proposal, WebKit implementation bug.

A policy that controls how much information is shared through the HTTP Referer header. Helps to protect user privacy.

Browser-specific notes:
#1: Browsers initially supported an early draft of the specification which can only use a meta tag and is only compatible with the origin value from the new spec.
#2: Chrome 21-60 did not support the same-origin, strict-origin and strict-origin-when-cross-origin values. (issue 627968).
#3: Older browsers defaulted to no-referrer-when-downgrade which is unsafe. The default has been updated to strict-origin-when-cross-origin which is safe for most use cases. See the revised spec..
#4: Safari's ITP (on by default) downgrades _all_ cross-site subresource request (not page navigation) Referer headers to the page's origin, ignoring the unsafe-url, no-referrer-when-downgrade, and origin-when-cross-origin referrer policies.
#5: Firefox 92+ ignores the unsafe-url, no-referrer-when-downgrade, and origin-when-cross-origin referrer policies, defaulting to strict-origin-when-cross-origin.

Resources: Mozilla security article, A new security header: Referrer Policy.

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 Web Docs - CSS :out-of-range, WHATWG HTML specification for `:in-range` and `:out-of-range`.

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

Resources: MDN article, Polyfill for this feature is available in the core-js library.

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, Chrome support bug.
Parent feature: CSS3 Media Queries.

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.

The find() method returns the value of the first item in the array based on the result of the provided testing function.

Resources: MDN article, Polyfill for this feature is available in the core-js library.

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.
#4: let bindings in for loops are incorrectly treated as function-scoped instead of block scoped.
#5: let variables are not bound separately to each iteration of for loops.

Resources: Variables and Constants in ES6, MDN Web Docs - let.
Parent feature: ECMAScript 2015 (ES6).

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 Web Docs - Upgrade Insecure Requests, Demo Website, WebKit feature request bug.

document.scrollingElement refers to the element that scrolls the document.

Resources: Polyfill, MDN on scrollingElement.

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 Element 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.
#4: Not supported in Chromium browsers on Android 6 or older.

Resources: HTML5 Doctor article, Shopping cart demo, WebPlatform Docs, Polyfill for setDragImage in IE, iOS/Android shim for HTML 5 drag'n'drop.

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, Firefox tracking bug, WebKit feature request bug.
Parent feature: Form validation.

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.
#2: Supports the older spec's navigator.getUserMedia API, not the newer navigator.mediaDevices.getUserMedia one.
#3: Before iOS 14.3 getUserMedia returned no video input devices in UIWebView or WKWebView, but only directly in Safari.
#4: Does not work in standalone running ("installed") PWAs.

Resources: Technology preview from Opera, WebPlatform Docs, Media Capture functionality in Microsoft Edge, getUserMedia in PWA with manifest on iOS 11, getUserMedia working again in PWA on iOS 13.4.

The CSS.supports() static method 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).
#2: Does not support parentheses-less one-argument version.

Resources: MDN Web Docs - CSS supports(), Demo (Chinese), Native CSS Feature Detection via the @supports Rule, CSS @supports, Article (Chinese).

Method of scaling content while also affecting layout.

Originally implemented only in Internet Explorer.  Note that transform: scale() does not work the same as zoom. If e.g. transform: scale(0.6) is used on the html or body element then it resizes the entire page, showing a minified page with huge white margins around it, whereas zoom: 0.6 scales the *elements* on the page, but not the page itself on which the elements are drawn.

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, Safari Developer Library, Article explaining usage of zoom as the hack for fixing rendering bugs in IE6 and IE7., MDN Web Docs - CSS zoom.

The Object.values() method returns an array of a given object's own enumerable property values.

Resources: Object.values() on MDN Web Docs, Polyfill, Polyfill for this feature is available in the core-js library.

Function shorthand using => syntax and lexical this binding.

Resources: ECMAScript 6 features: Arrows, MDN Web Docs - Arrow functions.
Parent feature: ECMAScript 2015 (ES6).

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.

Browser-specific notes:
#1: Partial support in Firefox refers to using the non-standard :-moz-placeholder name rather than :placeholder-shown.
#2: Partial support in IE refers to using the non-standard :-ms-input-placeholder name rather than :placeholder-shown.

Resources: WebKit commit, Firefox bug.

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.
Parent feature: ECMAScript 2015 (ES6).

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.

"Some key events, or their values, might be suppressed by the IME in use". On mobile (virtual keyboard), for every key Blink and WebKit based browsers report "Unidentified", Gecko reports "Process".

Browser-specific notes:
#1: Partial support refers to these versions of Firefox returning "MozPrintableKey" for all character keys.
#2: Has non-standard key identifiers and incorrect behaviour with AltGraph.

Resources: MDN Web Docs - key, Chrome tracking bug, WebKit feature request bug, Spec listing all key string values, Edge bug report, shim-keyboard-event-key: shim for non-standard key identifiers for IE & Edge.

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 Web Docs - ES6 classes, Sitepoint deep dive on ES6 classes, List of resources critical of ES6 classes.
Parent feature: ECMAScript 2015 (ES6).

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, Chromium issue (fixed).

The Proxy object allows custom behavior to be defined for fundamental operations. Useful for logging, profiling, object visualization, etc.

Resources: ECMAScript 6 Proxies, MDN Web Docs - Proxy, Experimenting with ECMAScript 6 proxies, Meta programming with ECMAScript 6 proxies, Polyfill for Proxies.
Parent feature: ECMAScript 2015 (ES6).

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.
#2: Partial support in Safari and Older Firefox versions refers to not using premultiplied colors which results in unexpected behavior when using the transparent keyword as advised by the spec.
#3: Implements an earlier prefixed syntax as -webkit-gradient.

Resources: Cross-browser editor, Tool to emulate support in IE, WebPlatform Docs.

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.
#2: Partial support is due to bugs present (see known issues).

Resources: Mozilla hacks article (older syntax), MDN Web Docs - Using CSS variables, Edge Dev Blog post, Polyfill for IE11.

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all grid-* properties and the fr unit.

See also support for subgrids.

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: There are some bugs with overflow (1356820, 1348857, 1350925).

Resources: Polyfill based on old spec, Polyfill based on new spec, WebKit Blog post, Css Grid By Example: Everything you need to learn CSS Grid Layout, Mozilla: Introduction to CSS Grid Layout.

Allows path objects to be declared on 2D canvas surfaces.

Browser-specific notes:
#1: Does not support the addPath() method.

Resources: MDN article.
Parent feature: Canvas (basic support).

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 to 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.
#4: Can be enabled under the Experimental Features menu.
#5: element.releasePointerCapture(pointerID) is only partially implemented. Calling it after pointerdown does not result in boundary events (pointerover pointerleave) being dispatched during pointer movements.
#6: Value of pointerevent.buttons is incorrect on pointermove events generated by touches. Is 0 but should be 1.

Resources: Abstraction library for pointer events, PEP: Pointer Events Polyfill, Pointer Event API on MDN, Bugzilla@Mozilla: Bug 822898 - Implement pointer events.

Determines whether or not an array includes the given value, returning a boolean value (unlike indexOf).

Resources: MDN Web Docs, Polyfill for this feature is available in the core-js library.

Method of easily manipulating rel attribute values on elements, using the DOMTokenList object (similar to classList).

Browser-specific notes:
#1: Support for relList on link but not anchor elements.

Resources: MDN Web Docs - DOMTokenList, domtokenlist polyfill.

Subresource Integrity enables browsers to verify that file is delivered without unexpected manipulation.

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

Resources: Subresource Integrity (MDN), SRI generation and browser support test, WebKit feature request bug.

CSS property that provides different ways of displaying numbers, fractions, and ordinal markers.

Resources: MDN Web Docs article.

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 Web Docs - URLSearchParams, Polyfill for this feature is available in the core-js library, EdgeHTML implementation bug.

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: MDN Web Docs - CSS case-insensitive, JS Bin testcase.

The CSS text-orientation property specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the writing-mode property).

Browser-specific notes:
#1: Can be enabled on firefox via the 'layout.css.vertical-text.enabled' flag in about:config.

Resources: CSS text-orientation on MDN.

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.

Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

Browser-specific notes:
#1: Partial support refers to not supporting lossless, alpha and animated WebP images.
#2: Partial support refers to not supporting animated WebP images.
#3: Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

Resources: Official website, Official website FAQ - Which web browsers natively support WebP?, Bitsofcode - Why and how to use WebP images today, WebP decoder and encoder.

Ensure new browsing contexts are opened without a useful window.opener.

Resources: Explainer, Gecko/Firefox issue, WebKit/Safari issue.

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.
#3: Support starting with macOS 10.13 High Sierra.

Resources: Introducing Brotli, Blink's intent to ship, Official code repository, WebKit Bug 154859: Add support for format brotli for HTTP compression.

Popular lossless audio compression format.

Support refers to this format's use in the audio element, not other conditions.

Browser-specific notes:
#1: HTMLMediaElement.canPlayType('audio/flac') returns an empty string.
#2: Only works on ChromeOS.
#3: Supported only on macOS High Sierra or later.

Resources: Wikipedia, Chrome support bug.
Parent feature: Audio element.

Improvements to Indexed DB, including getAll(), renaming stores and indexes, and binary keys.

Browser-specific notes:
#1: Missing: IDBKeyRange includes(), renaming stores/indexes, binary keys, IDBObjectStore getKey(), IDBCursor continuePrimaryKey().
#2: Missing: Renaming stores/indexes, binary keys, IDBObjectStore getKey(), IDBCursor continuePrimaryKey().

Resources: Mozilla Hacks: What's new in IndexedDB 2.0?, MDN Web Docs - IndexedDB API.

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, DOM4 polyfill.

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.

The padStart() and padEnd() methods pad the current string with a given string (eventually repeated) so that the resulting string reaches a given length. The pad is applied from the start (left) of the current string for padStart(), and applied from the end (right) of the current string for padEnd().

Resources: MDN Web Docs - padStart(), MDN Web Docs - padEnd(), Polyfill for this feature is available in the core-js library.

The unhandledrejection event is fired when a Promise is rejected but there is no rejection handler to deal with the rejection. The rejectionhandled event is fired when a Promise is rejected, and after the rejection is handled by the promise's rejection handling code.

Resources: MDN article on rejectionhandled, MDN article on unhandledrejection, Chrome sample code, Polyfill for this feature is available in the core-js library.

The Object.entries() method creates a multi-dimensional array of key value pairs from the given object.

Resources: MDN article, ES2017 spec-compliant shim for Object.entries, Polyfill for this feature is available in the core-js library.

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, WebAssembly on MDN, Roadmap and detailed feature support table.

Async functions make it possible to 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 arrow functions are unsupported.

Resources: MDN Web Docs - Async functions, Async functions - making promises friendly.

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.

Browser-specific notes:
#1: Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
#2: Enabled through the dom.webcomponents.enabled preference in about:config.
#3: Enabled through the dom.webcomponents.shadowdom.enabled preference in about:config.

Resources: Safari implementation bug, Firefox implementation bug, Google Developers - Shadow DOM v1: self-contained web components.

The "space-evenly" value for the justify-content property distributes the space between items evenly. It is similar to space-around but provides equal instead of half-sized space on the edges. Can be used in both CSS flexbox & grid.

Browser-specific notes:
#1: Supported in CSS Grid, but not Flexbox.

Resources: MDN on justify-content property, Edge support bug.

The CSS Color Module Level 4 defines new 4 & 8 character hex notation for color to include the opacity level.

Only supported in Android WebViews in apps that target Android Pie, due to this issue.

Browser-specific notes:
#1: Can be enabled via the "Experimental web platform features" flag.

Resources: JS Bin testcase.

The :focus-within pseudo-class matches elements that either themselves match :focus or that have descendants which match :focus.

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform Features" flag.

Resources: The Future Generation of CSS Selectors: Level 4: Generalized Input Focus Pseudo-class, ally.style.focusWithin Polyfill, part of ally.js, WebKit bug #140144: Add support for CSS4 `:focus-within` pseudo, Chromium issue #617371: Implement `:focus-within` pseudo-class from Selectors Level 4, Mozilla bug #1176997: Add support for pseudo class `:focus-within`, MDN Web Docs - :focus-within, JS Bin testcase.

Value for font-family that represents the default user interface font.

Browser-specific notes:
#1: Supported as the -apple-system value (only on macOS and iOS).
#2: Supported as the BlinkMacSystemFont value (only on macOS).

Resources: Firefox support bug, MDN on the font-family property.

The caret-color property allows the color to be set of the caret (blinking text insertion pointer) in an editable text area.

Resources: WebKit support bug, MDN article.

@font-face descriptor 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 layout.css.font-display.enabled flag.

Resources: Google Developers article, MDN Web Docs - font-display, CSS tricks article.

Same-site cookies ("First-Party-Only" or "First-Party") allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain.

This feature is backwards compatible. Browsers not supporting this feature will simply use the cookie as a regular cookie. There is no need to deliver different cookies to clients.

Browser-specific notes:
#1: Not shipped with the initial release but later with the 2018 June security update (Patch Tuesday) to Windows 10 RS3 (2017 Fall Creators Update) and newer. More info.
#2: Partial support because only supported in IE 11 on Windows 10 RS3 (2017 Fall Creators Update) and newer, but not in IE 11 on other Windows versions (Windows 7, ...).
#3: Cookies without SameSite are treated as Lax by default, SameSite=None cookies without Secure are rejected.
#4: Partial due to the lack of support in macOS before 10.14 Mojave.
#5: Partial due to the bug that treats SameSite=None and invalid values as Strict in macOS before 10.15 Catalina and in iOS before 13.

Resources: Preventing CSRF with the same-site cookie attribute, Mozilla Bug #795346: Add SameSite support for cookies, Mozilla Bug #1286861, includes the patches that landed SameSite support in Firefox, Microsoft Edge Browser Status, MS Edge dev blog: "Previewing support for same-site cookies in Microsoft Edge", Mozilla Bug #1551798: Prototype SameSite=Lax by default, Same-site cookies demonstration by Rowan Merewood.

Loading JavaScript module scripts (aka ES6 modules) using <script type="module"> Includes support for the nomodule attribute.

Browser-specific notes:
#1: Support can be enabled via about:flags.
#2: Support can be enabled via about:config.
#3: Does not support the nomodule attribute.
#4: A polyfill is available for Safari 10.1/iOS Safari 10.3.
#5: nomodule scripts are not executed, but they're still fetched.

Resources: Intro to ES6 modules, MS Edge blog post, Mozilla hacks article, Firefox support bug, Blog post: Native ECMAScript modules - the first overview, Counterpart ECMAScript specification for import/export syntax, Specification for nomodule attribute, Blog post on using nomodule, Will it double-fetch? Browser behavior with `module` / `nomodule` scripts.

Using <link rel="preload">, browsers can be informed to prefetch resources without having to execute them, allowing fine-grained control over when and how resources are loaded. Only the following as values are supported: fetch, image, font, script, style, track.

Browser-specific notes:
#1: Only cachable resources can be preloaded.
#2: Can be enabled via the "Experimental Features" developer menu.
#3: Disabled by default behind the network.preload flag.
#4: Partial support in Edge 17+ refers to support for only the HTML <link rel> format, not the HTTP header format.

Resources: Preload: What Is It Good For?, MDN Web Docs - Preloading content with rel="preload", Firefox meta support bug.

When the promise is settled, whether fulfilled or rejected, the specified callback function is executed.

Resources: MDN Web Docs, Polyfill for this feature is available in the core-js library.

Methods to change the scroll position of an element. Similar to setting scrollTop & scrollLeft properties, but also allows options to be passed to define the scroll behavior.

See also the support for the scrollIntoView method.

Browser-specific notes:
#1: Does not support the smooth behavior option.

Resources: MDN article on scrollTo, MDN article on scrollBy.

Loading JavaScript modules dynamically using the import() syntax.

Browser-specific notes:
#1: Support can be enabled via javascript.options.dynamicImport flag. See bug 1517546.

Resources: Counterpart ECMAScript specification for import() syntax, Blog post: Native ECMAScript modules - dynamic import(), Dynamic import(), Firefox implementation bug, Integration with the HTML specification.
Parent feature: JavaScript modules via script tag.

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 Web Docs - scrollIntoView, smooth scroll polyfill : polyfill for smooth behavior option.

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: isIntersecting property of IntersectionObserverEntry was not implemented, returning undefined.
#3: IntersectionObserver does not trigger its callback in a Chrome background tab.

Resources: MDN Web Docs - Intersection Observer, Polyfill, Google Developers article.

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. It provides a better solution to the most use cases of the "clearfix" hack.

Resources: Mozilla bug report, Chromium bug report, WebKit bug report, Blog post: "The end of the clearfix hack?".

Logical properties and values provide control of layout through logical, rather than physical, direction and dimension mappings. These properties are writing-mode relative equivalents of their corresponding physical properties.

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.
#3: Does not support the margin-block, margin-inline, padding-block, padding-inline, or any of the inset shorthand properties. Supported in newer Chromium browsers behind the #enable-experimental-web-platform-features flag.
#4: Does not support the border-start-start-radius, border-start-end-radius, border-end-start-radius and border-end-end-radius property.
#5: Does not support the margin-block, margin-inline, padding-block, padding-inline shorthand properties when value is a CSS property. Supported when using a length value.

Resources: MDN Web Docs - CSS -moz-margin-start, MDN Web Docs - CSS -moz-padding-start, MDN - Basic concepts of Logical Properties and Values.

OpenType font settings that allows a single font file to behave like multiple fonts: it can contain all the allowed variations in width, weight, slant, optical size, or any other exposed axes of variation as defined by the font designer. Variations can be applied via the font-variation-settings property.

Browser-specific notes:
#1: Works with Experimental Web Platform features enabled.
#2: Requires macOS 10.12 Sierra or later and the following about:config flags to be enabled:.
layout.css.font-variations.enabled,.
gfx.downloadable_fonts.keep_variation_tables.
#3: Requires macOS 10.13 High Sierra or later or Windows 10 1709 "Fall Creators Update" or later.
#4: Does not support the font-weight and font-stretch properties.
#5: Does not support format('truetype-variations'), format('woff-variations'), format('woff2-variations').
#6: Does not support OpenType-CFF2 fonts.
#7: OpenType-CFF2 support requires macOS 10.15 Catalina or later.

Resources: MDN Web docs article, How to use variable fonts in the real world, v-fonts.com - A simple resource for finding and trying variable fonts, Axis-Praxis - Tool & info on variable fonts, Getting started with Variable Fonts on the Frontend (2022).

CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap positions.

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.
#7: Available behind the "Experimental Web Platform features" feature flag.

Resources: Blog post, MDN Web Docs - CSS Scroll snap points, Polyfill - based on an [older version](https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/) of the spec, Polyfill - based on the [current version](https://www.w3.org/TR/css-scroll-snap-1/) of the spec, MDN Web Docs - CSS Scroll Snap, A CSS Snap Points based carousel (and lightweight polyfill) .

API for plural sensitive formatting and plural language rules.

Browser-specific notes:
#1: Intl.PluralRules exists, but methods are not implemented.

Resources: MDN Web Docs: Intl.PluralRules, Google Developers blog: The Intl.PluralRules API.
Parent feature: Internationalization API.

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 in the "Experimental Features" developer menu.
#5: Enabled by default for Nightly and Dev Edition.

Resources: Firefox blog post, Getting a WebGL Implementation.
Parent feature: Canvas (basic support).

Gives a hint to the browser to begin the connection handshake (DNS, TCP, TLS) in the background to improve performance. This is indicated using <link rel="preconnect" href="https://example-domain.com/">.

Browser-specific notes:
#1: Firefox 39 did not support 'crossorigin' attribute and preconnects were not processed by the preload parser. Both of these features were enabled in Firefox 41.
#2: Partial support in Edge 15+ refers to support for only the HTTP header format, not the <link rel> format.
#3: Firefox support regressed from versions 71 - 114. See bug 1543990 for details.

Resources: Eliminating Roundtrips with Preconnect.

Method for observing and reacting to changes to sizes of DOM elements.

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform Features" flag.

Resources: Google Developers Article, Explainer Doc, Polyfill based on initial specification, Firefox implementation bug, WebKit implementation bug, Polyfill based on latest specification which includes support for observer options.

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.

sticks to its nearest ancestor that has a scrolling mechanism (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

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.
#3: Not supported on any table parts - See Firefox bug.
#4: Supported on th elements, but not thead or tr - See Chrome bug.
#5: Do not appear to support sticky table headers.
#6: Supported on th elements, but not thead or tr - See Edge bug.

Resources: HTML5Rocks, MDN Web Docs - CSS position, WebPlatform Docs, Polyfill, Another polyfill, geddski article: Examples and Gotchas.

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.
#4: Does not support x unit (alias for dppx unit), e.g: @media (min-resolution: 2x) { }.

Resources: How to unprefix -webkit-device-pixel-ratio, WebKit Bug 78087: Implement the 'resolution' media query, WHATWG Compatibility Standard: -webkit-device-pixel-ratio, MDN Web Docs - CSS @media resolution, CSS Values and Units Module Level 4 add the `x` unit as an alias for `dppx`., Chrome support 'x' as a resolution unit., Firefox support 'x' as a resolution unit..
Parent feature: CSS3 Media Queries.

Controller object that allows you to abort one or more DOM requests made with the Fetch API.

Browser-specific notes:
#1: Safari has window.AbortController defined in the DOM but it's just a stub, it does not abort requests at all. The same issue also affects Chrome on IOS and Firefox on IOS because they use the same WebKit rendering engine as Safari.

Resources: Abortable Fetch - Google Developers article, AbortController - MDN Web Docs, AbortSignal - MDN Web Docs.
Parent feature: Fetch.

Usage of environment variables like safe-area-inset-top.

Browser-specific notes:
#1: Supported as constant() instead of env().

Resources: JSFiddle test case, The env() CSS Function - MDN Web Docs, Designing Websites for iPhone X - WebKit Blog.

Lets you create animations that are run in the browser, 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?.
#4: Can be enabled via the "Experimental Features" developer menu.
#5: Does not support composite modes.

Resources: HTML5 Rocks, HTML5 Rocks, Current Firefox status, Polyfill.

Methods to flatten any sub-arrays found in an array by concatenating their elements.

Resources: MDN article on Array.prototype.flat, MDN article on Array.prototype.flatMap, Article on the history of the `flat` methods, Polyfill for flat & flatMap, Polyfill for this feature is available in the core-js library.

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., MDN Web Docs - text-emphasis, Chromium bug to unprefix `-webkit-text-emphasis`.

CSS media query based on a user preference for preferring reduced motion (animation, etc).

prefers-reduced-motion media query also depends on the OS as to whether it is supported.

Resources: WebKit blog post, CSS Tricks article.

An extension to WebAssembly import and export of mutable global variables.

Resources: Feature extension overview.
Parent feature: WebAssembly.

Version 1.3 (the latest one) of the Transport Layer Security (TLS) protocol. Removes weaker elliptic curves and hash functions.

Browser-specific notes:
#1: Supports a draft of the TLS 1.3 specification, not the final version.
#2: Can be enabled in Firefox by setting the security.tls.version.max pref to "4" in about:config.
#3: Can be enabled in Chrome and Opera via the #tls13-variant flag in chrome://flags or opera://flags.
#4: Partial support in Safari refers to being limited to macOS 10.14 Mojave and later.

Resources: Wikipedia article about TLS 1.3, Chrome support bug.

Originally a single property for controlling overflowing content in both horizontal & vertical directions, the overflow property is now a shorthand for overflow-x & overflow-y. The latest version of the specification also introduces the clip value that blocks programmatic scrolling.

Effectively all browsers support the CSS 2.1 definition for single-value overflow as well as overflow-x & overflow-y and values visible, hidden, scroll & auto.

Browser-specific notes:
#1: Does not support the two value overflow shorthand.
#2: Does not support the clip value.

Resources: CSS overflow on MDN, WebKit bug on support for two values syntax, Edge bug on support for two values syntax, WebKit bug on support for clip value.

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

Browser-specific notes:
#1: Can be enabled via the "Experimental Web Platform Features" flag.
#2: Does not support multi-position color stops.
#3: Can be enabled with the layout.css.conic-gradient.enabled flag.

Resources: Client-side polyfill, Server-side polyfill (PostCSS), Mozilla bug #1175958: Implement conic gradients from CSS Image Values Level 4, MDN Web Docs - conic-gradient().
Parent feature: CSS Gradients.

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.
#2: Has a bug where the browser is not maintaining the image’s aspect ratio when object-fit: cover and image-orientation: from-image are used together.

Resources: MDN Web Docs - CSS image-orientation, Blog post, Demo (Chinese), Chromium bug #158753: Support for the CSS image-orientation CSS property.

The :is() (formerly :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.

Browser-specific notes:
#1: Only supports the deprecated :-webkit-any() pseudo-class.
#2: Only supports the deprecated :-webkit-any() and :matches() pseudo-classes.
#3: Only supports the deprecated :-moz-any() pseudo-class.
#4: Support for :is() can be enabled with the Experimental Web Platform features flag.

Resources: WebKit blog post about adding `:matches()` and other Selectors Level 4 features, Chrome support bug for :is(), MDN Web Docs - CSS :is(), Codepen - Modern tests, JS Bin - Legacy tests.

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.

WebKit, Blink, and Gecko browsers also support additional vendor specific values.

Browser-specific notes:
#1: The appearance property is supported with the none value, but not auto.
#2: Microsoft Edge and IE Mobile support this property with the -webkit- prefix, rather than -ms- for interop reasons.
#3: -moz-appearance:none did not remove the dropdown arrow in the select tag.

Resources: CSS Tricks article, Safari implementation bug for unprefixed `appearance`.

Arbitrary-precision integers in JavaScript.

Browser-specific notes:
#1: Can be enabled by setting javascript.options.bigint to "True" in about:config.

Resources: GitHub repository, Blog article from Google Developer, Blog article from Dr. Axel Rauschmayer, MDN Web Docs, Firefox implementation bug.

Media query to detect if the user has set their system to use a light or dark color theme.

Support will also depend on whether or not the OS has support for a light/dark theme preference.

Resources: MDN article, Firefox implementation bug, Chromium implementation issue, Web.dev article.

More advanced mathematical expressions in addition to calc().

Browser-specific notes:
#1: Safari did not support clamp().

Resources: Test case on JSFiddle, Firefox support bug, Chrome support bug, MDN Web Docs article for min(), MDN Web Docs article for max(), MDN Web Docs article for clamp(), Getting Started With CSS Math Functions Level 4, Introduction to CSS Math Functions.

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 supported on Android & Mac platforms (and only the "auto" value) for now. See commit & related bug.
#2: Only supported on Android & Mac platforms.

Resources: MDN Web Docs - CSS hyphens, Blog post, WebPlatform Docs, Chromium bug for implementing hyphenation, WebKit bug to unprefix `-webkit-hyphens`.

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: MDN Web Docs - CSS revert, Firefox feature request bug, Chrome feature request issue.

An extension to WebAssembly adding sign-extension operator instructions.

Resources: Feature extension overview.
Parent feature: WebAssembly.

An extension to WebAssembly adding floating-point to integer conversion operators which saturate instead of trapping.

Resources: Feature extension overview.
Parent feature: WebAssembly.

The ::marker pseudo-element allows list item markers to be styled or have their content value customized.

Browser-specific notes:
#1: Safari support is limited to color and font-size. See bug 204163.

Resources: Chrome support bug, Firefox support bug, WebKit support bug, MDN Web Docs - CSS ::marker, CSS-Tricks article.

An extension to WebAssembly adding shared memory and atomic memory operations.

Threads support in browsers also includes passive data segments (from the bulk-memory extension).

Resources: Feature extension overview.
Parent feature: WebAssembly.

An extension to WebAssembly adding bulk memory operations and conditional segment initialization.

Passive data segments/conditional segment initialization was also included by browsers with the threads extension.

Resources: Feature extension overview.
Parent feature: WebAssembly.

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 Web Docs - CSS text-align-last, WebKit support bug.

Selectors Level 3 only allowed :not() pseudo-class to accept a single simple selector, which the element must not match any of. Thus, :not(a, .b, [c]) or :not(a.b[c]) did not work. Selectors Level 4 allows :not() to accept a list of selectors. Thus, :not(a):not(.b):not([c]) can instead be written as :not(a, .b, [c]) and :not(a.b[c]) works as intended.

Resources: MDN Web Docs - CSS :not, Chrome feature request issue, Firefox feature request bug.

An extension to WebAssembly allowing instructions, blocks and functions to produce multiple result values.

Resources: Feature extension overview.
Parent feature: WebAssembly.

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.
#3: Supported in Safari via the "CSSOM View Smooth Scrolling" Experimental Features flag.

Resources: MDN Web Docs - CSS scroll-behavior, Chrome launch bug , Blog post with demo, iOS / WebKit bug report.

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.
#4: Enabled by default in Firefox Nightly only.

Resources: Polyfill.

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

Support refers to this format's use in 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.

gap for flexbox containers to create gaps/gutters between flex items.

Resources: Spec discussion, Chrome bug to track implementation, MDN browser compatibility, Workaround using negative margins, Webkit support bug.
Parent feature: CSS Flexible Box Layout Module.