Discover some of the interesting features that landed in stable and beta web browsers during May 2022.
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.
Part of the New to the web series