July 2022 web platform update

Now widely available on the web platform

Widely available

• Array flat() and flatMap(): The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it. Learn more.

• Autonomous custom elements: Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define. Learn more.

• :default: The :default CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the checked attribute. Learn more.

• <details>: The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible. Learn more.

• :indeterminate: The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked. Learn more.

• prefers-color-scheme: The prefers-color-scheme CSS media query detects the requested color scheme, light or dark. Learn more.

• Shadow DOM: Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components. Learn more.

• <slot>: The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup. Learn more.

• Stable array sort: Stable array sort() function Learn more.

• WebRTC: The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications. Learn more.

• will-change: The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes. Learn more.

Now available in Firefox

Limited availability

• backdrop-filter: The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element. Learn more.

• :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(). Learn more.

Now available in Firefox for Android

Limited availability

• backdrop-filter: The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element. Learn more.

• :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(). Learn more.

Now available in Safari

Limited availability

• :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(). Learn more.

Now available in Safari on iOS

Limited availability

• :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(). Learn more.