Web platform features explorer

📃 October 2023 release notes

Newly available

The following features are newly available:

  • ARIA attribute reflection: WAI-ARIA attributes have corresponding properties on Element and ElementInternals objects.
  • <search>: The <search> HTML element is a container that represents the parts of the web page with search functionality.
  • String isWellFormed() and toWellFormed(): The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
  • Web authentication easy public key access: The getAuthenticatorData(), getPublicKey(), and getPublicKeyAlgorithm() methods of AuthenticatorAttestationResponse access credential data inside attestationObject without the need to parse it.

Widely available

The following features are now widely available:

  • AudioWorklet: The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  • ::file-selector-button: The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  • Flexbox gap: The gap CSS property in a flexbox layout sets the size of the space between items.
  • Date and time <input> types: The <input type="date"> and <input type="time"> HTML elements show date and time pickers.
  • Intl.DisplayNames: The Intl.DisplayNames API provides localized names of language, region, script, and currency codes.
  • Intl.ListFormat: The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
  • MediaStream recording: The MediaRecorder API captures data generated by MediaStream or HTMLMediaElement objects for analysis, processing, or saving to disk. Also known as the Media Recording API.
  • OES_fbo_render_mipmap WebGL extension: The OES_fbo_render_mipmap extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.
  • OfflineAudioContext: The OfflineAudioContext API represents an audio processing graph that writes to an AudioBuffer instead of an output device.
  • Paint timing: The paint performance entry and the PerformancePaintTiming API measures the duration of "paint" (also called "render") operations as a page loads. The API measures the time to First Paint (FP) and First Contentful Paint (FCP), common metrics for perceived loading times.
  • Quotes: The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.
  • BigInt to i64 conversion (WebAssembly): Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.
  • Sign extension operators (WebAssembly): Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.
  • Weak references: The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
  • Web Audio: The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.

New in Chrome

The following features are now available in Chrome:

  • cap unit: The cap CSS length unit corresponds to the height of Latin capital letters.
  • Clip path boxes: The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
  • prefers-reduced-transparency media query: The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.
  • Promise.withResolvers(): The Promise.withResolvers() static method is an alternative to the Promise() constructor that returns both the promise and resolution functions. You can use this to access resolve and reject outside the scope of the executor function.
  • rcap unit: The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
  • rect() and xywh(): The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.
  • @scope: The @scope CSS at-rule sets the scope for a group of rules.
  • Storage access: The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.
  • transform-box: The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.
  • :user-valid and :user-invalid: The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
  • Garbage collection (WebAssembly): Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.
  • Typed function references (WebAssembly): A typed function reference can be called directly.
  • word-break: auto-phrase: The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.

New in Chrome Android

The following features are now available in Chrome Android:

  • cap unit: The cap CSS length unit corresponds to the height of Latin capital letters.
  • Clip path boxes: The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
  • prefers-reduced-transparency media query: The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.
  • Promise.withResolvers(): The Promise.withResolvers() static method is an alternative to the Promise() constructor that returns both the promise and resolution functions. You can use this to access resolve and reject outside the scope of the executor function.
  • rcap unit: The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
  • rect() and xywh(): The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.
  • @scope: The @scope CSS at-rule sets the scope for a group of rules.
  • transform-box: The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.
  • :user-valid and :user-invalid: The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
  • Garbage collection (WebAssembly): Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.
  • Typed function references (WebAssembly): A typed function reference can be called directly.
  • word-break: auto-phrase: The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.

New in Edge

The following features are now available in Edge:

  • cap unit: The cap CSS length unit corresponds to the height of Latin capital letters.
  • rcap unit: The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
  • @scope: The @scope CSS at-rule sets the scope for a group of rules.
  • transform-box: The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.

New in Firefox

The following features are now available in Firefox:

  • Array grouping: The Object.groupBy() and Map.groupBy() static methods group values of arrays and iterables based on a function that returns a key for each value.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Array grouping: The Object.groupBy() and Map.groupBy() static methods group values of arrays and iterables based on a function that returns a key for each value.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • Managed media source: The ManagedMediaSource API is a MediaSource where the browser manages the memory of source buffers and may evict data if needed.