Browser makers Apple, Google, Microsoft and Mozilla, along with consulting firms Bocoup and Igalia, recently announced Interop 2024, a project to promote web browser interoperability. Interop 2024 includes 17 focus areas that address appearance, style, user interaction issues, and more.
Google’s Rachel Andrew explained Interop’s goal this way:
At its core, Interop is a comprehensive set of tests and benchmarks designed to assess the compliance of individual browsers based on our shared commitment to web standards. Ultimately, Interop aims to eliminate inconsistencies between browsers and foster a unified vision within the industry.
From Microsoft’s side, – Patrick Brosset and Dan Clark commented:
[Interop 2024] is the continuation of a multi-year inter-organizational project [that] it acknowledges the pain points of web developers and aims to make the web platform more pleasant to work with. We do this by implementing frequently requested features and solving the most common cross-browser compatibility issues.
Interested readers can explore the 17 selected focus areas by visiting the Interop 2024 dashboard. The dashboard provides details on features and work required, along with current results for each browser. Readers can also review the Interop 2023 dashboard to see areas of focus last year and gain insight into the progress made. Interop 2024 continues to focus on the way web pages are laid out, structured using CSS and built using HTML elements.
CSS Nesting is one of the focus areas of Interop 2024. CSS Nesting supports creating style sheets that are easier to read, more modular, easier to maintain, and smaller. Although all browsers support CSS Nesting, there are some differences in implementations due to changes in the specification. Interop 2024 aims to ensure that all browsers adhere to the same specification.
parent
child
parent
& child
parent
parent child
(source: MDN web documents)
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 interactive elements for users such as action menus, custom “toast” notifications, form element suggestions, content selectors, or a tutorial UI.
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>
(Source: MDN web documents)
One Reddit user gave an example of how Interop efforts are pushing the web forward:
The
popoveris interop 2024 focus. Nice! I really want to start using this somewhere, but without Firefox support it’s still among the cool things I can’t use in a bunch of products.
Other Reddit users lamented the lack of transparency in the process of selecting focus areas. In particular, some developers have pointed out that JPEG XL is not accepted in the list. One user commented:
Disappointing, but not unexpected. Let’s now use this year to implement JXL images on our sites, promote the format and help improve the implementation. If it gets used enough or becomes a popular enough request, eventually it will be in their best interest to provide it. It took more than a decade to have an “has” selector, but now we have it.
Readers are welcome to read the respective blogs of Mozilla, Google, Microsoft, Apple, Bocoup and Igalia.