Browsing MDN docs you might encountered this widget:

But what does it actually mean and why should you trust it?
Let's figure that out.

Background

With the web platform constantly evolving and browsers undergoing rapid innovation, developers find it challenging to keep pace with the changes. Moreover, there's a lack of a shared vocabulary for discussing commonly available web features.

One of the solutions to address this issue became BaseLine.

Definition

Official definition is the following:

Baseline identifies web platform features that work across browsers. Baseline helps you decide when to use a feature by telling you when it is less likely to cause compatibility problems for your site's visitors.

A Baseline feature, whether it's an API, a group of CSS properties, or a JavaScript syntax, functions reliably across numerous popular desktop and mobile browsers like Chrome, Edge, Firefox, and Safari.

These features are characterized as either newly accessible in the latest stable browsers or as widely available with ongoing support across different versions.

Badges Concept

Basically, BaseLine is presented as a set of widgets where each of them has a specific meaning:

• If you see a widely available Baseline badge, then you can trust that the feature has a consistent history of support in each of the Baseline browsers. A widely available feature has been in multiple browsers for years. It works with many browsers and devices, even ones that aren't yet up to date with the latest browser releases.

• If you see a newly available Baseline badge, then you can trust that the feature works in at least the latest stable version of each of the Baseline browsers and often more. A newly available feature works in the latest browsers, but may not work with older browsers and devices. Consider your site's audience carefully before using a newly available feature.

• If you see a limited availability badge, then that feature is not Baseline. Do more research and testing with your site's users before relying on that feature, or wait for it to become Baseline.

Browser support

According to the documentation at the time of publishing this article, Baseline tracks availability with the following browsers:

• Apple Safari (iOS)
• Apple Safari (macOS)
• Google Chrome (Android)
• Google Chrome (desktop)
• Microsoft Edge (desktop)
• Mozilla Firefox (Android)
• Mozilla Firefox (desktop)

What About CanIUse?

We do have a great tool such as CanIUse and of course, BaseLine is not going to replace it.

Baseline serves as a general reference for support and may not address every scenario. If your website must function with older devices or browser versions not included in the Baseline status, you might need to conduct your own research or testing.

If Baseline doesn't fit your needs, you must consult with CanIUse before using a feature.

Conclusion

I am excited about how the community is becoming more and more united and we have so many different tools to get rid of the confusion and make as less mistakes as possible. BaseLine is a trustworthy source and I believe that it is only going to improve.

I hope now you understand a little bit more about it and might find it practical in your daily work.

Happy coding!

References

• Glossary
• Evolution on MDN