Major Browser Vendors Announce Interop 2024 to Solve Incompatibility Issues

Browser makers Apple, Google, Microsoft, and Mozilla, alongside consultancies Bocoup and Igalia, recently announced Interop 2024, a project to promote web browser interoperability. Interop 2024 includes 17 focus areas addressing layout, styling, user interaction concerns, and more.

Google’s Rachel Andrew explained Interop’s goal as follows:

Interop, at its core, is a comprehensive series of tests and benchmarks designed to evaluate the compliance of individual browsers based on our joint commitment to web standards. Ultimately, Interop strives to eliminate inconsistencies between browsers and foster a unified vision within the industry.

On Microsoft’s side, Patrick Brosset and Dan Clark commented:

[Interop 2024] is a continuation of a multi-year cross-organization project [that] acknowledges web developer pain points and aims at making the web platform more pleasant to work with. We’re doing this by implementing frequently requested features and fixing the top cross-browser compatibility issues.

Interested readers may explore the 17 selected focus areas by visiting the Interop 2024 Dashboard. The dashboard details the features and work needed, along with the current scores for each browser. Readers may also review the Interop 2023 dashboard to see the focus areas of last year and get a sense of the progress made. Interop 2024 continues to focus on how web pages are laid out, structured with CSS, and built with HTML elements.

CSS Nesting is one focus area of Interop 2024. CSS nesting supports the creation of stylesheets that are easier to read, more modular, more maintainable, and smaller. While all browsers support CSS Nesting, there are some differences in implementations due to changes to the specification. Interop 2024 seeks to ensure that all browsers abide by the same specification.

/* Without nesting selector */
parent {
  /* parent styles */
  child {
    /* child of parent styles */
  }
}
  
/* With nesting selector */
parent {
  /* parent styles */
  & child {
    /* child of parent styles */
  }
}

/* the browser will parse both of these as */
parent {
  /* parent styles */
}

parent child {
  /* child of parent styles */
}

(source: MDN web docs)

The Popover API is also an important focus area of Interop 2024. The Popover API provides developers with a standard and flexible mechanism for displaying popover content on top of other page content. Typical use cases for the popover API include user-interactive elements like action menus, custom “toast” notifications, form element suggestions, content pickers, or teaching UI.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

(Source: MDN web docs)

One Reddit user provided an example of how Interop efforts were pushing the web forward:

The popover is an interop 2024 focus. Nice! I really want to start using this in places but without Firefox support it’s still in the cool things I can’t use in prod pile.

Other Reddit users regretted the lack of transparency in the process that selects the focus areas. In particular, some developers singled out that JPEG XL was not accepted in the list. One user commented:

Disappointing, but not unexpected. Let us now use this year to deploy JXL images to our sites, promote the format, and help improve the implementation. If it is used enough or enough of a popular request, eventually it will be in their interests to provide it. The “has” selector took over a decade, but we have it now.

Readers are welcome to read the respective blog posts of Mozilla, Google, Microsoft, Apple, Bocoup, and Igalia.