Web platform features explorer

📃 September 2019 release notes

Newly available

The following features are newly available:

  • download: The download attribute for <a> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.
  • Intl.PluralRules: The Intl.PluralRules API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.
  • Print events: An alternative to @media print queries, the beforeprint and afterprint events allow you to change the page for printing and and restore the page after printing.
  • Sticky positioning: The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
  • touch-action: The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.

Widely available

The following features are now widely available:

  • Clipboard events: The "copy", "cut", and "paste" events fire on elements when the user starts an action with the clipboard.
  • column-fill: The column-fill CSS property sets the distribution of content across columns in a multi-column layout.
  • Exponentiation operator: The exponentiation (**) operator returns the result of raising the first operand to the power of the second operand.
  • Fetch: The fetch() method makes asynchronous HTTP requests.
  • Gamepad: The navigator.getGamepads() API accesses and responds to signals from game controllers.
  • <input type="range">: The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
  • Multi-column layout: Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.
  • Selection: The Selection API controls and modifies user text selections within the page.
  • srcset and sizes: The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.
  • writing-mode: The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.

New in Chrome

The following features are now available in Chrome:

  • Alt text for generated content: The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
  • Element timing: The element performance entry and the PerformanceElementTiming API measures the time to render elements that have the elementtiming attribute.
  • enterkeyhint: The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.
  • Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  • Largest contentful paint (LCP): The largest-contentful-paint performance entry and the LargestContentfulPaint API measures the time it takes for the largest image or text to appear. Largest contentful paint (LCP) is a common metric for perceived loading times.
  • Lazy-loading images and iframes: The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  • Serializable errors: The DOMException, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError objects are serializable. You can call structuredClone() on an error object or pass it to a worker using postMessage().
  • steps() easing: The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.

New in Chrome Android

The following features are now available in Chrome Android:

  • Alt text for generated content: The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
  • Element timing: The element performance entry and the PerformanceElementTiming API measures the time to render elements that have the elementtiming attribute.
  • enterkeyhint: The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.
  • Form-associated custom elements: Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  • Largest contentful paint (LCP): The largest-contentful-paint performance entry and the LargestContentfulPaint API measures the time it takes for the largest image or text to appear. Largest contentful paint (LCP) is a common metric for perceived loading times.
  • Lazy-loading images and iframes: The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  • Serializable errors: The DOMException, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError objects are serializable. You can call structuredClone() on an error object or pass it to a worker using postMessage().
  • steps() easing: The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.

New in Firefox

The following features are now available in Firefox:

  • contain: The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.
  • Layout containment: The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.
  • Paint containment: The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.
  • Size containment: The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.
  • Document colors: A document's bgColor, fgColor, alinkColor, linkColor, and vlinkColor properties get and set the background, foreground, active link, link, and visited link colors of that document.
  • document.write(): The document.open(), document.write(), document.writeln(), and document.close() methods write content to a document, possibly while that document is still loading.
  • execCommand(): The execCommand() method reads and writes from the clipboard and performs editing commands on editable text, such as changing the font name or style. Related methods check whether commands are supported, enabled, or applied.
  • line-break: The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.
  • queueMicrotask(): The queueMicrotask() method schedules a function to run after the currently running synchronous JavaScript finishes but before returning to the event loop.
  • Resize observer: The ResizeObserver API observes and reacts to changes in the size of DOM elements.
  • user-select: The user-select CSS property controls which elements can be selected by the user.

New in Safari

The following features are now available in Safari:

  • color-scheme: The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.
  • Credential management: The navigator.credentials API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores.
  • display: flow-root: The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.
  • line-break: The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.
  • Numeric separators: To improve readability for numeric literals, underscores (_) can be used as separators. For example, 1_050.95 is equivalent to 1050.95.
  • Pointer Events: Pointer events, such as pointerdown, and the PointerEvent API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the pointer-events CSS property.
  • Promise.allSettled(): The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).
  • Screen capture: The navigator.mediaDevices.getDisplayMedia() method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream.
  • String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.
  • Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
  • Web authentication: The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • clip-path: The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
  • color-scheme: The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.
  • Credential management: The navigator.credentials API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores.
  • display: flow-root: The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.
  • line-break: The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.
  • Numeric separators: To improve readability for numeric literals, underscores (_) can be used as separators. For example, 1_050.95 is equivalent to 1050.95.
  • Pointer Events: Pointer events, such as pointerdown, and the PointerEvent API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the pointer-events CSS property.
  • prefers-color-scheme media query: The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.
  • Promise.allSettled(): The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).
  • String matchAll(): The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.
  • Visual viewport API: The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
  • Web authentication: The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.