Interop 2023 wraps up with strong cross-browser gains
Interop 2023, the cross-browser initiative aimed at stamping out compatibility gaps, has concluded. The final results show meaningful progress across all participating engines. Compare the closing numbers with the start-of-year scores and the improvement is clear: significantly more green across the board.
Each engine posted a substantial increase in its interop score. The full breakdown of focus areas is on the Interop 2023 Dashboard. Some items on the list, such as :has(), container queries, and the inert attribute, covered an entire feature end to end. Others—like the Flexbox work—addressed subtle test failures within a long-established feature.
Features that changed the game
A few additions stood out this year, both for their long wait times and for the breadth of use cases they unlock. Here's what the Chrome team was most excited to see ship everywhere.
The :has() parent selector arrives
Thomas Steiner, Developer Relations Engineer on Chrome, summed up the mood: "Finally a parent selector for CSS! This has been requested almost from day one, and finally having it in all browsers is fantastic and means developers need to run less JavaScript to emulate this selector."
While :has() is often described as a parent selector, it's far more flexible. As detailed in CSS wrapped, the functional pseudo-class also enables selections of siblings and other sideways traversals. Una Kravets, Developer Relations Engineer on the Chrome team, expanded on that point:
"The:has()selector is one of the most flexible and powerful newly available CSS features. With it, you can style any parent based on the presence, state, or even number of child elements. But what's more is that you can combine it with other combinators to style siblings and really gain a new level of style control over your UI. It's such a flexible feature! I've already seen a ton of cool demos that reduce the need to rely on additional scripting when taking advantage of the power of:has()."
Chrome software engineer Philip Jägenstedt pointed out that :has() was the top feature developers struggled with for lack of support in the 2023 State of CSS survey. For more context, Una and Adam Argyle discuss has() on The CSS Podcast. The community has also published practical write-ups like Learn CSS :has() selector by examples, Locking scroll with :has(), and A use-case for CSS :has().
:has() demo: DockContainer queries finally go cross-browser
Container queries were a concept developers had been requesting since 2011, not long after responsive design itself was introduced. With Interop 2023, they became available in all major browser engines. For the community, that marks the end of a long wait for a feature that changes how responsive components can be built. Una and Argyle covered the feature on the CSS Podcast, and Una introduced it in an episode of Designing in the Browser. Community resources include Container queries are finally here from Ahmad Shadeed, and Container Query Units and Fluid Typography.
Subgrid completes the CSS grid toolbox
Subgrid lets a nested grid adopt the track sizing defined on its parent grid, which simplifies aligning inner layouts with the outer structure. Thanks to work by Microsoft Edge's web platform engineers, subgrid became available in all major engines during 2023. Chrome Developer Relations Engineer Adriana Jara valued it for its accessibility to newcomers:
"I am terrible at visuals, layouts, keeping a consistent look, and adapting to screens. But with grid and subgrid somehow creating a design that works across multiple screen sizes and adapts automatically to content is possible! It's my favorite because it tackles a basic need to create a website that gives users a decent experience without a ton of expertise."
Further reading includes Learn CSS subgrid, the video Easy and more consistent layouts with subgrid, and Laying out content with CSS grid and subgrid. Rachel Andrew also wrote about subgrid use cases for 12 Days of Web.
Richer colors with new spaces and functions
Interop 2023 also standardized support for advanced color spaces and functions. Adam Argyle explained why that mattered to him:
"Goodbye awkward HSL channel value variable math; Hello just-in-time color variant one-liners. The new color spaces and functions don't just solve color workflow issues either, they bring access to more advanced, reliable and vibrant colors and gradients. What's not to love about unlocking some abilities while simultaneously making your life easier. Sprinkle in that Interop effort seasoning, and this dish is colorfully delightful."
Argyle has published the High Definition CSS Color Guide and the gradient.style tool, and discussed color functions on the CSS Podcast. Useful community articles include Mixing colors with CSS and Color formats in CSS.
What becomes interop-tested becomes baseline
When a feature works consistently across engines, it can enter Baseline as newly available. The roster of features that reached that status during 2023 is largley owed to the participants in Interop 2023. The focus areas for Interop 2024 will be announced shortly, raising the question of how much more friction the group can remove from the platform this year.
