Microsoft Edge is pleased to, once again, join Apple, Mozilla, Google, Bocoup, and Igalia in announcing the launch of Interop 2024.
This is a continuation of a multi-year cross-organization project which 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.
Since its inception with the Compat 2021 effort, and then with the Interop 2022 and Interop 2023 efforts, the project brought about a number of improvements to the web platform. This year again, we’re working on another set of features and compatibility fixes that will help with your day-to-day web development tasks.
Layout
It’s fair to say that Flexbox and Grid have revolutionized the way we create layouts on the web and removed the need for other complex or less responsive techniques. To make these features work as best as they can, we, together with our Interop partners, have worked every year since 2021 on reducing the number of browser inconsistencies when using Flexbox and Grid. But some minor differences persist and we’re making this an Interop focus area again this year.
While we’re on the topic of CSS layout, did you know that Subgrid is now supported across all major browsers? Firefox and Safari both implemented it in 2022, and Microsoft contributed support for it in Chromium in 2023, making Subgrid available in Chrome, Edge, and other Chromium-based browsers.
CSS architecture
The way we write and organize our CSS code has changed a lot recently. Thanks to the Interop project, building blocks like Cascade Layers, the :has() pseudo-class, and Container Queries are now interoperable across browsers, and make it possible to write more concise and clearer code that also adapts better to your users’ devices.
This year, we’re continuing to improve in this area by turning our attention to CSS nesting. CSS nesting helps make code more readable, modular, and shorter by making it possible to nest child CSS rules in parent CSS rules.
While CSS nesting is supported already, we want to ensure that it works in the exact same way across all browsers.
HTML elements
The dialog HTML element is great. It makes it possible to easily work with dialog boxes in a webpage without making your code more complex and having to re-implement focus handling and accessibility. It was first introduced in Chrome and was later part of the Interop 2022 project. It’s now possible to use the dialog element in all browsers.
This year, the Interop project sets its focus on a related HTML feature, one that will also make a lot of complicated code unneeded: the Popover API.
With the Popover API, you can display content above other content without it being a z-index nightmare, without being cut off by the overflow behavior of a parent element, and without needing JavaScript code. The API is available in Chromium-based browsers, Safari, and as a preview in Firefox.
This year, the Interop project is focusing on making the Popover API work the same across implementations.
At Microsoft, we’re very excited about this and especially about the positive impact it will have on the upcoming customizable <select> element, a feature we’ve originally prototyped.
Other focus areas
On top of the above highlights, here is the full list of Interop 2024 focus areas:
- 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
If you want to see even more details about each area and follow our progress, check out the Interop 2024 Dashboard.
We’re excited to be part of the Interop project again this year and look forward to the improvements to the web platform. More importantly, we look forward to the great web experiences you all will be able to build with these additional cross-browser features.
Source: Windows Blog
—