New to the web platform in May

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

Rachel Andrew

Stable browser releases

In May 2024 Firefox 126, Safari 17.5, and Chrome 125 became stable. This post looks at the new features added to the web platform.

CSS anchor positioning

Chrome 125 includes CSS anchor positioning. This lets you tether an absolutely positioned element to one or more other elements on the page (the anchors), in a declarative way, without the use of JavaScript. Anchor positioning works performantly when the anchors are scrollable. A common use case is to position a popover such as a tooltip next to the element that invoked it, or a select menu and its popover options list.

Learn more in Introducing the CSS anchor positioning API.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS stepped value functions—round(), mod(), and rem()

Chrome 125 also includes the stepped value functions, which means that these functions are now Baseline Newly Available. The stepped value functions, round(), mod(), and rem(), all transform a given value according to another "step value".

Discover more in The CSS stepped value math functions are now in Baseline 2024.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

The light-dark() function

Also joining Baseline Newly Available is the CSS color function light-dark(), which is in Safari 17.5.

light-dark() is a function that accepts two arguments, both of which must be a <color>. One of both is picked depending on the used color scheme.

  • If the used color scheme is light or unknown then the computed value of the first value gets returned.
  • If the used color scheme is dark then the computed value of the second color is returned.

Read more in CSS color-scheme-dependent colors with light-dark() .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

The Screen Wake Lock API

Landing in Firefox 126 is the Screen Wake Lock API, another feature that is now part of Baseline Newly Available. This API provides a way to prevent the device from dimming and locking the screen.

Find out how to use this feature in Stay awake with the Screen Wake Lock API.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

The Compute Pressure API

The Compute Pressure API offers high-level states that represent the CPU load on the system. It allows the implementation to use the right underlying hardware metrics to ensure that users can take advantage of all the processing power available to them as long as the system is not under unmanageable stress.

This feature is in Chrome 125. Intel led the design and implementation work for this API, which will let video conferencing apps dynamically balance features and performance.

Read the documentation for The Compute Pressure API.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

The @starting-style rule

Safari 17.5 includes the @starting-style rule. This CSS at-rule lets you apply a style that the browser can look up before the element is open on the page, as needed for entry animations.

The @starting-style rule is one of the features covered in Four new CSS features for smooth entry and exit animations.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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 127 and Chrome 126. 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.

Chrome 126 includes cross-document view transitions for same origin navigations. Previously you had to rearchitect your website to an SPA to use the View Transitions API. This is no longer the case. View transitions are now enabled by default for same-origin navigations. You can create a view transition between two different documents that are the same-origin.

Firefox 127 includes additional JavaScript Set methods—intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf(), and isDisjointFrom().