網路平台 10 月新知

瞭解 2025 年 10 月在穩定版和 Beta 版網頁瀏覽器中推出的有趣功能。

Rachel Andrew

發布日期：2025 年 10 月 30 日

穩定版瀏覽器

Chrome 142 和 Firefox 144 於 10 月發布穩定版，本文將探討這對網路平台有何意義。

單一頁面應用程式的 View Transitions API

Firefox 144 支援同文件檢視畫面轉場效果。 包括支援：

  • :active-view-transition 虛擬類別
  • view-transition-class 屬性
  • view-transition-name 屬性
  • ::view-transition 虛擬元素
  • ::view-transition-group() 虛擬元素
  • ::view-transition-image-pair() 虛擬元素
  • ::view-transition-new() 虛擬元素
  • ::view-transition-old() 虛擬元素

這項功能讓同文件檢視區塊轉換成為 Baseline Newly available。

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 144.
  • Safari: 18.

Source

<button> 元素上的 command 和 commandfor 屬性

Firefox 144 支援 command 和 commandfor。如要進一步瞭解這些屬性，請參閱「推出 command 和 commandfor」。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

moveBefore() 方法

Firefox 現在支援 Element、DocumentFragment 和 Document 介面中的 moveBefore() 方法。這項功能可讓您將物件的直接子項元素移至另一個子項元素之前，且兩個元素都會保留狀態。

詳情請參閱「使用 moveBefore() 在 DOM 突變期間保留狀態」。

:target-before 和 :target-after 虛擬類別

Chrome 142 新增的虛擬類別，可比對同一捲動標記群組中，位於有效標記 (比對 :target-current) 前後的捲動標記，比對依據為扁平樹狀結構順序：

  • :target-before：比對群組中平面樹狀結構順序位於有效標記之前的所有捲動標記。
  • :target-after：比對群組中平面樹狀結構順序中，所有位於有效標記之後的捲動標記。

Browser Support

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

Source

樣式容器查詢和 if() 的範圍語法

Chrome 142 新增範圍語法支援，強化 CSS 樣式查詢和 if() 函式。

這項功能可將樣式查詢擴展至精確值比對以外的範圍 (例如 style(--theme: dark))。開發人員可以使用比較運算子 (例如 > 和 <) 比較自訂屬性、常值 (例如 10 像素或 25%)，以及來自替代函式 (例如 attr() 和 env()) 的值。如要進行有效比較，兩側都必須解析為相同的資料類型。僅限下列數值型別：<length>、<number>、<percentage>、<angle>、<time>、<frequency> 和 <resolution>。

興趣叫用端 (interestfor 屬性)

Chrome 142 也會將 interestfor 屬性新增至 <button> 和 <a> 元素。這項屬性會為元素新增「興趣」行為。當使用者對元素感興趣時，目標元素會觸發動作，例如顯示彈出式視窗。

使用者代理程式會偵測使用者何時對元素感興趣，例如將指標懸停在元素上、按下鍵盤上的特殊快速鍵，或長按觸控螢幕上的元素。當顯示或失去興趣時，目標會觸發 InterestEvent，其中包含彈出式視窗的預設動作，例如顯示和隱藏彈出式視窗。

Beta 版瀏覽器

測試版瀏覽器可讓您搶先體驗下一版瀏覽器穩定版的功能。在正式發布前，您可以測試可能影響網站的新功能或移除項目。本月的新版 Beta 版包括 Firefox 145 和 Chrome 143，Safari 26.1 則持續進行。

Firefox 145 包含 ToggleEvent 介面的 source 屬性和 Atomics.waitAsync() 靜態方法。

Chrome 145 包含 CSS 錨定後備容器查詢。 這會根據套用的 position-try-fallbacks 值，將 @container anchored(fallback) 導入錨定位置元素的樣式後代。