New to the web platform in July

Discover some of the interesting features that landed in stable and beta web browsers during July 2022.

Rachel Andrew

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.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

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.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 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: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 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.

Part of the New to the web series