在網誌文章和簡報中顯示基準狀態

發布日期:2024 年 10 月 23 日

本文將說明如何在您自己的網站上使用新的 <baseline-status> 網頁元件,以及在您撰寫或談論網頁平台功能時,在簡報中使用基準標誌。

大部分的開發人員都曾在搜尋網頁開發問題需要的解決方案,找出一篇文章說明最佳解決方案,然後發現這項功能只在單一瀏覽器中提供。或者,你可能會對會議講者所描述的功能感到興奮,但後來發現該功能是實驗性質。我們希望藉此改善 Chrome 開發人員網站的功能。過去兩年來,我們一直在貼文中 加入 MDN 的相容資料。

基準則能更清楚地顯示內容。您可以檢查功能是否已廣泛提供,而非檢查個別瀏覽器版本,這樣就能放心使用。或者,您可能會發現該功能是新推出的 Baseline 功能,因此可互通,但由於是新功能,因此您可能需要考慮備用策略。在 web.dev 中,我們已開始在部分頁面中新增新的基準狀態元件,您可以在 CSS font-size-adjust 的網誌文章中看到這項元件。

元件顯示 font-size-adjust 為「Baseline Newly available」。
字型大小調整貼文中的元件。

將元件新增至網站

這個網頁元件不只供我們使用。很高興與您分享 <baseline-status> 元件。您可以使用這項功能,在所建立的內容上顯示基準狀態。您可以從 npm 安裝元件,也可以從 CDN 預先編譯元件。請參閱安裝說明。安裝完成後,顯示功能狀態,如以下 font-size-adjust 的 HTML 所示。

<baseline-status featureId="font-size-adjust"></baseline-status>

當功能從「僅限部分國家/地區」變更為「新推出」或「全線推出」時,元件就會自動更新。

尋找featureId

傳入元件的 featureIdweb-features 存放區中功能的名稱。元件會從透過Web 功能專案收集的資料取得功能狀態。

新增基準標誌

如果您要透過平面媒體、PDF 或在研討會上發布內容,標誌可能有助於顯示當時的狀態。網頁平台狀態資訊主頁可協助您查看任何功能的基準狀態。

兩個綠色標誌,上頭有「Baseline」字樣,白色和黑色背景。
淺色和深色模式的 Baseline 字標。

您可以下載 PNG 和 SVG 格式的標誌,並在所有素材資源中使用。

請告訴我們您使用基準的地區

我們很想知道 Baseline 的使用情形。建立 PR,並在您使用該檔案的連結中加入實際使用基準

您是否有其他整合想法?

您是否有其他方式可以整合 Baseline?您可能有可納入這類資訊的開發人員工具,或是可從分享管理控制台使用的基準版本而受益的產品。提出問題並提供想法,我們很樂意提供協助。