Web interoperability: what the Interop project fixes

"Works in Chrome, breaks in Safari" has cost frontend teams countless hours. A feature exists in every browser on paper, but each one handles the details a little differently, so developers write workarounds, add extra testing, or avoid the feature altogether.

The Interop project is the browser makers' joint answer to that.

What the Interop project is

Interop is a yearly effort run by the companies behind the main browser engines, including Apple, Google, Microsoft and Mozilla, together with Igalia and Bocoup. Each year they:

1. collect proposals for web features that behave inconsistently,
2. agree on a list of focus areas,
3. measure every browser against a shared set of automated tests from the web-platform-tests project,
4. publish the scores on a public dashboard.

The public score matters. It turns compatibility from a vague goal into a number each team wants to raise.

What it has covered

The focus areas are the features developers ask for most. Interop 2024 included:

• CSS nesting,
• registered custom properties with @property,
• the popover attribute,
• relative color syntax,
• text-wrap: balance,
• declarative shadow DOM,
• scrollbar styling and URL parsing.

Later rounds moved on to anchor positioning, view transitions and the Navigation API, among others. The pattern is the same each year: pick the painful gaps, close them together.

What changes for developers

New features become usable sooner. A CSS feature used to take years to be safe everywhere. Features that go through Interop tend to reach every engine within a release cycle or two.

Fewer workarounds. Less browser-specific code, fewer polyfills, shorter test matrices.

A clearer signal. The Baseline label on MDN and Can I Use states whether a feature is newly available or widely available across browsers, so you do not have to read four compatibility tables to decide.

What still needs care

Interop improves current browser versions. Your users are not all on current versions. Keep two habits:

• Check your own analytics before dropping support for older browsers.
• Use progressive enhancement, so a missing feature degrades instead of breaking the page.

.card {
  padding: 1rem;
}

@supports (container-type: inline-size) {
  .card-wrap {
    container-type: inline-size;
  }
}

The takeaway

The web platform is more consistent than it has ever been, and it keeps improving on a public schedule. Before reaching for a library to smooth over a browser difference, check whether the platform already does the job. Often it now does. CSS container queries are a good example.