New to the web platform in May

Discover some of the interesting features that landed in stable and beta web browsers during May 2022.

May 31, 2022 — Updated Jun 1, 2022

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In May, Chrome 102, Safari 15.5, Firefox 100, and Firefox 101 became stable.

Chrome 102 and Safari 15.5 include the inert attribute. This removes elements from the tab order and accessibility tree if they are non-interactive. For example, an element that is currently offscreen or hidden.

Chrome 102 includes the new value until-found for the HTML hidden attribute. This enables find-in-page and scroll to text fragment on text that is inside a collapsed area of the page, as you might find in an accordion pattern. Find out more in the post Making collapsed content accessible with hidden=until-found.

Chrome 102 ships the Navigation API, an API that standardizes client-side routing in single-page applications. This API was previously named the App History API.

Firefox 101 supports constructable stylesheets. Support includes the CSSStyleSheet() constructor, and the replace(), and replaceSync() methods. Constructable stylesheets make it easier to create stylesheets for use with the Shadow DOM. In the following example, a stylesheet is created using the CSSStyleSheet() constructor, a CSS rule is added with the replaceSync() method, and the resulting rule is printed to the console.

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);

Also in Firefox 101 is the prefers-contrast media feature, making this feature available cross-browser.

Beta browser releases #

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.

New betas in April were Chrome 103 and Firefox 102.

Firefox 102 includes the update media feature. This is used to query whether the output device can modify the appearance of content once it has been rendered. It accepts the following values:

none

Once rendered the content cannot be updated. For example, a printed document.

slow

The device can update the content, but too slowly to display smooth animation. For example, E-ink screens.

fast

The content can change dynamically, and quickly enough to render animations. For example, a computer or phone screen.

Chrome 103 includes the Local Font Access API, which allows access to the user's locally installed fonts.

These beta features will land in stable browsers soon.

Edit: A previous version of this post included mention of the Element.isVisible() method, which is not shipping in this release.