Simplify Browser Compatibility Decisions with Baseline

Sign in, get access to a computer system as a guest. Log in message on a digital device screen, closeup view of a browser.
Diana Le

UX Developer

Diana Le

Your digital product needs to stand out from the competition and attract users at the same time. We help our partners do just that. Book a free consult to learn how we can do it for you.

One of the most difficult decisions to make when new web platform features are released is when to start using them. While new features have allowed for faster development time and/or the ability to implement more versatile designs, they have always come with the caveat that if you use them too early, you could end up excluding and making the experience worse for users not on the latest browsers.

General Browser Strategies

The decision-making process on when to utilize new features within browsers has typically involved a combination of strategies such as:

  • Progressively enhancing the new features
  • Creating fallback support for older browsers
  • Running analytics on your site to determine what the most popular browsers are, and proceeding if your browsers are supported
  • Cross-checking Can I Use to roughly determine what a safe global percentage use is before implementing

The Clarification Baseline Brings

With the creation of Baseline by Google in 2023, there is now clarification for new web features and their browser support. Baseline tells you which features are safe to use across browsers. The list of features within Baseline is maintained by the W3C Web Developer Experience (WebDX) Community Group, which includes representatives from all the major browser vendors.

If a feature is considered Baseline, that means it is at minimum compatible without major issues in all the latest core browsers, which include:

  • Chrome (desktop and Android)
  • Edge
  • Firefox (desktop and Android)
  • Safari (macOS and iOS)

If your desired level of support is the latest versions of the core browsers, then you don’t need to do any additional research. However, if you need to implement a wider level of support, then you will need to pay attention to the specific stages of Baseline:

  • Newly Available: supported by the latest versions of the core browsers
  • Widely Available: 30 months after “newly available” and safe to use on most sites

Planning Ahead

If your desired feature’s Baseline status is “widely available,” then you can consider that feature safe to use without browser fallbacks. If the status is “newly available” and your application or site isn’t live yet, it’s possible that the feature may become “widely available” by the time the application is released. Fortunately, Baseline provides the month and year of when each feature becomes “newly available”, so you can do the calculations yourself to determine whether or not you can use that feature.

For example, let’s say you want to use CSS @container queries. This feature became Baseline “newly available” in February 2023, which means it was working in all the latest core browsers at that time.

Screenshot of @container on MDN Docs showing it is Baseline Newly Available as of February 2023

This feature will become “widely available” in August 2025, 30 months after February 2023. This means if your application is releasing in August or later of 2025, then the feature will be safe to use in all browsers by then.

The Standard Going Forward

Baseline information is being added to MDN Web Docs, Can I Use, and web.dev for developer reference. Baseline support information, such as widgets, will also be available to add to documentation for your own tutorials or libraries so that other people will know immediately if they can use them.

If you decide to implement features from Baseline, everyone from other developers to stakeholders will be able to understand at-a-glance the level of browser support in your web site or application. This is especially helpful with how often evergreen browsers are updating and with the frequency of new features getting released now. You no longer have to tie your compatibility to specific browser versions.

Following Baseline will also:

  • Keep design implementations more consistent across browsers because you will know which features are compatible
  • Help developers decide when to start learning and using new features because you will know when features will become safe to use
  • Reduce QA browser issues because features that are Baseline are already confirmed to have no major issues

This level of shared clarity and simplification for decision-making regarding browser support has been desired by web developers for years. With Baseline, with today’s browser vendors, and with the contributions from the community, the process is now much clearer than it’s ever been.

More information:

Newsletter

Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box