New to the web platform in January

Discover some of the interesting features that have landed in stable and beta web browsers during January 2024.

Rachel Andrew

Stable browser releases

In January 2024 Firefox 122, Chrome 121, and Safari 17.3 became stable. This post looks at the new features added to the web platform.

<hr> in <select>

Firefox 122 adds <hr> elements as an allowable child of <select> elements. This helps with readability of select lists with a lot of options. All main browser engines now support this feature. However, it is worth noting that no browser currently exposes the <hr> to the accessibility tree.

Browser Support

  • 119
  • 119
  • 122
  • 17

HTMLSelectElement.showPicker

Also for <select> elements in Firefox is the showPicker() method for HTMLSelectElement. This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.

Browser Support

  • 121
  • 121
  • 122

Source

Largest Contentful Paint (LCP) API

Firefox 122 also supports the LCP API. This performance API provides timing information about the largest image or text paint before users interact with a web page. Learn more about LCP in the LCP documentation.

Browser Support

  • 77
  • 79
  • 122
  • x

Source

CSS scrollbar properties

Chrome 121 adds support for the scrollbar properties scrollbar-color and scrollbar-width. Learn more about this in the article Scrollbar styling.

Browser Support

  • 121
  • 121
  • 64
  • x

Source

CSS font-palette animation

The font-palette property lets you select a specific palette to render a color font. This property now supports animation, so switching between palettes becomes a smooth transition between the two selected palettes.

The transfer() and transferToFixedLength() methods of ArrayBuffer

Firefox includes the JavaScript transfer() and transferToFixedLength() methods of ArrayBuffer. The transfer() method creates a new ArrayBuffer with the same byte contents as the current ArrayBuffer, then detaches the original ArrayBuffer. The transferToFixedLength() method works in the same way, but creates a fixed size ArrayBuffer.

Browser Support

  • 114
  • 114
  • 122
  • 17.4

Source

Updates to the Speculation Rules API

Sites use the Speculation Rules API, to programmatically tell Chrome which pages to prerender, creating a better user experience by reducing page navigation time.

Chrome 121 includes support for document rules: they are an extension to the speculation rules syntax that lets the browser obtain the list of URLs for speculative loading from elements in a page. Document rules may include criteria for which of these links can be used. This, coupled with a new "eagerness" field lets you automatically prefetch or prerender links on pages immediately, on hover or on mouse down.

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 are Firefox 123, Chrome 122, and Safari 17.4. These releases bring many great features to the platform. Check out the release notes for all of the details. Here are just a few highlights.

Firefox 123 beta includes the Declarative Shadow DOM.

Also in Firefox 123 is support for the 103 Early Hints HTTP information response status code for preloading resources that the page may need while the server prepares the full response.

There's a lot of good stuff in the Safari 17.4 beta. For CSS there is support for @scope, align-content on block containers and table cells, and for the ::grammar-error and ::spelling-error pseudo-elements, plus much more.

In forms, support for vertical writing mode in form controls, the showPicker() method for <input type="date">, and support for <hr> inside <select> on iOS.

JavaScript also gets some new features with support for the detached(), transfer() and transferToFixedLength() methods of ArrayBuffer among other things.

Chrome 122 beta includes an unsanitized option in the read() method of the Async Clipboard API to retrieve unsanitized HTML format. For JavaScript there are new iterator helpers, and new methods for the built-in Set class.

Also in Chrome 122 is the Storage Buckets API which aims to make persistent storage eviction under heavy memory pressure more predictable.