📃 July 2023 release notes

Newly available

The following features are newly available:

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.
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.

The following features are now widely available:

clip-path: The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
: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.
<link rel="preload">: The rel="preload" attribute for the <link> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.
:not(): The :not() functional pseudo-class matches elements that do not match the selectors in its argument.
: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.

The following features are now available in Chrome:

Page visibility state: The visibility-state performance entry and the VisibilityStateEntry API measure the timing of page visibility state changes, such as when a tab is no longer visible or the user has switched to another app.
Scroll-driven animations: The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

The following features are now available in Chrome Android:

Page visibility state: The visibility-state performance entry and the VisibilityStateEntry API measure the timing of page visibility state changes, such as when a tab is no longer visible or the user has switched to another app.
Scroll-driven animations: The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

The following features are now available in Edge:

Page visibility state: The visibility-state performance entry and the VisibilityStateEntry API measure the timing of page visibility state changes, such as when a tab is no longer visible or the user has switched to another app.
Scroll-driven animations: The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

The following features are now available in Firefox:

Array.fromAsync(): The Array.fromAsync() static method copies items from an async iterable object to make a new array.
baseline-source: The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
<link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
URL.canParse(): The URL.canParse() static method checks whether a URL can be parsed into a valid URL object. It's an alternative to calling new URL() in a try … catch statement.

The following features are now available in Firefox for Android:

Array.fromAsync(): The Array.fromAsync() static method copies items from an async iterable object to make a new array.
baseline-source: The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
<link rel="modulepreload">: The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
URL.canParse(): The URL.canParse() static method checks whether a URL can be parsed into a valid URL object. It's an alternative to calling new URL() in a try … catch statement.