At the end of last year Interop 2023 wrapped up. This effort from browser vendors and other parties aims to create a more interoperable web, with fewer differences between browsers to trip you up. This post shares the final results, and also some of the Chrome team's favorite features.
The final scores
It's great to see so much green, compare this to the scores at the beginning of 2023, and we've come a long way, with every browser seeing a huge increase in the score.
What are we excited about?
Find the full list of focus areas for 2023 on the Interop 2023 Dashboard. Some focus areas—such as :has(),
container queries, and the inert attribute, covered an entire feature. Others,
for example the work on Flexbox, dealt with some subtle test failures in an
existing cross-browser feature.
:has()
"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."—Thomas Steiner, Developer Relations Engineer on Chrome.
There has been a huge amount of excitement about the functional pseudo-class
:has(), because it brought to the platform a key request from developers. It
gives you a parent selector— you can select an element based on things that are
inside it. However, it can be used for so much more. As explained in CSS wrapped, you can select
much more than a parent element, and even do sideways selections.
:has() demo: DockUna Kravets, a Developer Relations Engineer on the Chrome team explains:
"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()."
As Philip Jägenstedt, a software engineer on Chrome reminded me, :has() was
the top feature that developers struggled with due to lack of support when asked
in the State of CSS survey in 2023.
So we're not the only people excited to have this available.
You can listen to Una, along with Adam Argyle, talk about has() on The CSS Podcast, then learn more about
:has() from these posts from around the web community.
Container queries
2023 turned out to be a great year for things once deemed impossible. In
addition to :has(), the web platform finally gained cross-browser support for
container queries. You've been asking for container (or element) queries since
2011, only a year after the concept of responsive design was introduced. Now,
it's here, and available in all major browser engines.
Una and Adam discussed container queries in the CSS Podcast, and Una introduced them in an episode of Designing in the Browser. The community has also been sharing plenty of tips and ideas.
Subgrid
Subgrid is my favorite inclusion in Interop 2023. It lets you define a grid on a parent element, and then use the track sizes that are defined on that parent, on grids nested inside that main grid. Thanks to the work of Microsoft Edge's web platform engineers, subgrid became available in all major browser engines during 2023, to boost the score for Chrome, and bring this exciting feature to everyone.
Chrome Developer Relations Engineer Adriana Jara told me how grid and subgrid made creating a great UI easier,
"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."
I wrote up some use cases for subgrid in an article for 12 Days of Web and as with the other features in this post, you can listen to a CSS podcast episode all about it. There are also so many resources from around the web.
- Learn CSS subgrid
- Video: Easy and more consistent layouts with subgrid
- Laying out content with CSS grid and subgrid
Color spaces and functions
It was no surprise that Chrome CSS developer Adam Argyle told me that color spaces and functions was his favorite feature,
"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."
Adam has been creating some amazing content to help you understand these new features, such as the High Definition CSS Color Guide and gradient.style, and talking about color functions on the CSS Podcast.
It's exciting to have these features available in all major browser engines. Find out more in these great articles.
Looking forward to Interop 2024
Once features become interoperable, they become part of Baseline—newly available. It's exciting to see the number of new features that have entered this group during 2023, in no small part due to the work of everyone involved in Interop 2023. It will very soon be time to announce the selected focus areas for 2024, and we're all looking forward to seeing how much better the web platform can become this year.