New to the web platform in March

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

Mar 31, 2022

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In March, Chrome 99, Chrome 100, Firefox 98, and Safari 15.4 became stable. This brought a whole batch of new features to the platform, and many of these additions meant that the feature became available in all three browser engines. In this post I've concentrated on those additions that give us interoperability cross-browser, but do check out the release notes to see all of the features added to each engine.

Chrome 99 and Safari 15.4 included Cascade Layers. The @layer at-rule defines a cascade layer, helping you to control specificity. They join Firefox, and so Cascade Layers is now available in all three browser engines. Find out more about Cascade Layers in Cascade layers are coming to your browser.

Chrome 100 includes the new value of plus-lighter for the CSS mix-blend-mode property. This value is useful when cross-fading two elements when all or a subset of pixels have the same values. You can read more about the problem this solves in Cross-fading any two DOM elements is currently impossible.

Safari 15.4 includes the contain property, allowing for CSS containment.

Also in Safari 15.4 is accent-color, which gives control over the accent color used on some form controls.

Firefox 98 and Safari 15.4 landed the <dialog> element, which represents a dialog box.

Safari 15.4 also completed support for the :focus-visible pseudo-class. The implementation work on this was by Igalia.

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 in March were Chrome 101, and Firefox 99.

Chrome 101 beta includes hwb color notation. This specifies color according to its hue, whiteness, and blackness. As with other color notation, an optional alpha component specifies opacity.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Firefox 99 includes the pdfViewerEnabled property of the Navigator interface. This property indicates if the browser supports inline display of PDF files.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

These beta features will land in stable browsers soon.

Hero image by Brandon Zack