互換性一覧表とブラウザー互換性データリポジトリー (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 ソースファイルで指定されている、取り込みたい該当データのクエリ文字列を使用します。
例:
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
で取り込みが可能です。
互換性データのクエリ文字列は、ページの Front-matter で 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
---
{{Compat}}
マクロと {{Specifications}}
マクロの呼び出しは、以下の表を生成します。(対応する注釈のセットも生成されます)
互換性一覧表の例
BCD tables only load in the browser
仕様書一覧表の例
Specification |
---|
DOM Standard # interface-abortcontroller |