瀏覽器相容性表格和瀏覽器相容性資料 (BCD)

Baseline 已廣泛支援

此功能已成熟,並可在多種裝置和瀏覽器版本上執行。自 2019 年 3 月以來,它已在所有瀏覽器中可用。

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-Type HTTP 標頭的相容性資料定義在 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