Interop 2022: A Year in Review
As 2022 draws to a close, the Interop project’s results are in, showing significant strides toward a more consistent web platform. The collaborative effort across major browser engines has led to marked improvements in overall scores since the initiative launched in March.
While the headline features grab the attention, the project has also quietly resolved numerous smaller inconsistencies between engines. These subtle fixes can often be the most impactful for developers, reducing the friction of cross-browser testing and debugging.
Key Wins and Near Misses
Cascade Layers Achieve Cross-Browser Support
Cascade layers let developers group selectors into layers for more granular control over the CSS cascade. This feature is only truly useful when supported everywhere, and all major engines now have it up and running. Test scores are nearly perfect across the board, with only a few remaining gaps for Firefox.
The dialog Element is Now Universal
Building modals and non-modal dialog boxes is a common task, and the native dialog element provides a standardized foundation, including built-in usability and accessibility. With support now in all major browsers, developers can rely on this element to avoid building and testing these complex behaviors from scratch.
Subgrid is on Its Way
At the start of the year, Firefox was the only engine with support for the subgrid value in grid-template-rows and grid-template-columns. Safari added its implementation in 2022, and Chrome is actively developing support. The feature will miss the year-end interoperability target, but it has moved significantly closer to becoming a cross-browser reality.
Viewport Units Hit 100%
Viewport units were the standout achievement, reaching a perfect score across all engines. This includes the more nuanced small and large viewport units, which account for dynamic browser UI that appears and disappears on mobile devices.
Color Advancements
The work under Color 4 brings a host of new capabilities to CSS. Developers can now specify colors in higher-definition gamuts like display-p3 and rec2020. New color functions, such as lch(), oklch(), lab(), and oklab(), offer unique tools for color manipulation and creation.
These updates extend to gradients, letting authors define the color space for smoother transitions. The color-mix() function is also part of this work, enabling you to blend two colors in a chosen color space. Currently, this function is behind a flag in all major browsers—try it in Chrome Canary with chrome://flags/#enable-experimental-web-platform-features, and it's similarly gated in Safari and Firefox.
Looking Ahead to Interop 2023
The work isn't stopping here. Planning for Interop 2023 is already underway. The selected focus areas for the next phase will be announced in the new year, promising continued progress toward a more uniform web development experience.
