New to the web platform in June

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

Rachel Andrew

Stable browser releases

In June 2024, Firefox 127 and Chrome 126 became stable. This post looks at the new features added to the web platform.

Note: Browser compatibility data pulled from MDN is included in these posts and may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the browser-compat-data release.

JavaScript Set methods

Sets are an essential data structure in any programming language. Now you can use JavaScript's built-in methods to perform set operations. The following set methods are now available from Firefox 127, and became part of Baseline Newly Available:

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

Browser Support

• 122
• 122
• 127
• 17

Source

To learn more read The JavaScript Set methods are now part of Baseline.

Async Clipboard API

The Clipboard API is now fully supported from Firefox 127. Firefox now supports the ClipboardItem interface, along with the read() and write() methods of the Clipboard interface. Learn more about the Clipboard API in Unblocking clipboard access.

Browser Support

• 76
• 79
• 127
• 13.1

Source

Color interpolation in CSS gradients

CSS gradients are specified to accept a <color-interpolation-method>, and this is now supported in Firefox, making this interoperable across all major engines. You can now, for example, specify a linear-gradient() using the hsl color system and longer interpolation.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Browser Support

• 111
• 111
• 127
• 16.2

Cross-document view transitions

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

To enable a cross-document view transition, both ends need to opt-in. To do this, use the @view-transition at-rule and set the navigation descriptor to auto.

@view-transition {
  navigation: auto;
}

Browser Support

• 126
• 126
• x
• 

Learn more in the documentation for cross-document view transitions.

The Gamepad API trigger-rumble extension

Chrome 126 extends the GamepadHapticActuator interface to expose the trigger-rumble capability on the web for compatible gamepads. This extension will allow web applications that take advantage of the Gamepad API to also vibrate the triggers of gamepad devices that come equipped with this functionality.

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 128, Chrome 127, Safari 18, and Safari 17.6. 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.

Safari 17.6 is a release of fixes to existing features. Safari 18 has a number of exciting new features including style container queries, the view transition API for single-page apps, and support for the safe keyword in flexbox properties.

Chrome 127 includes the font-size-adjust CSS property, the ability to specify alt text on generated content as an arbitrary number of elements, and the ability to add individual chapter information in MediaMetaData.

Firefox 128 includes CSS Properties and Values, making this feature Baseline Newly Available. Use @property to define a type and set a fallback value for CSS custom properties.