New to the web platform in July
Discover some of the interesting features that landed in stable and beta web browsers during July 2022.
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.
- Chrome 76, Supported 76
- Firefox 103, Supported 103
- Edge 17, Supported 17
- Safari 9, Supported 9
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.
- Chrome 75, Supported 75
- Firefox 103, Supported 103
- Edge 79, Supported 79
- Safari 15, Supported 15
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().
- Chrome 105, Supported 105
- Firefox 103, Supported 103
- Edge 105, Supported 105
- Safari 15.6, Supported 15.6
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.