Web platform features explorer

📃 March 2021 release notes

Widely available

The following features are now widely available:

  • font-variation-settings: The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
  • Speech synthesis: The SpeechSynthesis API converts text to speech with artificial voices.

New in Chrome

The following features are now available in Chrome:

  • Share targets: The share_target web app manifest member registers an installed web app as a handler for shared content. When a user shares content by using the device share dialog, the installed app can be listed as an option for handling the shared content.
  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • Forced colors: The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
  • Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • Memory measurement: The measureUserAgentSpecificMemory() method estimates the memory usage of a web application including all its iframes and workers.
  • Readable byte streams: A ReadableStream constructed with { type: "bytes" } reads bytes from a stream without making extra copies, improving efficiency for streams of large chunks. Also known as BYOB or bring your own buffer.
  • Web serial: The navigator.serial API communicates with devices over serial ports, such as microcontrollers.
  • ::target-text: The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
  • Top-level await: The await keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.
  • WebHID: The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.

New in Chrome Android

The following features are now available in Chrome Android:

  • Atomics.waitAsync: The Atomics.waitAsync() static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The waitAsync() method is a non-blocking alternative to Atomics.wait().
  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • Forced colors: The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
  • Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • Memory measurement: The measureUserAgentSpecificMemory() method estimates the memory usage of a web application including all its iframes and workers.
  • Readable byte streams: A ReadableStream constructed with { type: "bytes" } reads bytes from a stream without making extra copies, improving efficiency for streams of large chunks. Also known as BYOB or bring your own buffer.
  • SharedArrayBuffer and Atomics: The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.
  • ::target-text: The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
  • Top-level await: The await keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.

New in Edge

The following features are now available in Edge:

  • Share targets: The share_target web app manifest member registers an installed web app as a handler for shared content. When a user shares content by using the device share dialog, the installed app can be listed as an option for handling the shared content.
  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
  • Logical properties: CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
  • Memory measurement: The measureUserAgentSpecificMemory() method estimates the memory usage of a web application including all its iframes and workers.
  • Readable byte streams: A ReadableStream constructed with { type: "bytes" } reads bytes from a stream without making extra copies, improving efficiency for streams of large chunks. Also known as BYOB or bring your own buffer.
  • Web serial: The navigator.serial API communicates with devices over serial ports, such as microcontrollers.
  • ::target-text: The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
  • Top-level await: The await keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.
  • WebHID: The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.

New in Firefox

The following features are now available in Firefox:

  • Referrer policy: The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Referrer policy: The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.