Google has this little UI widget called Baseline that is intended to show you when Web Platform features are supported across a “baseline” of browser support.
I’m a little confused by it. It could just be me. I suppose I’m looking either to be enlightened, or to offer this as feedback in case others share my confusion.
Baseline looks like this:
ERRRR wait. No. That’s not baseline, that’s just a browser support widget thingy. I think it’s kinda conveying the same information, only better because it has more detail than Baseline, but I think this is actual the Baseline widget:
This UI widget is fairly new, and it’s used in a variety of places:
- Google’s own sites, like web.dev, developer.chrome.com etc.
- MDN
- caniuse
It’s neat that it has been adopted across several important web developer-focused sites.
As best I can tell, Baseline is only shown by web platform features which meet the baseline, that is, are decently well-supported. You’ll never see a Baseline widget with big red ❌’s on it saying the feature isn’t supported. Do I have that right?
The Root of My Confusion
So, as a developer hopping around developer documentation sites, I know:
- If I 👁️ see the Baseline widget, I can go “Cool! This feature is pretty well supported. I’ll look at the details, but I can probably use this.”
- If I 🚫👁️ don’t see the Baseline widget, I can go “Uh oh! This feature isn’t very well supported, it doesn’t meet the baseline. I probably can’t use this”
Except… I’m really just kidding about that second point. This widget hasn’t rolled out absolutely everywhere. It’s not even particularly easy to find examples of when specifically looking on sites that have it. Which is fine, I get that big initiatives take time to roll out.
So we’ll never be able to say: “I don’t see a Baseline widget, this feature isn’t well supported”. We’ll just be in the same position we are now: “I’ll have to go research the browser support for this on my own.”
The end result is that if we see the Baseline widget, we can get stoked. It’s a Badge of Ready to Use. Do I have that right? If I do, I feel like that’s… OK… but could be better.
Opinions
I remember Andrew Walpole once saying something like I just need to know which of these things is true:
- I can use the feature
- I can use the feature, because it has a polyfill.
- I can’t use the feature.
I think Baseline would be more useful if it was included near any Web Platform feature and said which one of those things applies. It’s such a little widget! I should go everywhere.
The little browser support chart Google already uses is closer to that, listing the earliest version a feature is supported in (or that it isn’t!) and a link to a source for more detail.
Maybe some kind of hybrid is warranted. Maybe the browser detail isn’t as needed if the support is deep across the board, and only is shown in non-support situations. I wouldn’t want to advocate for too much complexity, as there is value in the simplicity of Baseline, but it doesn’t even get into mobile browsers which seem pretty relevant to web developers. Not to mention the browsers I need to support might be different than the browsers you need to support and a widget probably will never be able to address that (hence the need to link out for detail).
They did just recently update the definition of Baseline (saying when a feature is “newly available” vs “widely available”), so there is dedication to simplicity here trying to be balanced with at least some level of nuance.
The legende for the Baseline icons used in CSS Wrapped is explained at the top of the post.
https://developer.chrome.com/blog/css-wrapped-2023#:~:text=Look%20out%20for%20the%20new%20Baseline%20badges%20next%20to%20the%20feature%20headers!
Furthermore, following the Baseline indicator is a BrowserCompat block to make clear which versions support the feature.
Ah, I totally didn’t understand that. So Baseline isn’t always a widget thingy, sometimes it’s only an icon. Not trying to be difficult here but to me that’s even more confusing.
I totally get the “BrowserCompat” block, that’s very straightforward.
The icon is part of the widget. It’s the visual cue to quickly grasp what state the feature is at. Basically there are three states:
MDN has a good explanation for each of these: https://developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/#updated_widget
For the CSS Wrapped post we re-used the icon as indicators next to the name of the feature. Perhaps this could have been done better by including the full widget instead of only the icon.
“Limited availability” is an improvement for sure.