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:
- Border Image in CSS
- Color Spaces and Functions in CSS
- Container Queries in CSS
- Containment in CSS
- CSS Pseudo-classes
- Custom Properties in CSS
- Flexbox
- Font feature detection and palettes
- Forms
- Grid
- :has()
- Inert
- Masking in CSS
- Math Functions in CSS
- Media Queries
- Modules in Web Workers
- Motion Path in CSS Animations
- Offscreen Canvas
- Pointer and mouse Events
- URL
- Web Compat 2023: A catchall focus area for small bugs that cause known site compatibility issues
- Web Codecs (video)
- Web Components
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 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.
