mdn-compat-browserlist

List all browsers compat data from MDN and filter with browserlist.

Features

• Support filter all browserlist queries
• List all browser unsupported features (including HTML, CSS, JavaScript, SVG, Web API, WebExtensions, etc.)
• List all alternative CSS properties (-webkit, -moz, etc.)
• List all browser supported features

Install

npm install mdn-compat-browserlist

yarn add mdn-compat-browserlist

Setup

1import { MdnCompat } from "mdn-compat-browserlist";
2import bcd from "@mdn/browser-compat-data";

Usage

Init MdnCompat with browserlist query and config (optional).

1const compat = new MdnCompat(["> 0.5%", "last 2 versions", "not dead"]);

Unsupport listing

compat.unsupport(bcd.css);
compat.unsupport(bcd.css.properties);
compat.unsupport(bcd.css.properties["justify-content"]);

Results

For listing unsupported features, the browser list in __browsers will contains the max version of the browser which filter by browserlist query.

Normal result sample

must contains __browsers key

1'box-shadow': {
2  __browsers: {
3    chrome: '100',
4    chrome_android: '100',
5    firefox: '99',
6    firefox_android: '99',
7    opera_android: '64',
8    safari: '15.4',
9    safari_ios: '15.4',
10    samsunginternet_android: '16.0',
11    webview_android: '100'
12  }
13}

Nested result sample

must NOT contains __browsers key

1'justify-content': {
2  flex_context: {
3    __browsers: { firefox: '99', firefox_android: '99' }
4  },
5  grid_context: {
6    __browsers: { ie: '11' }
7  }
8}

Alternative CSS properties

1compat.alternative(bcd.css.properties);
2compat.alternative(bcd.css.properties["justify-content"]);

Results

1compat.alternative(bcd.css.properties["font-smooth"]);
2
3// output
4["-webkit-font-smoothing", "-moz-osx-font-smoothing"];

1compat.alternative(bcd.css.properties["justify-content"]);
2
3// output
4{
5  flex_context: ["-webkit-justify-content"],
6  grid_context: []
7}

License

MIT License

CC0-1.0 License for MDN data