Compatibility tables and the browser compatibility data repository (BCD)
MDN has a standard format for tables that illustrate compatibility of shared technologies across all browsers, such as DOM, HTML, CSS, JavaScript, SVG, etc.
To make this data available in multiple projects programmatically, a Node.js package is built from the browser-compat-data
repository and published to npm.
To modify the data within these tables, comprehensive documentation along with the most recent details of conventions and JSON schemas used to represent the data can be found in the repository's contributing guide as well as the data guidelines guide. If you have questions or discover problems, you are welcome to ask for help.
Using BCD data in MDN pages
Once data has been included in the browser-compat-data
repo, you can start dynamically including browser compatibility and specification tables based on that data within MDN pages.
To get started with BCD data in MDN pages, use the query string specified in the BCD source file for the relevant data you wish to include. For example:
AbortController
compatibility data is defined in api/AbortController.json and can be queried usingapi.AbortController
.Content-Type
HTTP header compatibility data is defined in http/headers/content-type.json and the query ishttp.headers.Content-Type
.VRDisplay.capabilities
property compatibility data is defined in api/VRDisplay.json and its query isapi.VRDisplay.capabilities
.
The compatibility data query should be specified in the page front-matter in the browser-compat
key.
For example, AbortController
would be added as shown below:
md
---
title: AbortController
slug: Web/API/AbortController
page-type: web-api-interface
browser-compat: api.AbortController
---
The compatibility and specification tables corresponding to the key are then automatically rendered in place of the {{Compat}}
and {{Specifications}}
macros in the source.
If multiple compatibility/specification tables are required on the same page, you can specify the value of browser-compat
as an array. For example, for the Channel Messaging API this would be added as shown below:
md
---
title: Channel Messaging API
slug: Web/API/Channel_Messaging_API
page-type: web-api-overview
browser-compat:
- api.MessageChannel
- api.MessagePort
---
The macro calls generate the following tables (and corresponding set of notes):
Compatibility table example
BCD tables only load in the browser
Specifications table examples
Specification |
---|
DOM Standard # interface-abortcontroller |