Following on from the success of Interop 2022 and Interop 2023, we are excited about the opportunity to collaborate once again with all key browser vendors and other relevant stakeholders. Our shared objective is to enhance interoperability between web platforms, thereby simplifying the work of developers and enriching the overall experience for internet users.
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.
For Interop 2024, there was a public proposal process to source the initial list of features. From that list, all parties have worked together to create the list of focus areas for 2024. The following list includes the areas where we hope to see 100% of the selected tests passing by the end of the year.
All focus areas for 2024
Interop 2024 includes 12 new focus areas, plus 5 carried over from 2023 with some fixes still to be made. The areas are:
- Accessibility
- CSS Nesting
- Custom Properties
- Declarative Shadow DOM
- font-size-adjust
- HTTPS URLs for WebSocket
- IndexedDB
- Layout
- Pointer and Mouse Events
- Popover
- Relative Color Syntax
- requestVideoFrameCallback
- Scrollbar Styling
- @starting-style and transition-behavior
- Text Directionality
- text-wrap: balance
- URL
To view details of all the focus areas, visit the Interop 2024 Dashboard, where details of the features and work needed is shown, along with the current scores for each browser. In the rest of this article, you can find out about some of the areas where Chrome needs to do the most work to reach 100%.
Nesting
The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.
CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.
CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.
While all browsers support CSS Nesting, there are some differences in implementations due to changes to the specification. During Interop 2024, the aim is to ensure all browsers follow the current specification.
Learn more about CSS Nesting, and discover a key update to the specification that enables nesting of bare element tag names.
text-wrap: balance
The balance value of the CSS text-wrap property indicates to the browser that you would like it to balance the lines of text. It's typically used in headings or other short text sections to avoid typographic widows.
Browsers differ in their support for the various longhand and shorthand versions of this property. During Interop 2024, we aim to make these interoperable.
Balancing headlines and other short text sections is a feature frequently requested by developers, learn more about it in CSS text-wrap: balance, the post an end to typographic widows on the web, or CSS Text Balancing with text-wrap: balance.
HTTP(s) URLs for WebSocket
The WebSocket constructor originally required ws: and wss: URLs,
preventing the use of relative URLs and resulting workaround code.
The specification has been updated to allow http(s) schemes, and therefore relative URLs.
These are normalized to ws: and wss:.
During Interop 2024, we'll update our implementation to support http(s) schemes.
Relative Color Syntax
Relative Color Syntax is defined in the CSS Color 5 specification, and provides a way to manipulate colors in CSS. For example, darken, lighten, or desaturate a color.
Relative Color Syntax is roughly interoperable,
but browsers haven't implemented the currentcolor keyword;
these tests are included in Interop 2024.
Learn about all the things you can do with this feature in CSS relative color syntax.
The Interop 2024 dashboard
As in previous years, the current scores for experimental and stable browser releases will be published on the dashboard, so you can see how the scores are shaping up.
We're really excited to see how much improvement can be made across all of the focus areas this year.