New to the web platform in December

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

Rachel Andrew

Stable browser releases

In December 2023 Firefox 121, Chrome 120, and Safari 17.2 became stable. This post looks at what that means for the web platform.

Relaxed parsing for CSS Nesting

Chrome 120 and Safari 17.2 include relaxed parsing for CSS Nesting. As this has been supported in Firefox from version 117, this means that all major engines support this syntax change.

Exclusive accordions with the <details> element

Chrome 120 and Safari 17.2 include support for the name attribute for the <details> element. This means that you can create exclusive accordion components by grouping a number of <details> elements.

Learn more in exclusive accordion.

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

The :has() selector

Firefox 121 includes the CSS :has() selector. This release makes :has() interoperable across all major engines.

Find out more in :has(): the family selector.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

The CSS Custom Highlight API

Safari 17.2 includes the CSS Custom Highlight API which lets you create and style text ranges, extending the standard highlight pseudo-classes such as ::selection.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox Technology Preview: supported.
  • Safari: 17.2.

Source

The CloseWatcher API

Chrome 120 includes the CloseWatcher API, a new API for listening for and responding to close requests. These requests are triggered by the ESC key on desktop and the back gesture or button on Android, and can be tricky to implement well.

In addition to the API, Chrome 120 upgrades <dialog> and the popover attribute to respond to the Android back button.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

CSS text-wrap: balance and stable

Firefox 121 includes the balance and stable values for text-wrap. The balance value is useful for short blocks of content such as headings, creating more pleasing and easy to read text. The stable value prevents editable content from relowing while being edited.

Learn more about text-wrap: balance.

text-wrap: balance

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source

text-wrap: stable

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 121.
  • Safari: 17.5.

Source

Lazy-loading of <iframe> elements

Firefox 121 supports the loading attribute on <iframe> elements. This means that lazy-loading of iframes is now supported in all major engines.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

Support for the linear() easing function

Safari 17.2 also includes support for the linear() easing function, that can be used to create bounce and spring effects.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

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 122, Chrome 121, and Safari 17.3. 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 122 and Chrome 121 include the showPicker() method for HTMLSelectElement. This shows the same picker that would be shown when the element is selected, but can be triggered from a button press or other user interaction.

Chrome 121 includes the scrollbar styling properties scrollbar-color and scrollbar-width, along with improved CSS masking for SVG, and highlight pseudo-elements for text that has been misspelled or is grammatically incorrect.