互換性一覧表とブラウザー互換性データリポジトリー (BCD)

MDN には、DOM, HTML, CSS, JavaScript, SVG などの、あらゆるブラウザーで共有される技術についての互換性を表す一覧表の標準フォーマットがあります。 このデータを複数のプロジェクトで機械的に利用できるようにするため、Node.js パッケージが browser-compat-data リポジトリーからビルドされ、npm に公開されています。

これらの互換性一覧表のデータを変更するには、browser-compat-data リポジトリーの協力者ガイドやデータガイドラインのガイド中にある包括的なドキュメント（データを表現するために使用される慣習とJSONスキーマの最新の詳細を含みます）をご覧ください。 質問や問題が見つかった場合は、助けを求めるをご利用ください。

MDN ページで BCD データを使う

browser-compat-data リポジトリーにデータが格納されると、そのデータを基にしたブラウザー互換性一覧表や仕様書を、MDN ページに動的に生成できるようになります。

BCD データを MDN ページに取り込むには、BCD ソースファイルで指定されている、取り込みたい該当データのクエリー文字列を使用します。 例えば、

互換性データのクエリー文字列は、ページのフロントマターで browser-compat キーを指定してください。 例えば、AbortController の場合、以下のように追加します。

訳注： 日本語に翻訳された記事には browser-compat キーは追加しないでください。省略しても英語版のフロントマターが参照されるため、不要です。あると混乱の原因になります。参考）

md
---
title: AbortController
slug: Web/API/AbortController
page-type: web-api-interface
browser-compat: api.AbortController
---

そして、そのキーに対応する互換性一覧表と仕様書が、ソース中の {{Compat}} マクロと {{Specifications}} マクロから自動的に生成されます。

同じページに複数の互換性一覧表や仕様書が必要な場合、browser-compat の値を配列で指定することができます。例えば、チャンネルメッセージング API の場合、以下のように追加します。

md
---
title: Channel Messaging API
slug: Web/API/Channel_Messaging_API
page-type: web-api-overview
browser-compat:
  - api.MessageChannel
  - api.MessagePort
---

マクロ呼び出すと、以下の表（とそれに対応するメモ設定）が生成されます。

互換性一覧表の例

BCD tables only load in the browser

仕様書一覧表の例

Specification
DOM Standard
# interface-abortcontroller