Search

Minor Confusion about Baseline

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:

From CSS Wrapped 2023

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:

From caniuse

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.

From CSS Wrapped 2023

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.

Need front-end development training?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

4 responses to “Minor Confusion about Baseline”

  1. Avatar Bramus says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *