June's web platform updates: stable releases and beta previews

The web platform saw a steady stream of changes in June 2022, with Chrome 103 and Firefox 102 reaching stable status while Chrome 104, Firefox 103, and Safari 16 entered beta. Here's a look at what the updates mean for developers.

Chrome 103 and Firefox 102 are now stable

Streams arrive in Firefox

Firefox 102 adds support for TransformStream, which lets developers pipe data from a ReadableStream through a transformation function to a WritableStream. This completes cross-browser support for the feature across all three major engines, making streams a viable option for production code.

Readable byte streams are also now supported in Firefox 102. The ReadableStreamBYOBReader interface enables a "bring your own buffer" reader, allowing developers to supply buffers for data written by the system.

Local font access in Chrome

Chrome 103 ships the Local Font Access API. After the user grants permission, developers can call window.queryLocalFonts() to retrieve metadata for fonts installed on the device:

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

The update media feature

Firefox 102 also supports the update media feature, which lets CSS query whether the output device can repaint content after it has been rendered.

HTTP 103 Early Hints

Chrome 103 introduces support for the HTTP 103 Early Hints status code. Servers and CDNs can use it to tell the browser which origins to preconnect to or which subresources to preload before the final response is ready. The feature requires configuration changes on the server or CDN side.

What's in the beta channel

Beta releases in June preview the next wave of features. Chrome 104, Firefox 103, and Safari 16 all entered beta this month.

Range media query syntax in Chrome 104

Chrome 104 supports the Media Queries Level 4 syntax for range queries. A query that previously required min-width and max-width:

@media (min-width: 400px) { … }

can now use the more compact range syntax:

@media (width >= 400px) { … }

Region Capture API

Chrome 104 on desktop adds the Region Capture API, allowing developers to crop content out of a captured video stream before it is shared.

Safari 16: container queries, subgrid, and more

Safari 16 brings a substantial set of features, several of which are part of the Interop 2022 effort, and lands them at the mid-year mark. Container query size queries are supported, a feature that remains behind a flag in Chrome.

The beta also includes the subgrid value for grid-template-columns and grid-template-rows, letting nested grids inherit track sizing from their parent grid. This is now supported in Firefox and Safari, with Chrome support in development.

Developers can also use CSS to animate grid tracks in Safari 16. The showPicker() method for HTMLInputElement is included as well, providing a canonical way to bring up browser pickers for dates, time, colors, and file inputs. Finally, Safari 16 addresses accessibility issues with display: contents, so the property can be used without removing elements from the accessibility tree.

The beta features will make their way to stable versions in the coming months.