New to the web platform in June

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

Rachel Andrew

Stable browser releases

In June, Chrome 103 and Firefox 102 became stable.

Transform streams and readable byte streams

Firefox 102 includes support for Transform Streams. This enables piping from ReadableStream to a WritableStream, executing a transformation on the chunks. It's great to see this feature become available in all three engines, making this a very good time to learn about Streams.

Browser Support

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

Readable byte streams are also now supported in Firefox 102, enabling a BYOB (bring your own buffer) reader with the ReadableStreamBYOBReader interface. This can be used to stream data supplied by the developer.

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: not supported.

Source

Access locally installed fonts

Chrome 103 includes the Local Font Access API, which allows access to the user's locally installed fonts. After requesting access to the fonts installed on the device, call window.queryLocalFonts() to get an array of the installed fonts.

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 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.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

A new HTTP status code—103 early hints

Chrome 103 adds a new status code HTTP 103 Early Hints. If the server or CDN knows that a certain set of subresources is required to load a page, it can advise the browser to preconnect to origins or even preload resources as the page that requires them comes in. This requires updates to your server or CDN to take advantage of the feature, find out more about Early Hints.

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 104, Firefox 103, and Safari 16.

New syntax for range media queries

Chrome 104 includes the new syntax for range media queries, from the Media Queries Level 4 specification. For example, a media query previously written like this:

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

Can now be written like this:

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

Browser Support

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Source

Region Capture API

Chrome 104 on desktop also includes the Region Capture API. This enables cropping and removing content from captured video before sharing it.

Safari 16 brings several key features to the browser

Safari 16 looks to be another exciting release from the Safari team. This release adds many of the features that are included in Interop 2022, it's great to see so much landing at this mid-year point. I'm highlighting a few of my favorite features here, but do check out the release notes for more.

Along with many developers, I'm really excited to see size queries support for Container Queries, a feature that is also behind a flag in Chrome currently.

Also in Safari 16 is support for the subgrid value for grid-template-columns and grid-template-rows. This feature is already in Firefox, and in development in Chrome, and enables grid track sizing to be inherited by nested grids.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Also for grid layout is the ability to animate grid tracks.

Browser Support

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

The showPicker() method, enabling a canonical way to show a browser picker for dates, time, color, and files is included. You can find out more about this in show a browser picker for date, time, color, and files.

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Source

Accessibility issues for display: contents have also been addressed, making this useful feature safe to use without danger of removing elements from the accessibility tree.

These beta features will land in stable browsers soon.

Part of the New to the web series