@mdn/browser-compat-data
https://github.com/mdn/browser-compat-data
The browser-compat-data
("BCD") project contains machine-readable browser (and JavaScript runtime) compatibility data for Web technologies, such as Web APIs, JavaScript features, CSS properties and more. Our goal is to document accurate compatibility data for Web technologies, so web developers may write cross-browser compatible websites easier. BCD is used in web apps and software such as MDN Web Docs, CanIUse, Visual Studio Code, WebStorm and more.
Read how this project is governed.
Chat with us on Matrix at chat.mozilla.org#mdn!
Installation and Import
NodeJS
You can install @mdn/browser-compat-data
as a node package.
npm install @mdn/browser-compat-data
yarn add @mdn/browser-compat-data
Then, you can import BCD into your project with either import
or require()
:
import bcd from '@mdn/browser-compat-data' with { type: 'json' };
const { default: bcd } = await import('@mdn/browser-compat-data', {
with: { type: 'json' },
});
import bcd from '@mdn/browser-compat-data' assert { type: 'json' };
const { default: bcd } = await import('@mdn/browser-compat-data', {
assert: { type: 'json' },
});
import bcd from '@mdn/browser-compat-data/forLegacyNode';
const { default: bcd } = await import('@mdn/browser-compat-data/forLegacyNode');
const bcd = require('@mdn/browser-compat-data');
Deno/Browsers
You can import @mdn/browser-compat-data
using a CDN.
import bcd from 'https://unpkg.com/@mdn/browser-compat-data' with { type: 'json' };
const { default: bcd } = await import(
'https://unpkg.com/@mdn/browser-compat-data',
{
with: { type: 'json' },
}
);
import bcd from 'https://unpkg.com/@mdn/browser-compat-data' assert { type: 'json' };
const { default: bcd } = await import(
'https://unpkg.com/@mdn/browser-compat-data',
{
assert: { type: 'json' },
}
);
const bcd = await fetch('https://unpkg.com/@mdn/browser-compat-data').then(
(response) => response.json(),
);
Other Languages
You can obtain the raw compatibility data for @mdn/browser-compat-data
using a CDN and loading the data.json
file included in releases.
https://unpkg.com/@mdn/browser-compat-data/data.json
Usage
Once you have imported BCD, you can access the compatibility data for any feature by accessing the properties of the dictionary.
const support = bcd.css.properties.background.__compat;
const support = bcd['api']['Document']['body']['__compat'];
Package contents
The @mdn/browser-compat-data
package contains a tree of objects, with support and browser data objects at their leaves. There are over 15,000 features in the dataset; this documentation highlights significant portions, but many others exist at various levels of the tree.
The definitive description of the format used to represent individual features and browsers is the schema definitions.
Apart from the explicitly documented objects below, feature-level support data may change at any time. See Semantic versioning policy for details.
The package contains the following top-level objects:
__meta
An object containing the following package metadata:
version
- the package versiontimestamp
- the timestamp of when the package version was built
Data for Web API features.
Data for browsers and JavaScript runtimes. See the browser schema for details.
Data for CSS features, including:
at-rules
- at-rules (e.g. @media
)properties
- Properties (e.g. background
, color
, font-variant
)selectors
- Selectors (such as basic selectors, combinators, or pseudo elements)types
- Value types for rule values
Data for HTML features, including:
elements
- Elementsglobal_attributes
- Global attributesmanifest
- Web App manifest keys
Data for HTTP features, including:
headers
- Request and response headersmethods
- Request methodsstatus
- Status codes
Data for JavaScript language features, including:
builtins
- Built-in objectsclasses
- Class definition featuresfunctions
- Function featuresgrammar
- Language grammaroperators
- Mathematical and logical operatorsstatements
- Language statements and expressions
Data for MathML features, including:
Data for SVG features, including:
attributes
- Attributeselements
- Elements
Data for WebAssembly features.
Data for WebDriver features.
Data for WebExtensions features, including:
api
- WebExtension-specific APIsmanifest
- manifest.json
keys
Semantic versioning policy
For the purposes of semantic versioning (SemVer), the public API consists of:
- The high-level namespace objects documented in Package contents
- The schema definitions for browser and support data structures
- The TypeScript definitions
The details of browser compatibility change frequently, as browsers ship new features, standards organizations revise specifications, and Web developers discover new bugs. We routinely publish updates to the package to reflect these changes.
You should expect lower-level namespaces, feature data, and browser data to be added, removed, or modified at any time. That said, we strive to communicate changes and preserve backward compatibility; if you rely on a currently undocumented portion of the package and want SemVer to apply to it, please open an issue.
What isn't tracked?
Now that you know what this project is, let's mention what this project isn't. This project is not:
- An extensive description of every possible detail about a feature in a browser. We do not track UI changes, irrelevant features or irrelevant flag data.
- A source for custom features added by web frameworks (e.g. React, Vue) or corporate runtimes (e.g. AWS Lambda, Azure Functions).
- A documentation of screen reader compatibility; for screen reader compatibility, check out https://a11ysupport.io/ instead.
- The location where Baseline data is hosted; while Baseline pulls from BCD, the Baseline data is managed by the W3C WebDX Community Group on their own GitHub repo.
Issues?
If you find a problem with the compatibility data (such as incorrect version numbers) or there is a new web feature you think we should document, please file a bug.
Contributing
Thank you for your interest in contributing to this project! See Contributing to browser-compat-data for more information.
Projects using the data
Here are some projects using the data, as an npm module or directly:
- Add-ons Linter - the Add-ons Linter is used on addons.mozilla.org and the web-ext tool. It uses browser-compat-data to check that the Firefox version that the add-on lists support for does in fact support the APIs used by the add-on.
- caniuse - In addition to the existing caniuse database, caniuse includes features from the MDN BCD project, formatted and interactive like any other caniuse support table.
- CanIUse Embed - Thanks to the inclusion of MDN BCD data in caniuse, this embed tool allows for embedding BCD data into any project.
- Compat Report - Firefox Add-on that shows compatibility data for the current site in the developer tools.
- compat-tester - Scan local documents for compatibility issues.
- Visual Studio Code - Shows the compatibility information in the code completion popup.
- webhint.io - Hints to check if your CSS HTML and JavaScript have deprecated or not broadly supported features.
- WebStorm - JavaScript IDE allowing you to check whether all CSS properties you use are supported in the target browser version.
Acknowledgments
Thanks to: