瀏覽器相容性表格和瀏覽器相容性資料 (BCD)
MDN 對說明 DOM、HTML、CSS、JavaScript、SVG 等共享技術在所有瀏覽器中相容性的表格採用標準格式。為了讓這些資料能在多個專案中以程式設計方式訪問,我們從 browser-compat-data 倉庫構建了一個 Node.js 包,併發布到了 npm。
要修改這些表格中的資料,您可以在倉庫的 貢獻指南以及 資料指南中找到全面的文件以及用於表示資料的約定和 JSON Schema 的最新詳情。如果您有任何疑問或發現問題,歡迎 尋求幫助。
在 MDN 頁面中使用 BCD 資料
一旦資料被包含在 browser-compat-data 倉庫中,您就可以開始在 MDN 頁面中動態地包含基於這些資料的瀏覽器相容性和規範表格。
要開始在 MDN 頁面中使用 BCD 資料,請使用您希望包含的相關資料在 BCD 原始檔中指定的查詢字串。例如:
AbortController的相容性資料定義在 api/AbortController.json 中,可以使用api.AbortController進行查詢。Content-TypeHTTP 標頭的相容性資料定義在 http/headers/content-type.json 中,查詢為http.headers.Content-Type。VRDisplay.capabilities屬性的相容性資料定義在 api/VRDisplay.json 中,其查詢為api.VRDisplay.capabilities。
相容性資料查詢應在頁面的 front-matter 中,在 browser-compat 鍵下指定。例如,AbortController 會像下面這樣新增:
md
---
title: AbortController
slug: Web/API/AbortController
page-type: web-api-interface
browser-compat: api.AbortController
---
然後,與該鍵對應的相容性和規範表格將自動渲染,替換掉原始檔中的 {{Compat}} 和 {{Specifications}} 宏。
如果同一頁面需要多個相容性/規範表格,您可以將 browser-compat 的值指定為一個數組。例如,對於 Channel Messaging API,新增方式如下:
md
---
title: Channel Messaging API
slug: Web/API/Channel_Messaging_API
page-type: web-api-overview
browser-compat:
- api.MessageChannel
- api.MessagePort
---
宏呼叫會生成以下表格(以及相應的註釋集):
相容性表格示例
載入中…
規範表格示例
| 規範 |
|---|
| DOM # interface-abortcontroller |