Tuesday, December 3, 2024

Rotating MacBook keys

Shortly after I started using a...

How Can You Simplify Brand Marketing with Singapore Strategies?

In an ever-evolving landscape of digital...

New to the web platform in June  |  Blog  |  web.dev

Web DevelopmentNew to the web platform in June  |  Blog  |  web.dev


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

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.

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:

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.

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);
}

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;
}

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.

Check out our other content

Check out other tags:

Most Popular Articles