Interop 2023: continuing to improve the web for developers

Again in 2023, all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues.

In 2023, all major browser vendors and other stakeholders are again working together to solve the top browser compatibility issues. The effort started on this scale with Interop 2022, and you can learn what we achieved together in the end-of-year post. Everyone involved believes this will help improve the experience for web developers everywhere. This year, for the first time, we publicly announced the proposal process and got many great suggestions from frameworks, large companies, browser vendors, and developers everywhere.

The Interop 2023 focus areas

This time around, we have no less than 26 focus areas, outlined in detail in our project document. They are, in alphabetical order:

You can find full details of all focus areas at Web Platform Tests based on MDN Web Docs, however here are a few that we think you might be really excited about.

Container Queries

Container queries has been a top request from developers for many years, and in 2022 Chrome and Safari shipped it. Firefox expects to ship container queries in Firefox 110, and the tests for this focus area help to ensure that container queries work reliably cross-browser and according to the spec.

:has(…)

Developers have for a long time asked for a parent selector in CSS. The :has() pseudo-class makes possible many of the use cases for parent selectors, as well as selecting a previous sibling element with respect to a reference element. For example, this makes it possible to style a figure that has a caption differently to one that doesn’t. Learn more about the use cases for has() in :has(), the family selector.

Custom Properties

CSS custom properties, also known as CSS variables, make it possible to define a value once in a stylesheet and reuse that in many places, reducing repetition. For example, you can define a common color or font size once in a stylesheet and use this across components. Basic support for custom properties has been in browsers for a long time. Interop 2023 focuses on the @property at-rule. @property represents a custom property registration in a stylesheet, allowing for property type checking, setting default values, and whether the property should inherit values. Learn more in @property: giving superpowers to CSS variables.

CSS masking

CSS masking provides methods to apply image effects, such as you might see in a graphics application, using CSS. Support for the various masking properties is patchy, making masking harder to use than it should be. This focus area will help developers to confidently use creative effects cross-browser. Learn more about applying effects to images in this article about image masking.

OffscreenCanvas

The <canvas> element and Canvas API provide a scriptable way to draw graphics to the screen. However, this can cause performance problems as the work is completed on the same thread as user interaction. OffscreenCanvas offers developers a canvas which is decoupled from the DOM and the Canvas API. Developers can also run rendering tasks in a Web Worker, separate from the main thread. Learn more about the performance benefits of OffscreenCanvas.

Pointer and mouse events

Pointer events are fired when interacting with a page using a mouse, pen, stylus, or touch screen. Mouse events are fired when using a mouse, but for historical reasons also for touch. This focus area covers the behavior of pointer and mouse interaction with pages, including how they interact with hit testing and scrolling areas. The focus area for 2023 excludes touch and stylus, due to a lack of Web Platform Tests in this area.

WebCodecs

The WebCodecs API provides methods for developers to access the individual frames of video, and chunks of audio. It offers access to codecs that are already available in the browser, and various interfaces to interact with them. The article Video processing with WebCodecs shows how to use the API to decode and render individual frames to a canvas.

Web Components

Web Components is an umbrella term for a number of technologies used to create reusable components, such as Custom Elements and Shadow DOM. Interop 2023 will focus on improving the interoperability of these foundational technologies.

Dashboard

Follow progress throughout the year on the Interop 2023 dashboard, where you can see current scores and the status of addressing these focus areas across all major browser engines.

The Scores for Interop overall: 62, Investigations: 0, and the scores per browser - 86 for Chrome and Edge, 74 for Firefox, 86 for Safari Technology Preview.
The Interop 2023 Dashboard (screenshot taken January 31st, 2023).

The Focus Area scores are calculated based on test pass rates. If you have feedback or want to contribute improvements to WPT, please file an issue to request updating the set of tests used for scoring.

A list of all Active Focus Areas together with browser scores and overall Interop score
All the Active Focus Areas and their overall Interop Score.

More about Interop 2023