Baseline helps you understand which features are interoperable across modern browser engines and safe to use today—but how do you use Baseline in your projects? This page presents materials to help you decide how to use it, and some of the considerations you'll need to make in that journey.

Learn how Baseline works

Baseline works by offering clarity in messaging through three thresholds. These thresholds indicate the level of interoperability in the core browser set: Chrome for Android and desktop, Firefox for Android and desktop, Safari in macOS and iOS, and Edge. When you see these labels and symbols, you can quickly get a sense of how well-established web features are in modern browser engines:

Limited availability features are those that are not implemented in across the core browser set. Using these features will require some planning, possibly considering polyfills and progressive enhancement.
Newly available features are those that have been recently implemented in the core browser set. When you see that features are Newly available, you can expect that these features will be supported more broadly across browsers as time goes on.
Widely available features are those that have been interoperable in the core browser set for at least 30 months. When features are Baseline Widely available, you can expect that they are well-supported in the core browser set.

Before you can use Baseline in your project, you need to decide which Baseline target to use. A Baseline target is either a moving target that evolves to add more interoperable features over time, or a fixed target that will represent the latest set of interoperable features for a given year. Learn how you can select your Baseline target in a data-driven fashion in this guide.

Add Baseline to your project

Keeping track of which features are interoperable browsers can be a task all of its own, but by using Baseline into your project—as well as tools to help guide you in this—you can cut down on the work involved. Browserslist comes with several built-in queries that make using Baseline in your project as straightforward as it can be.

Add Baseline to your development linting and packaging tools with Baseline-specific queries now built into Browserslist.
Learn how to integrate Baseline into a web project using webpack, Babel, and PostCSS with this codelab.

Check out Baseline demos

If you're looking for a bit of inspiration to help you figure out how you might use Baseline in your projects, check out these demos of tooling integrations to get you going:

Learn how you can use Baseline with your webpack project.
Learn how you can use Baseline with your Rollup project.

Not all web features are interoperable, but that doesn't mean you can't use them—as a part of Baseline, we don't tell you whether to use non-interoperable features or not. That's a decision you need to make on your own—and we've published guidance for you on how to think about just that.

Create your own Baseline tools

Have you been looking for a specific tool for Baseline, but can't find it? Baseline tooling is a developing space, and it's possible what you need hasn't been developed yet. If you're the enterprising type, you can create your own tooling. These articles will show you how to use web feature data in a couple of ways to create tools you and others will find useful.

Learn about the Web Platform Dashboard and how you can query its HTTP API to help you build Baseline tools.
Learn how to use the data in the web-features npm package to create your own Baseline tools!