CSS Interop is Awesome!
When website developers debug a styling issue, we often ask ourselves (several times, in a tone of increasingly frustrated disbelief): Why is it doing that?
It’s ultimately very satisfying when the problem is solved with a better understanding of CSS specifications. You figure it out; you bank the knowledge for next time; you move on with your day. But that day’s going to get a whole lot worse if the problem is browser implementation. You can’t move that mountain. You have to hack your way around it or retreat to something that works cross-browser.
To anticipate “doesn’t look right in [insert browser name here]” feedback, one of the first sites I bookmarked when learning front-end development was caniuse.com. It’s like a Google search specific to browser support for a feature. Consider the results for CSS Subgrid:
The feature works in some stable browsers, but not all. Can I use this feature in production? Not really. If there’s a decorative enhancement possible for Safari and Firefox users, sure. But if fundamental layout positioning will create a poor experience for all Chrome and Edge users, forget about it.
I can’t force people who want to visit my site to do so with a specific browser. Aside from being something they may not have control over (if they’re on a library computer, for example), it goes against the ethical principle that the Web is multi-browser, multi-OS and multi-device. Generally speaking, websites need to work for everyone, on everything.
That makes cross-browser inconsistencies a huge headache for website developers, leaving us a limited toolset to work with. Browser vendors are well aware of this. As of 2021, they decided to publicly work together to do something about it. Compat 2021 involved 5 focus areas and was successful enough that Interop 2022 expanded to 15 focus areas. Last week saw the announcement of Interop 2023, which combined a few carry-overs and several new additions to make a total of 26 focus areas.
What does this mean for browser developers?
Well, it undoubtedly makes their job harder. They have agreed to spend time discussing with their competitors what features would most benefit users and pursuing shared priorities in developing those features to a reliable standard. These decisions are time-consuming and inevitably involve compromise. But, the hope is this collaboration will make their work more effective. Providing support for features no one uses is depressing. This alignment should encourage greater application of new features.
What does this mean for website developers?
Let’s take another look at that Subgrid support.
Firefox was the first to release support in December 2019. Then nothing much happened for two years. Two years! When Interop 2022 named Subgrid as a focus area, Safari released support in September of that same year. The Chromium bug is now very active and Edge announced it would be shipping support early 2023. This is fantastic progress and far from an isolated example.
Quite frankly, I’ve been amazed at how often I’ve looked at caniuse.com over the past year and seen uniform support across the major browsers*. Can I use aspect-ratio? Yes. Dynamic viewport units? Yes. Cascade layers? Yes.
Combining user-first thinking with public collaboration for impactful results makes CSS Interop truly awesome**. A huge thanks to all those who develop browsers and participate in these discussions. The Web is a better place because of you.
Can I help?
If you are a developer, like myself, wondering how you might contribute to the awesomeness, here are a few thoughts:
- Participate in the next State of CSS survey to help identify pain points
- File browser bugs (and star existing ones) to record implementation issues
- Write web compat tests to measure the focus area progress
- Use the new stuff to show it matters! (Providing sensible fallbacks where appropriate, of course)
Official Interop 2023 Announcements:
Notes
* IE, officially out-of-support as of June 15, 2022, is no longer a safe browser option. It should still receive basic consideration as there will be a long tail of people using this browser (or IE Mode on Edge) for a variety of reasons, but newer builds can focus on the actively developing browsers.
** To be completely accurate, Interop extends beyond CSS. It considers HTML, JS, and Web APIs as well.