Web platform features explorer

📃 September 2021 release notes

Newly available

The following features are newly available:

  • aspect-ratio: The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.
  • BigInt64Array: The BigInt64Array and BigUint64Array typed arrays represent 64-bit integers, signed and unsigned respectively.
  • Error cause: The cause property of errors records the specific original cause of the error, particularly for errors that have been re-thrown.
  • EXT_color_buffer_float WebGL extension: The EXT_color_buffer_float extension for WebGL 2.0 contexts adds color-renderable floating point formats to renderbufferStorage().
  • System font: The font-family: system-ui CSS declaration uses the operating system default font for text.
  • IndexedDB: The IndexedDB API is a local storage transactional object database.
  • 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.
  • Referrer policy: The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.
  • 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.
  • 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.
  • WEBGL_color_buffer_float WebGL extension: The WEBGL_color_buffer_float extension for WebGL 1.0 contexts adds the 32-bit floating-point type RGBA32F as a color-renderable format.
  • 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.

Widely available

The following features are now widely available:

  • Abortable fetch: If you construct a fetch request with an AbortSignal, you can cancel the request.
  • AbortController and AbortSignal: The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.
  • Intersection observer: The Intersection Observer API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

New in Chrome

The following features are now available in Chrome:

  • Idle detection: The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state.
  • Ink: The navigator.ink API uses the system compositor to draw to a <canvas> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • pdfViewerEnabled: The navigator.pdfViewerEnabled read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.
  • Profiler: The Profiler API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.
  • scrollbar-gutter: The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.
  • Virtual keyboard: The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.
  • WebCodecs: The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.

New in Chrome Android

The following features are now available in Chrome Android:

  • Idle detection: The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state.
  • Ink: The navigator.ink API uses the system compositor to draw to a <canvas> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • pdfViewerEnabled: The navigator.pdfViewerEnabled read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.
  • Profiler: The Profiler API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.
  • scrollbar-gutter: The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.
  • Virtual keyboard: The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.
  • WebCodecs: The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.

New in Edge

The following features are now available in Edge:

  • accent-color: The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.
  • EXT_texture_compression_bptc WebGL extension: The EXT_texture_compression_bptc extension for WebGL 1.0 and 2.0 contexts adds the BPTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
  • EXT_texture_compression_rgtc WebGL extension: The EXT_texture_compression_rgtc extension for WebGL 1.0 and 2.0 contexts adds RGTC compressed texture formats. RGTC is a block-based texture compression format suited for unsigned and signed red and red-green textures. Also known as Red-Green Texture Compression.
  • Ink: The navigator.ink API uses the system compositor to draw to a <canvas> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.
  • outline: The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
  • pdfViewerEnabled: The navigator.pdfViewerEnabled read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.
  • Profiler: The Profiler API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.
  • scrollbar-gutter: The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.
  • navigator.share(): The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.
  • Virtual keyboard: The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.
  • WebOTP: The OTPCredential API represents a one-time-password (OTP).
  • WebCodecs: The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.

New in Firefox

The following features are now available in Firefox:

  • accent-color: The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.
  • 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.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • accent-color: The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.
  • 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.

New in Safari

The following features are now available in Safari:

  • :autofill: The :autofill pseudo-class matches <input> elements that have been filled in automatically by the browser.
  • Desynchronized 2D canvas: The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.
  • color(): The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  • HWB: The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
  • JavaScript modules in service workers: The navigator.serviceWorker.register() method accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in service workers.
  • JavaScript modules in workers: The Worker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in workers.
  • Lab and LCH: The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  • 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.
  • <meta name="theme-color">: The name="theme-color" attribute for the <meta> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface.
  • Navigation timing: The navigation performance entry and the PerformanceNavigationTiming API measures navigation events, such as loading time or the number of redirects.
  • text-indent: each-line: The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.
  • text-indent: hanging: The text-indent: hanging CSS declaration indents all lines except the first.
  • Two-value display property: The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
  • 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.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • :autofill: The :autofill pseudo-class matches <input> elements that have been filled in automatically by the browser.
  • Desynchronized 2D canvas: The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.
  • color(): The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  • EXT_frag_depth WebGL extension: The EXT_frag_depth extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.
  • HWB: The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
  • JavaScript modules in service workers: The navigator.serviceWorker.register() method accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in service workers.
  • JavaScript modules in workers: The Worker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in workers.
  • Lab and LCH: The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  • 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.
  • <meta name="theme-color">: The name="theme-color" attribute for the <meta> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface.
  • text-indent: each-line: The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.
  • text-indent: hanging: The text-indent: hanging CSS declaration indents all lines except the first.
  • Two-value display property: The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
  • WEBGL_draw_buffers WebGL extension: The WEBGL_draw_buffers extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.
  • 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.