Web platform features explorer

📃 April 2017 release notes

Newly available

The following features are newly available:

  • Async functions: The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
  • Composition events: The compositionstart, compositionupdate, and compositionend events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.
  • Custom properties: Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.
  • display: table: The display: table CSS declaration renders an element with the box layout of a <table> HTML element. Child elements may use equivalents to <table> internal elements such as display: table-row for <tr>.
  • font-feature-settings: The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.
  • Outlines: The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.
  • String padStart() and padEnd(): The padStart() and padEnd() methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.
  • Text stroke and fill (compatibility prefixes): The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.
  • WEBGL_debug_renderer_info WebGL extension: The WEBGL_debug_renderer_info extension for WebGL 1.0 and 2.0 contexts exposes information about the graphics driver for debugging purposes.

New in Chrome

The following features are now available in Chrome:

  • color-gamut media query: The color-gamut media query sets styles based on the colors a device can display.
  • controlslist: The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen.
  • 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.
  • IndexedDB: The IndexedDB API is a local storage transactional object database.
  • Intersection observer: The IntersectionObserver API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
  • Long tasks: The longtask performance event type and the PerformanceLongTaskTiming API provides information about tasks that occupy the UI thread for 50 milliseconds or more, a metric for input latency, delayed animations, and other sources of "jank."
  • WebRTC statistics: The RTCPeerConnection.getStats(), RTCRtpSender.getStats(), and RTCRtpReceiver.getStats() methods return detailed information about the status, performance, network, and media for a given WebRTC connection.

New in Chrome Android

The following features are now available in Chrome Android:

  • color-gamut media query: The color-gamut media query sets styles based on the colors a device can display.
  • controlslist: The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen.
  • 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.
  • IndexedDB: The IndexedDB API is a local storage transactional object database.
  • Intersection observer: The IntersectionObserver API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
  • Long tasks: The longtask performance event type and the PerformanceLongTaskTiming API provides information about tasks that occupy the UI thread for 50 milliseconds or more, a metric for input latency, delayed animations, and other sources of "jank."
  • WebGL2: The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.
  • WebRTC statistics: The RTCPeerConnection.getStats(), RTCRtpSender.getStats(), and RTCRtpReceiver.getStats() methods return detailed information about the status, performance, network, and media for a given WebRTC connection.

New in Edge

The following features are now available in Edge:

  • Brotli compression: Brotli is a lossless data compression algorithm. When used as a content encoding, it often provides better compression than gzip.
  • Gamepad touch buttons: The touched property of a GamepadButton object indicates whether a button capable of detecting touch is currently touched.
  • hardwareConcurrency: The navigator.hardwareConcurrency property is the number of logical processors available to run threads on the user's computer.
  • isSecureContext: The isSecureContext global property is a boolean for whether the current browsing context is secure. This is primarily a check that the page has been served over an HTTPS URL.
  • Payment request: The PaymentRequest API prompts the user to make a payment through the browser's user interface.

New in Firefox

The following features are now available in Firefox:

  • caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
  • 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.
  • Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
  • Template literals: Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
  • WEBGL_compressed_texture_astc WebGL extension: The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().

New in Firefox for Android

The following features are now available in Firefox for Android:

  • caret-color: The caret-color CSS property sets the color of the text insertion pointer in a text input.
  • 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.
  • Masks: The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
  • Template literals: Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
  • WEBGL_compressed_texture_astc WebGL extension: The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().