Using Baseline: A glance at Cross-Browser Feature Support

About Baseline

When developing WebApps we’d like to avoid implementing features that aren’t supported across all the browsers a user could access our site with. After all we don’t want them to find a broken component because browser A does not support feature B yet (I’m looking at you, InternetExplorer).

In the past I’ve frequently been stumbling across issues like this, but with IE shutting down in 2022 the teams behind the major browsers reached a consensus to simplify the way we can access information about browser support and - in conjunction with the interop project - vastly improve on rollout times for new features among them.

This was when we first heard about “Baseline” by the Chrome team which has since been moved over to the W3C WebDX Community Grouped and became a common sight for developers when researching web feature support. You might have come across any of the following Baseline badges when researching new features:

• Limited availability (Not yet available in the main browsers)
• Newly available (Interoperable across the main browsers)
• Widely available (It is generally safe to use. This is set at 30 months after being newly available)

These provide a broad overview of feature support among the following browsers (and their respective platform), which at the time of writing make up a market share of >92%:

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

Unfortunately baseline does not cover support for assistive technologies. If you need to comply with Web Content Accessibility Guidelines, you'll need to do additional research into feature support.

For detailed information about accessibility support, consult resources like the Web Accessibility Initiative (WAI) guidelines and test implementations with various screen readers and assistive technologies. This extra step ensures that web applications are not only technically supported across browsers but also truly accessible to all users.

Interpreting the Baseline badges

When implementing new web features in your project, start by checking the feature's Baseline status in the MDN or web.dev documentation. The Baseline badge will show you the current support level for that feature.

The MDN documentation of the CSS color-mix function, as an example, is currently marked with the following banner:

The baseline badges could be interpreted in the following ways:

Features marked as "Widely available" can be implemented with confidence, as they have proven browser compatibility.

For "Newly available" features, you'll need to evaluate whether the 92% browser coverage aligns with your target audience's needs. It is worth mentioning that the true coverage may be notably smaller due to the people still using older and unsupported browser versions.

When encountering features with "Limited availability", either:

• Implement progressive enhancement with fallbacks, like using a fallback color, in case color-mix isn't supported
• Choose an alternative, more widely supported feature, like mixing colors with JavaScript or using SCSS macros instead of color-mix
• Wait until the feature reaches "Newly available" status

This approach significantly reduces the time spent on cross-browser compatibility research and helps maintain a consistent development experience across different browsers.

To summarize

Baseline simplifies cross-browser feature implementation by providing standardized support information, reducing the need to check multiple sources. Developers can use Baseline's availability badges to assess feature support across major browsers and make informed decisions about implementation.