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

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

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

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

• AbortController 互換性データは api/AbortController.json で定義されており、クエリー文字列 api.AbortController で取り込みが可能です。
• Content-Type HTTPヘッダーの互換性データは、http/headers/content-type.json で定義されており、クエリー文字列 http.headers.Content-Type で取り込みが可能です。
• VRDisplay.capabilities プロパティの互換性データは api/VRDisplay.json で定義されており、クエリー文字列 api.VRDisplay.capabilities で取り込みが可能です。

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

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

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

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

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

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

互換性一覧表の例

仕様書一覧表の例