The problem ...

Attempting to make web apps browser compatible is not an easy task. Think about it: How many browsers are available out there? How many versions does each one have? Does my JS bundle need to support all these browsers? What are the web features that are safe to use that do not require fallbacks?

What tools available out there to help me reduce the hassle?

Web Baseline a concept introduced by Google to help developers understand which web features are safe to use across all modern browsers without requiring polyfills or fallbacks.

Web Baseline refers to the set of web platform features that are consistently supported by all core modern browsers (Chrome, Firefox, Safari, Edge) at a given point in time.

There are two main types of Baseline targets:

You can check all Web Baseline features by year

---

Do I need to check compatibility table for each feature I'm using?

Here comes the role of Browserslist ...

Browserslist is a tool that allows developers to specify the range of browsers their project should support. This configuration informs various tools like Babel, Autoprefixer, PostCSS, ESLint, Stylelint, and webpack, enabling them to adjust their behavior (such as adding polyfills or prefixes) based on the specified browser targets.

To simplify targeting widely supported web features, you can use the browserslist-config-baseline package. This package provides predefined configurations that align with the Web Baseline, allowing you to specify browser support based on Baseline levels.

in your package.json add the following:

Linting with Baseline

Tools like Stylelint can leverage the Baseline configuration to warn about CSS features not supported in the targeted browsers. By integrating browserslist-config-baseline, you can ensure that your stylesheets adhere to the desired level of browser compatibility.

Benefits of Using Baseline with Babel

Integrating Baseline with Babel (via @babel/preset-env) can lead to more efficient builds. By targeting only the necessary transformations for the specified Baseline, you can reduce the output size of your JavaScript files. For instance, targeting Baseline 2020 may result in significantly smaller bundle sizes compared to default settings, as fewer polyfills and syntax transformations are needed.

Bundle size example of using browserslist-config-baseline with Babel:

Before

After

Source: Use Baseline with Browserslist

How to choose your Baseline target ?

# Using npm
npm install browserslist-config-baseline@latest --save-dev
# Using yarn
yarn add browserslist-config-baseline@latest --dev
# Using bun
bun add browserslist-config-baseline@latest --dev

// This setup targets the Baseline Widely Available,
// which includes features that have been fully supported in all major browsers for at least 30 months.

{
  "browserslist": [
    "extends browserslist-config-baseline"
  ]
}

// If your project needs to support older browsers, you can target a specific Baseline year. 
// For example, to target the Baseline as of 2020:
{
  "browserslist": [
    "extends browserslist-config-baseline/2020"
  ]
}

// By default, the Baseline focuses on Chrome, Edge, Firefox, and Safari.
// To include additional browsers like UC Browser or QQ Browser, you can append /with-downstream to your configuration:

{
  "browserslist": [
    "extends browserslist-config-baseline/with-downstream"
  ]
}

// This inclusion ensures that your project accounts for a broader range of browsers, 
// particularly those prevalent in certain regions.