What landed in browsers in April

Stable releases of Chrome 101 and Firefox 99 arrived in April, along with some useful additions. Chrome 101's headline features were the hwb() color notation and Fetch Priority, while Firefox 99 gained a new Navigator property for PDF detection.

hwb() colors in Chrome 101

The CSS hwb() function specifies colors by hue, whiteness, and blackness, with an optional alpha component for opacity. It is supported in Chrome 101, Firefox 96, and Safari 15.

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

Fetch Priority in Chrome 101

The Fetch Priority API lets developers hint at the relative download order of resources. The fetchpriority attribute can be set to high or low. In the following example, an image is marked to be fetched with lower priority.

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

This feature is only available in Chromium-based browsers at present, so it is safe to use as an enhancement for those users.

pdfViewerEnabled in Firefox 99

Firefox 99 added the pdfViewerEnabled property to the Navigator interface. It returns a boolean indicating whether inline PDF display is supported by the browser.

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

The property is also available from Chrome 94 and Safari 16.4.

What's coming in beta

April betas gave a preview of Chrome 102, Firefox 100, and Safari 15.5. The major cross-browser change is the inert attribute, which is present in Chrome 102, Safari 15.5, and some Firefox preview builds. This attribute removes elements, such as offscreen or non-interactive content, from the tab order and accessibility tree.

Chrome 102 also includes two notable additions. The first is the until-found value for the HTML hidden attribute. It allows find-in-page and scroll-to-text-fragment operations to reach text hidden inside collapsed regions, like those in accordion patterns. The second is the Local Font Access API, which exposes the user's locally installed fonts to web applications.