Web platform features explorer

📃 October 2020 release notes

Newly available

The following features are newly available:

Widely available

The following features are now widely available:

  • Beacons: The navigator.sendBeacon() method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.
  • EXT_blend_minmax WebGL extension: The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.
  • OES_vertex_array_object WebGL extension: The OES_vertex_array_object extension for WebGL 1.0 contexts adds vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and names for different sets of vertex data.
  • Service workers: The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.
  • Upgrade insecure requests: The Upgrade-Insecure-Requests HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.
  • WEBGL_lose_context WebGL extension: The WEBGL_lose_context extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a WebGLRenderingContext or WebGL2RenderingContext.

New in Chrome

The following features are now available in Chrome:

  • File system access: The showOpenFilePicker(), showDirectoryPicker(), and showSaveFilePicker() methods request access to files and directories on the user's device and returns a handle for reading and writing to them.
  • :focus-visible: The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
  • ::marker: The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.
  • preservesPitch: The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
  • Imperative slot assignment: The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
  • WEBGL_multi_draw WebGL extension: The WEBGL_multi_draw extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.
  • Augmented reality: The "immersive-ar" value for navigator.xr.requestSession() starts an augmented reality WebXR session that renders content aligned with the visible environment.

New in Chrome Android

The following features are now available in Chrome Android:

  • :focus-visible: The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
  • ::marker: The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.
  • preservesPitch: The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
  • Imperative slot assignment: The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
  • WEBGL_multi_draw WebGL extension: The WEBGL_multi_draw extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.
  • Augmented reality: The "immersive-ar" value for navigator.xr.requestSession() starts an augmented reality WebXR session that renders content aligned with the visible environment.

New in Edge

The following features are now available in Edge:

  • File system access: The showOpenFilePicker(), showDirectoryPicker(), and showSaveFilePicker() methods request access to files and directories on the user's device and returns a handle for reading and writing to them.
  • :focus-visible: The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
  • ::marker: The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.
  • preservesPitch: The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
  • Imperative slot assignment: The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
  • WEBGL_multi_draw WebGL extension: The WEBGL_multi_draw extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.
  • Augmented reality: The "immersive-ar" value for navigator.xr.requestSession() starts an augmented reality WebXR session that renders content aligned with the visible environment.

New in Firefox

The following features are now available in Firefox:

  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • :is(): The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.
  • Media session: The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking.
  • :where(): The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • :is(): The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.
  • :where(): The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.