Friday, May 24, 2024
HomeWeb developmentNew to the web platform in July

New to the web platform in July

Stable browser releases #

In July, Firefox 103 and Safari 15.6 became stable, and with this we get interoperability on a couple of nice CSS features.

The backdrop-filter property #

Firefox 103 includes the backdrop-filter property which is used to apply effects such as blurring to the area behind an element. With this value in Firefox, it is now available in all three engines, though Safari requires the -webkit prefix.

Browser support: chrome 76, Supported 76 firefox 103, Supported 103 edge 17, Supported 17 safari 9, Supported 9 Source

The scroll-snap-stop property #

Firefox also implemented the scroll-snap-stop property. This property gives you control over whether a scrolling element passes over possible snap positions (with the default value of normal) or must snap to the first (with the value always). The scroll-snap-stop property is now in all three browser engines.

Browser support: chrome 75, Supported 75 firefox 103, Supported 103 edge 79, Supported 79 safari 15, Supported 15 Source

Safari 15.6 was a release mostly dedicated to resolving issues, however it did land one new CSS feature with the :modal pseudo-class. This feature was also shipped in Firefox 103. The :modal pseudo-class selects an element when everything outside of that element cannot be interacted with until the element is dismissed. For example, a dialog element opened with showModal().

Browser support: chrome, Not supported × firefox 103, Supported 103 edge, Not supported × safari 15.6, Supported 15.6 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.

Due to release dates falling just outside the month, the only new beta in June was Firefox 104.

Included in Firefox 104 is the CSS Font Loading API in Web Workers, and the CSS animation-composition property, that defines the composition operation used when multiple animations affect the same property simultaneously.

The Safari 16 beta mentioned last month is also still ongoing.

These beta features will land in stable browsers soon.

Hero image by Nick Fewings.

Last updated: Improve article


Please enter your comment!
Please enter your name here

Most Popular

Recent Comments