Web platform features explorer

📃 September 2022 release notes

Newly available

The following features are newly available:

  • Inline-size containment: The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
  • 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.
  • :modal: The :modal pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <dialog> element used with showModal().
  • Motion path: The offset CSS property animates an element along a defined motion path.
  • overflow: clip: The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
  • overscroll-behavior: The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.
  • Permissions: The navigator.permissions API checks whether a permission, such as access to geolocation data, has been granted.
  • resolution media query: The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.
  • text-align-last: The text-align-last CSS property sets the alignment of the last line of text before a forced line break.

Widely available

The following features are now widely available:

  • font-optical-sizing: The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
  • Hashbang comments: The #! comment at the absolute start of a script or module is treated as a normal comment and is ignored by the JavaScript engine.
  • Opacity (SVG): The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.
  • overflow: The overflow CSS property sets the behavior for when content doesn't fit in an element.
  • Q unit: The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
  • Import and export of mutable globals (WebAssembly): Mutable global variables are importable and exportable.

New in Chrome

The following features are now available in Chrome:

  • blocking="render": The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  • checkVisibility(): The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.
  • Container queries: Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
  • Fetch upload streams: A fetch() request uploads a stream of data to the server when a request's body property is a ReadableStream object.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.
  • Hyphenate character: The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.
  • ic unit: The ic CSS length unit corresponds to the width of CJK ideographic characters.
  • text-decoration in ::selection: The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.
  • WebDriver BiDi: WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.
  • Window Controls Overlay: The display_override:\ ["window-controls-overlay"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.

New in Chrome Android

The following features are now available in Chrome Android:

  • blocking="render": The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  • checkVisibility(): The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.
  • Container queries: Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
  • Fetch upload streams: A fetch() request uploads a stream of data to the server when a request's body property is a ReadableStream object.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.
  • Hyphenate character: The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.
  • ic unit: The ic CSS length unit corresponds to the width of CJK ideographic characters.
  • Picture-in-picture (video): The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.
  • text-decoration in ::selection: The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.
  • WebDriver BiDi: WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.

New in Edge

The following features are now available in Edge:

  • blocking="render": The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  • checkVisibility(): The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.
  • Container queries: Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
  • Fetch upload streams: A fetch() request uploads a stream of data to the server when a request's body property is a ReadableStream object.
  • :has(): The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  • Custom highlights: Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.
  • text-decoration in ::selection: The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.
  • Window Controls Overlay: The display_override:\ ["window-controls-overlay"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.

New in Firefox

The following features are now available in Firefox:

  • Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.

New in Firefox for Android

The following features are now available in Firefox for Android:

  • Offscreen canvas: The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.

New in Safari

The following features are now available in Safari:

  • animation-composition: The animation-composition CSS property chooses how to combine animations that affect the same property.
  • Array by copy: The toReversed(), toSorted(), toSpliced(), and with() methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as sort() or reverse() that change arrays in place.
  • AVIF: AVIF (AV1 Image File Format) is an image format based on the AV1 video format.
  • calc() keywords: The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions such as calc().
  • Container queries: Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
  • 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_norm16 WebGL extension: The EXT_texture_norm16 extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.
  • Grid animation: Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
  • JavaScript modules in shared workers: The SharedWorker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in shared workers.
  • Push messages: The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.
  • Shared worker: The SharedWorker() constructor runs a script in its own thread, which can send and receive messages with other scripts running at the same origin.
  • Subgrid: The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
  • 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.
  • OES_draw_buffers_indexed WebGL extension: The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.

New in Safari on iOS

The following features are now available in Safari on iOS:

  • animation-composition: The animation-composition CSS property chooses how to combine animations that affect the same property.
  • Array by copy: The toReversed(), toSorted(), toSpliced(), and with() methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as sort() or reverse() that change arrays in place.
  • AVIF: AVIF (AV1 Image File Format) is an image format based on the AV1 video format.
  • calc() keywords: The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions such as calc().
  • Container queries: Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
  • EXT_texture_norm16 WebGL extension: The EXT_texture_norm16 extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.
  • Grid animation: Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
  • JavaScript modules in shared workers: The SharedWorker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in shared workers.
  • Shared worker: The SharedWorker() constructor runs a script in its own thread, which can send and receive messages with other scripts running at the same origin.
  • Subgrid: The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
  • 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.
  • OES_draw_buffers_indexed WebGL extension: The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.