A shared benchmark for the web platform's rough edges

For the first time, the major browser vendors and other web platform stakeholders have agreed on a joint benchmark to tackle the compatibility problems developers report most often. Interop 2022 focuses on 15 key areas, selected through a public nomination and review process involving Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla. The goal is simple: make cross-browser development measurably less painful.

The effort traces back to the MDN Developer Needs Assessment surveys and the 2020 Browser Compatibility Report, which led to the Compat 2021 project. That work produced solid foundations for CSS grid and flexbox, including the gap property in flexbox, and finished 2021 with implementations scoring above 90% across the board. Interop 2022 carries that momentum forward with a broader set of targets.

Where the work will go

Ten of the 15 focus areas are new for 2022. They are:

Cascade layers

Cascade layers give developers explicit control over the cascade by grouping selectors into layers, each with its own specificity. That removes the need to carefully order selectors or inflate specificity just to override base CSS.

Color spaces and CSS color functions

Color functions built into CSS would replace the current reliance on Sass, PostCSS, or calc() on HSL values for dynamic theming. CSS Color Level 5 defines two functions that matter most here:

  • color-mix(): mixes two colors in a specified color space by a given amount.
  • color-contrast(): picks the color with the highest contrast against a specified color from a list.

These functions support expanded color spaces such as LAB, LCH, and P3, and default to the uniform LCH color space alongside HSL and sRGB.

New viewport units

Viewport sizing problems show up in both the MDN Browser Compatibility Report 2020 and the State of CSS 2021 survey. CSS Values and Units Level 4 adds lv*, sv*, and dv* units for the largest, smallest, and dynamic viewport sizes, which will make it easier to build layouts that account for mobile browser chrome like the address bar. The team will also research the interoperability of existing viewport measurement features, including the current vh unit.

The different parts of the viewport for each type of viewport unit.

Scrolling

The 2021 Scroll Survey Report identified scrolling features as a recurring pain point. Interop 2022 will focus on scroll snap, scroll-behavior, and overscroll-behavior to make scrolling more consistent across platforms. New scroll snap feature proposals are also under exploration.

Subgrid

The subgrid value for grid-template-columns and grid-template-rows lets a grid item that also has display: grid inherit the track definition from the part of the parent grid it sits on. For example, three card components can keep headers and footers aligned even if each card has its own independent grid, as long as each card spans three rows of the parent grid and uses subgrid to inherit those rows.

A three card component where the headers and footers are aligned between the cards.
See this on CodePen.

Also included

  • CSS Containment (the contain property)
  • The <dialog> element
  • Form controls
  • Typography and encodings, including font-variant-alternates, font-variant-position, the ic unit, and CJK text encodings
  • Web Compat, covering browser differences that cause site compatibility issues for end users

Five areas carried over from Compat 2021 remain in scope to address remaining gaps: Aspect Ratio, Flexbox, Grid, Sticky Positioning, and Transforms.

Investigation tracks

Three additional problems are too immature in specification or testing to score yet. For these, the vendors will collaborate on improving specs and tests so they can be scored in future iterations:

  • Editing, contenteditable, and execCommand
  • Pointer and Mouse Events
  • Viewport Measurement

Scoring progress

The scores per browser - 71 for Chrome and Edge, 74 for Firefox, 73 for Safari Technology Preview.

Progress in the 15 focus areas will be tracked on the web-platform-tests dashboard. Each area has an identified set of tests, and browsers are scored against those tests to produce per-area and overall scores. You can follow the results on the Interop 2022 dashboard throughout the year.

An image of a table with scores for many areas for all major web browsers
See all browser scores per focus area on wpt.fyi/interop-2022.

The point of these sustained interoperability efforts is to acknowledge developers' long-standing pain points and address them through collaboration rather than one-off fixes. If they succeed, developers spend less time working around browser inconsistencies and more time building web experiences.

Feedback on the changes from Compat 2021 or the features in Interop 2022 can be filed as issues on the GitHub repo.