May’s browser releases: inert, Navigation API, and more

May 2022 brought stable updates from Chrome (102), Safari (15.5), and Firefox (100 and 101), along with beta releases of Chrome 103 and Firefox 102. Here’s what shipped and what’s on the way.

What landed in stable browsers

Chrome 102 and Safari 15.5 both shipped the inert attribute. Adding inert to an element removes it from the tab order and hides it from the accessibility tree when the element is non-interactive, such as content that is currently offscreen or otherwise not meant to be reachable.

Chrome 102 also introduced a new value for the HTML hidden attribute: until-found. This lets browsers find and scroll to text inside collapsed regions—like accordions—via find-in-page and scroll-to-text-fragment features, keeping that content searchable without requiring it to be visible by default.

The same Chrome release shipped the Navigation API (formerly the App History API). It standardizes client-side routing for single-page applications by providing a unified interface for navigation and history management.

Firefox 101 added support for constructable stylesheets, including the CSSStyleSheet() constructor and the replace() and replaceSync() methods. This simplifies working with stylesheets in Shadow DOM contexts:

// Create a new stylesheet
const sheet = new CSSStyleSheet();
// Add a rule
sheet.replaceSync('body { color: red; }');
// Check the rules
console.log(sheet.cssRules);

Firefox 101 also shipped the prefers-contrast media feature, completing cross-browser support for detecting user contrast preferences.

Previewing the next round: Beta releases

Chrome 103 and Firefox 102 entered beta in May, giving developers a heads-up on upcoming features.

Firefox 102 includes the update media feature, which queries whether a device can change the appearance of rendered content. It takes three values:

  • none: content cannot change after rendering, as with print.
  • slow: content can update but not quickly enough for smooth animation, as with E-ink displays.
  • fast: content can update dynamically at animation speed, as with typical screens.

Chrome 103, meanwhile, brings the Local Font Access API, giving web applications read access to fonts installed on the user’s system.

A note on corrections: an earlier draft of this overview mentioned the Element.isVisible() method; that feature did not ship in Chrome 102.