New to the web platform in April

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

Apr 29, 2022

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In April, Chrome 101 and Firefox 99 became stable. After the bumper crop of features landing last month, it was a bit quieter during April, but a few interesting things landed for us to use.

Chrome 101 includes hwb color notation. This specifies color according to its hue, whiteness, and blackness. As with other color notation, an optional alpha component specifies opacity.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

To learn more about hwb(), read this article by Stefan Judis: hwb() – a color notation for humans?.

Also in Chrome 101 is the Fetch Priority feature. This gives you a way to hint to the browser which order resources should be downloaded in, by using the fetchpriority attribute. In the example below, a low priority image is indicated with fetchpriority="low".

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

Fetch Priority isn't yet available in other browsers, however you can start using them right now to benefit anyone with a browser based on Chromium 101.

Firefox 99 includes the pdfViewerEnabled property of the Navigator interface. This property indicates if the browser supports inline display of PDF files.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

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 102, Firefox 100, and Safari 15.5.

Chrome 102, Safari 15.5, and Firefox preview versions 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 also 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.

Hero image by Jason Leung