Interop 2023: MDN updates

The Interop project is a benchmark and test suite that tracks the interoperability of web features across different browsers. However, Interop is more than tests; it is a joint initiative among browser vendors to identify important features that would benefit from consistency across browsers and drive development toward them over a calendar year.

Over the last three years, developers have worked together to increase overall Interop benchmark scores. Like previous years, the Interop 2024 dashboard shows the features that browser vendors have agreed to work on collectively and the progress in web feature compatibility scores across different browsers.

The main goal of this initiative is to ensure developers can create seamless web experiences for everyone, regardless of their browser choice. When developers can build upon a consistent web platform, everyone who uses the web benefits from it in their daily online activities.

A key benefit of the web platform is that it's defined by standards, rather than by the code of a single implementation. This creates a shared platform that isn't tied to specific hardware, a company, or a business model. - Interop 2022 announcement, Mozilla Hacks

The Interop team chooses focus areas based on user and web developer feedback to identify features or groups of features that are particularly problematic due to poor or inconsistent browser support. A suite of headless browser tests asserts that browsers behave in a specification-compliant way for each focus area.

An accelerator behind the scenes is that browser vendors can ship Web Platform Tests (WPT) alongside code changes, which automated processes can pick up, and tests can be efficiently downstreamed to the WPT project. Shipping fixes and features with a tight feedback loop with Interop lets browser developers directly see the impact of their efforts on the web ecosystem, which is a significant motivating factor for driving the open web forward.

A lot of code changes landed in multiple browsers that were aimed at improving Interop scores. As you can see in the screenshot below, the overall benchmark results present a nice picture of increased cross-browser compatibility. To get insights into the project's progress, you can use this interactive dashboard.

Some focus areas had a dramatic change over the course of the year. For example, the features within CSS custom properties, which were lingering at a mere 4% in January 2023, surged to an 89.5% passing score by the end of the year:

CSS Subgrid is another great example that went from 12.5% to 90.8% passing overall score last year:

The benchmark results paint an exciting picture of success for the project goals that encourage conformance to web standards everywhere.

The role of the MDN team in Interop involves ensuring that there is reliable and up-to-date documentation for the features included in Interop, especially for those that have reached cross-browser support. This enables developers to confidently build for the web using functionalities that have recently become stable across major browser releases.

Interop 2023 was one of the team's documentation goals last year. Our intention was to audit the MDN content corresponding to the focus areas in Interop 2023 and update the docs to keep them accurate and useful as the features and their support evolved.

A lot of features such as :has() reached stable status across all major browser engines in 2023 and that meant we could remove a lot of experimental warnings and update code to use the latest syntax, where appropriate.

2023 was a big year for CSS, and we saw a lot of improvements landing for CSS color support, which led to some great documentation improvements. Here's a few interesting picks from changes that landed from the team's focus on Interop:

• docs(CSS): Add module landing page for CSS Properties and Values API
• docs(CSS): Add module landing page for overscroll behavior
• docs(CSS): Add module landing page for CSS transforms module
• docs(HTML): Inert - notes about content not being perceivable

If you want to see everything else that was covered in the Interop 2023 tasks and PRs, check the MDN Interop 2023 tracking issue on GitHub which has links to 56 PRs and subtasks. Aside from reference docs and guides, we've written a fair bit about Interop topics like CSS colors, border images, and container queries on the MDN blog:

• Border images in CSS: A key focus area for Interop 2023
• Learn how to use hue in CSS colors with HSL
• New functions, gradients, and hues in CSS colors (Level 4)
• Getting started with CSS container queries

Here's the focus areas from Interop 2023 with links to the MDN docs for each area. We hope all of the work in keeping these docs updated has made a difference in your experience reading through them and in your web development journey.

CSS

Focus Area	Description
Border Image	How an image can be used as the border of an element.
Color Spaces and Functions	Different ways to specify color values and color spaces.
Container Queries	Encapsulation based on parent container's size.
Containment	Isolating a subtree from the rest of the document.
CSS Math Functions	Mathematical functions like min(), sin().
CSS Pseudo-classes	State selectors for elements (e.g., :hover, :focus).
Custom Properties	Custom CSS variables for reusable values.
Flexbox	A layout for arranging elements in a one-dimensional flow.
Font Feature Detection and Palettes	Advanced typographic features.
Grid	A grid-based layout system.
:has()	Select elements based on its descendants.
Masking	How to partially or fully hide elements using masking layers.
Media Queries 4	Apply styles based on device characteristics.
Motion Path	Position elements along paths for animations.
Scrolling	Control scrolling in web documents.
Subgrid	Extend CSS Grid to allow grid items to relate to an ancestor's grid.
Transforms	Perform 2D and 3D transformations to elements.

HTML

Focus Area	Description
Forms	Using forms for collecting user input.
Inert	Make elements non-interactive and invisible to assistive technologies.

APIs

Focus Area	Description
Modules in Web Workers	Use Web Workers to run scripts in background threads.
Offscreen Canvas	Rendering graphics via scripts without updating the main page.
Pointer and Mouse Events	Handling input from mouse and touch interfaces.
URL	The API for creating and managing URLs.
Web Codecs (video)	Codecs for encoding and decoding audio and video.

Other

• Web Components: A collection of technologies allowing to create reusable custom elements.

We're excited to see what's landing on the web platform in 2024, and we're going to be keenly watching Interop to see what the next movers and shakers are. We see Interop as one of the most important and exciting initiatives that motivates browser vendors to build a compliant and open web.

We hope you enjoyed this post! Feel free to get in touch with us and let us know what you think. If you want to find out more about Interop, here's a list of resources to announcements and project pages:

• Announcing Interop 2024 on hacks.mozilla.org
• Interop 2024 on web.dev
• The web just gets better with Interop 2024 on webkit.org
• WPT homepage
• Interop 2024 project page on wpt.fyi