Discover some of the interesting features that have landed in stable and beta web browsers during May 2024.
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.
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.
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
lightor unknown then the computed value of the first value gets returned. - If the used color scheme is
darkthen the computed value of the second color is returned.
Read more in CSS color-scheme-dependent colors with light-dark() .
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.
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.
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.
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().