Interop 2022: end of year update

Discover just some of the features that have become interoperable during 2022.

Rachel Andrew

We've reached the end of another year, and it's time to look at the improvements made by browsers as we work together to improve the interoperability of the web platform. You can check out how things started in our post in March this year, as the initiative was launched.

The overall scores at the end of the year show a great improvement across all engines.

In this post, learn about the progress made during 2022. In addition to these headline features, there were many smaller improvements made by all engines. Small issues that can cause inconsistencies between engines and trip you up during development, have been fixed. Seeing big features available cross-browser is definitely exciting, but it's sometimes the small things that cause the most problems, and it's great to see how much has been improved.

Cascade layers

Cascade layers let you manage the cascade by grouping selectors into layers. It's the kind of feature that only becomes useful when it is supported everywhere. All major engines now support cascade layers, and the scores across all browsers reflect how interoperable the feature is, with just a few tests left to pass for Firefox.

The dialog element

The dialog element allows the creation of modal and non-modal dialogs. This is a common pattern on the web, and using this element gives you usability and accessibility that you would otherwise have to develop and test when creating your own components. In the article Building a dialog component, Adam Argyle explains how to build on top of this element to build different types of dialogs.

Subgrid

At the beginning of 2022, the only browser supporting the subgrid value for grid-template-rows and grid-template-columns was Firefox. During 2022 Safari has landed support, and the feature is under development in Chrome. It's going to miss the end of year deadline for interoperability, but it's on the way.

Viewport units

Viewport units are the only feature that has hit 100% of passing tests across all engines. This includes the concepts of the small and large viewport, that accounts for the changing viewport size on mobile as device UI elements appear and disappear. You can find out more about these units in the post the large, small, and dynamic viewport units.

Color 4

This collection of color work enables CSS to not only specify colors in higher definition gamuts (for example, display p3, rec2020), but also provides new color functions that each have unique utilities for working with color. New color spaces are lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: try these in Canary today with this flag enabled. These changes also apply to gradients, allowing authors to specify which colorspace their gradients use. The same flag also enables color-mix() support, allowing you to mix two colors together in a space of your choice. The color-mix() function is also behind a flag in Safari and Firefox. More colors, better colors, better gradients, and better tools.

Interop 2023

I hope you'll be happy to know that we aren't intending to stop at the end of 2022, and Interop 2023 is already well through the initial planning stage. In the New Year we'll be able to announce the features that have been selected, and look forward to another year of making it easier to develop for the web.

Hero image by Ian Schneider.