網路平台 2 月新手

探索 2025 年 2 月推出的穩定版和 Beta 版網頁瀏覽器中，有哪些有趣的功能。

Rachel Andrew

發布日期：2025 年 2 月 28 日

穩定版瀏覽器

2025 年 2 月，Firefox 135 和 Chrome 133 穩定版推出。本文將介紹網頁平台新增的功能。

檢查 WebAuthn 功能

Firefox 135 和 Chrome 133 都新增了對 PublicKeyCredential.getClientCapabilities() 靜態方法的支援。這可讓您檢查瀏覽器是否支援 Web 驗證 API 的功能，而無需使用瀏覽器嗅探。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 也包含使用來源提案剖析 JSON的功能，包括 JSON.parse reviver 參數 context 引數、JSON.isRawJSON() 和 JSON.rawJSON()。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 135.
  • Safari: not supported.

Source

彈出式視窗屬性的提示值

Chrome 133 為 popover 屬性新增第三個值 popover="hint"。提示通常與「工具提示」類型行為相關，但行為略有不同。在現有的自動彈出式視窗堆疊開啟時，現在可以開啟不相關的提示彈出式視窗。

標準範例是開啟 <select> 挑選器 (popover="auto") 並顯示懸停觸發的工具提示 (popover="hint")。這項操作不會關閉 <select> 選擇器。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

詳情請參閱「彈出式視窗 = 提示」一文。

CSS 進階 attr() 函式

Chrome 133 中提供了一系列 CSS 新增項目。這個 Chrome 版本包含 CSS 5 級中指定的 attr() 增強功能，可在所有 CSS 屬性中使用 <string> 以外的類型，以及在現有的擬造元素內容支援中使用。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

如要進一步瞭解，請參閱「CSS attr() 升級」一文。

CSS 捲動狀態容器查詢

在 Chrome 133 中，您也可以使用容器查詢，根據容器的捲動狀態為容器的子項設定樣式。

查詢容器可能是捲動容器，也可能是受捲動容器捲動位置影響的元素。可查詢的狀態如下：

  • stuck：固定位置容器會固定在捲動方塊的其中一個邊緣。
  • snapped：目前已對齊捲動觸發點的容器，目前已水平或垂直對齊。
  • scrollable：捲動容器是否可在查詢方向中捲動。

container-type 也有新值：scroll-state，可讓您查詢容器。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

詳情請參閱 CSS scroll-state()。

CSS text-box、text-box-trim 和 text-box-edge

Chrome 133 的 CSS 中也包含 text-box-trim 和 text-box-edge 屬性，以及 text-box 速記屬性，可讓您更精確地控制文字的垂直對齊方式。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

如要進一步瞭解這項實用屬性的運作方式，請參閱 CSS text-box-trim。

DOM 狀態保留搬移

Chrome 133 新增了 DOM 原始元素 (Node.prototype.moveBefore)，可讓您在 DOM 樹狀結構中移動元素，而無須重設元素的狀態。

移動而非移除和插入時，系統會保留下列狀態：

  • <iframe> 元素仍會載入。
  • 有效元素仍會保留焦點。
  • 彈出式視窗、全螢幕和互動式對話方塊會保持開啟狀態。
  • CSS 轉場效果和動畫會繼續執行。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

FileSystemObserver 介面

Chrome 133 中新增的 FileSystemObserver 介面會通知網站檔案系統的變更。網站會觀察使用者先前已授予權限的檔案和目錄 (在使用者的本機裝置或 Bucket 檔案系統 (也稱為 Origin 私人檔案系統) 中) 的變更，並收到基本變更資訊的通知，例如變更類型。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Beta 版瀏覽器

瀏覽器測試版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前，您可以測試可能影響網站的新功能或移除項目。新的 Beta 版為 Firefox 136、Safari 18.4 和 Chrome 134。這些版本為平台帶來許多精彩功能。如需瞭解所有詳細資訊，請參閱版本資訊。以下列舉幾個重點。

最新的 Safari 測試版提供大量新增功能和改善項目，其中部分功能預計在瀏覽器穩定後成為基準新功能。例如 writing-mode: sideways-rl 和 writing-mode: sideways-lr、ClipboardItem 的 supports() 靜態方法，以及迭代器輔助工具提案中的整個項目清單。

Safari 18.4 Beta 和 Firefox 136 都包含 Cookie Store API，這項 API 應在兩個瀏覽器推出後，成為可用的 Baseline 新功能。

Firefox 136 包含 :open 和 :has-slotted 擬似類別，後者也出現在 Chrome 134 中。也包含 Intl.DurationFormat，這應該是基準新功能。

Chrome 134 包含可自訂的 <select> 元素、CSS dynamic-range-limit 屬性，以及 <dialog> 元素的輕型關閉功能。