2025 年 3 月基準月月報

發布日期:2025 年 3 月 31 日

又過了一個月份,自上次發布「Baseline 每月摘要」以来,我們有許多新消息要與大家分享!在本期內容中,我們將回顧在 web.dev 上發布的幾篇文章、已推出的幾項基準新功能,以及社群中工具的相關更新。

ESLint 0.6.0 已發布

我們最近發布了有關 ESLint 推出 CSS 檢查支援功能的文章。這次推出的部分內容包括新的 ESLint 規則 require-baseline,可用於檢查您在專案中使用的 CSS 功能,以及這些功能是否達到特定基準門檻。

ESLint 最近推出了 @eslint/css 套件的 0.6.0 版,其中包含一項重要的新更新,將 require-baseline 規則重新命名為 use-baseline。雖然這項更新看似不起眼,但可改善規則的可讀性。這個版本也推出了其他重要功能和錯誤修正,例如新增 use-baseline 規則,可用於檢查巢狀 CSS 區塊。如果您使用的是舊版 @eslint/css,請查看這項更新!

如何查詢 Web Platform 資訊主頁

本月稍早,我們發布了一篇有關查詢網站平台資訊主頁的文章。您可以透過前端和 HTTP API 查詢這個資訊主頁。這對基準工具來說可能很實用,因為您可以查詢 API,找出已達到特定基準門檻的功能。

這個 API 可用於需要快速取得特定功能相關資訊的工具。舉例來說,您可以使用這類工具編寫指令碼,以便在特定間隔內告知哪些功能最近已成為「新版」或「廣泛」功能。如果這對你有幫助,請閱讀這篇文章

如何看待基準版本和 polyfill

Baseline 的目標是讓您清楚瞭解可安全使用的功能,但即使如此,您仍必須思考如何以適合網頁應用程式的方式採用功能。填充內容是這個過程的重要環節。基準資料不會考量 polyfill 是否為新功能或廣泛可用,也不會告訴您是否要使用 polyfill。這項決定會根據您的應用程式而定,但這是重要的考量因素!

我們最近發布了一篇文章,說明如何思考基準和 polyfill,這篇文章提供了實用的架構,讓您思考如何使用這些元素。我們希望這類功能成為新基準或廣泛可用,讓填充函式不再那麼必要。毫無疑問,polyfill 是開發人員工具箱中實用的工具,但它們也有缺點,可能會對網站效能造成負面影響,在某些情況下甚至可能會影響無障礙存取。希望這份指南能協助你解決這個棘手的問題!

contenteditable="plaintext-only" 現已成為新版基準

HTML 元素上的 contenteditable 屬性可讓使用者變更其內容,就像是文字欄位一樣。舉例來說,您可以將屬性放在 <p> 元素上,使用者就能像使用 <textarea> 一樣與其互動。在某些用途中,使用 contenteditable 比使用一般表單元素更有優勢。

不過,使用者會將內容貼到可編輯的元素中,而他們貼入的內容可能包含富文字格式,這可能會讓只想將未格式化的文字貼到欄位的使用者感到困擾。contenteditable="plaintext-only" 屬性/值組合可避免這種情況發生,且最近已成為新基準。如需進一步瞭解,請參閱這篇公告貼文,瞭解如何為只想將文字貼入內容的使用者提供更優質的編輯體驗,而無需額外提供其他內容。

Intl.DurationFormat 現已成為新基準

您可能曾在某個網站上看到文字,說明某個事件發生前或發生後的時間長度,通常會以「2 天、6 小時、3 分鐘」等字串表示。這類資料可用於傳達任何及時資訊,但通常由程式庫提供。此外,您可能還想以多種語言輸出這項資訊。

輸入 Intl.DurationFormat,這是最近成為新基準的國際化功能。使用 Intl.DurationFormat 類別,您可以將物件傳遞至其建構函式,其中包含您要格式化為字串的時間單位,而且幾乎可使用任何語言:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

令人興奮的是,如果您的應用程式需要透過程式庫格式化這類字串,您很快就能不使用程式庫完成這項操作,為使用者節省千位元組的空間。詳情請參閱這篇關於 Intl.DurationFormat 的公告文章,瞭解如何充分運用這項實用的新功能!

2025 年 W3C 分組討論日基準

最近,W3C 舉辦了2025 年版的 Breakouts Day,成員們發表了各種主題,並在 3 月 26 日提供實用的基準資訊工作坊

如果您是第一次使用基準資料,這個工作階段可快速提供概略說明。這份文件涵蓋了基準資料的基礎概念,例如「新推出」和「廣泛可用」概念,也說明瞭這些定義如何由資料決定,從 browser-compat-data 開始,一直到 web-features 資料,協助我們找出哪些功能符合哪個基準值門檻。

如果你錯過了這場活動,也別擔心!研討會的簡報內容現已開放,如果您對這場研討會感到好奇,不妨前往觀看。

以上!

本期月報不僅標示本月結束,也標示季度結束。如果您錯過了先前的摘要,請參閱1 月2 月的版本,瞭解今年第一季 Baseline 的所有動態。如往,如果我們遺漏了任何與基準相關的內容,請告訴我們,我們會確保在日後的版本中納入這些內容。一個月後見!