網路平台 12 月新上架

瞭解 2025 年 12 月期間，穩定版和 Beta 版網頁瀏覽器推出的幾項有趣功能。

Rachel Andrew

發布日期：2025 年 12 月 16 日

瀏覽器穩定版

Chrome 143、Firefox 146 和 Safari 26.2 於 12 月發布穩定版。 這篇文章將介紹本月推出的多項新功能，其中有幾項已成為 Baseline Newly available。

@scope CSS at 規則現在是 Baseline

Firefox 146 包含 @scope CSS at 規則，可讓您選取特定 DOM 子樹狀結構中的元素。 定義選取器可指定元素的範圍，並避免過於具體且冗長的選取器。舉例來說，如果 <img> 元素位於類別為 .card 的元素內，下列 CSS 只會以這些元素為目標。

@scope (.card) {
    img {
        border-color: green;
    }
}

Firefox 146 現已推出，這個實用的 at 規則也已成為 Baseline Newly available。 如要進一步瞭解這項功能，請參閱「使用 CSS @scope at 規則限制選取器的觸及範圍」。

contrast-color() CSS 函式

Firefox 146 也提供 contrast-color() 函式。這個函式會採用顏色值並傳回對比色，確保符合 WCAG AA 最低對比度。

如需更多範例，請參閱 WebKit 網誌的「How to have the browser pick a contrasting color in CSS」。

Browser Support

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

Source

Firefox 是第一個推出 text-decoration-inset 屬性的瀏覽器。這項屬性可調整元素文字裝飾的起點和終點，因此可以縮短、延長或相對於算繪文字移動位置。

font-language-override CSS 屬性

Chrome 143 包含 font-language-override 屬性。這樣就能覆寫特定語言的字體行為。 如果使用的字體無法正確支援某種語言，您可以選擇使用支援度較高的類似語言字元。

Browser Support

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

Source

CSS 錨定後備容器查詢

Chrome 143 推出 @container anchored(fallback)，可根據套用的 position-try-fallbacks 樣式，設定錨定位置元素的後代樣式。

這類查詢可用於設定錨定元素繫繩或動畫的樣式，具體取決於錨點和錨定元素彼此的相對位置。

background-position-x/y 簡寫的邊側相對語法

此外，Chrome 和所有瀏覽器現在都支援定義背景圖片相對於 background-position 其中一個邊緣的位置，例如：

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 49.
  • Safari: 15.4.

動畫 overallProgress 屬性

Safari 26.2 包含 overallProgress。 這個 Animation 介面的唯讀屬性會傳回介於 0 和 1 之間的數字，表示動畫整體進度，直到動畫完成為止。

這項屬性現已成為 Baseline Newly available。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

LCP 和 INP 現在是 Baseline Newly available

最大內容繪製 (LCP) 和與下一個顯示的內容互動 (INP) 指標現已成為 Baseline Newly available，Safari 26.2 支援 Contentful Paint API 和 Event Timing API，可評估這些指標。

這些功能已納入 Interop 2025，您現在可以在各大瀏覽器的最新版本中評估這些指標。

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS 達到基準，現已推出

Safari 26.2 也包含 CHIPS (具有獨立分區狀態的 Cookie)，可讓您將 Cookie 納入分區儲存空間，每個頂層網站都有各自的 Cookie 罐。

Browser Support

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

Source

hidden="until-found"

Safari 26.2 支援 hidden="until-found"，

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

command 和 commandfor 屬性

此外，Safari 26.2 也支援按鈕中的 HTML command 和 commandfor。這項功能提供宣告式方法，可控制浮動視窗和對話方塊。

Browser Support

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

Source

詳情請參閱「推出 command 和 commandfor」。

「scrollend」活動

Safari 26.2 新增的另一項基準功能是 scrollend 事件。捲動完成時會觸發這個事件，詳情請參閱「Scrollend，一個新的 JavaScript 事件」。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

scrollbar-color 屬性

scrollbar-color 屬性可讓您變更捲軸滑桿和捲軸軌道的顏色。Safari 26.2 也會成為基準新版。

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

Beta 版瀏覽器

測試版瀏覽器可讓您搶先體驗下一版瀏覽器穩定版的功能。在正式發布前，您可以測試可能影響網站的新功能或移除項目。本月的新版 Beta 版是 Firefox 147 和 Chrome 144。

Chrome 144 包含 ::search-text 虛擬元素，可設定網頁內搜尋結果的樣式，並支援 @scroll-state，讓您根據最近的捲動方向設定容器後代的樣式。scrolled此外，還包含 Temporal API，提供處理日期和時間的標準物件和函式。

Firefox 147 是令人期待的版本，包含 CSS 錨點定位、檢視區塊轉場效果類型和 Navigation API。

如要進一步瞭解今年推出的 CSS 和 UI 精彩功能，請參閱 CSS Wrapped 2025。