Chris’ Corner: Baseline

At this latest Google I/O, Rachel Andrew introduced a new concept they are spearheading called Baseline. It’s a visual thing to help developers understand browser support for features better. Here’s one:

It’s essentially a simplified browser support chart, featuring only Chrome, Edge, Firefox, and Safari. I’d argue Edge is just taking up space there as it’s-just-Chrome when it comes to web platform feature support, but Edge is still contributing to web platform stuff at a high enough level I think it’s probably a fair shoulder rub.

How do they get away with just a green-checkmark-or-not for browsers? They say it’s because we’ve reached the point where all the major browsers are now evergreen, as in, users don’t even have to update themselves, updates just arrive, so nobody has to think about versions much anymore. Sorta true, sorta not.

Presumably, it can also tell users when cross-browser support isn’t there yet, but I cannot find a single example of this. Presumably there is some red-ness and ❌ stuff happening. It’s tricky though isn’t it? I love the new View Transitions stuff (examples), but the main blog post on it doesn’t have a Baseline thingy. If it did, it would show that only Chrome has this feature, which would, I suppose, inform developers that the feature isn’t really ready to use. But is that true? Not really. If we avoid as much nuance as we possibly can with browser support, it should still be at least a three-answer game:

1. You can use it.
2. You can use it (but only with polyfills or progressive enhancement).
3. You can not use it.

Baseline feels more YES or NO to me, avoiding that really useful middle answer which is perfect for even cutting-edge stuff like View Transitions.

It’s also tricky to know you’re looking at the correct thing. Take Una’s blog post about Style Queries in CSS, a brand new thing. The Baseline at the top is all green good-to-go. But Style Queries are definitely not all-green good-to-go. That Baseline is talking about container queries not style queries, and that is entirely not obvious at a glance. Gonna be tricky to get all this right.

I am pretty stoked about this though:

We’ll be providing widgets that you can use on your own articles or libraries, indicating support for the Baseline feature set.

The Can I Use site is used now by tons of developers (and also gets much of it’s data set from MDN, just like Baseline does). I always thought it was weird they didn’t offer their own lightweight embeds for any site to use. Way back when, Ire Aderinokun created The CanIUse Embed which was awesome but I don’t think it was ever updated for the MDN-data-only charts. Maybe Baseline can be a good and official version of embeddable browser support charts. I would have used them at CSS-Tricks (probably) if they existed.

What they should do is make a Web Component! Wouldn’t it be cool to see like:

And that would spit out what web.dev and MDN are essentially showing? Ship it. Then everybody benefits. Here’s another great article on Style Queries. Sure would be nice to see right at the top what kind of support we’re looking at.