Chrome 142 版的新功能

Rachel Andrew

發布日期：2025 年 10 月 28 日

Chrome 142 現已推出，這篇文章將介紹這個版本的部分主要功能。如要查看完整版本資訊，請參閱 Chrome 142 版本資訊。

這個版本的重要功能包括：

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

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

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

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

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

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

範例：

比較自訂屬性與字面長度：

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

比較兩個常值

@container style(1em < 20px) {
  /* ... */
}

在 if() 中使用樣式範圍：

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

興趣叫用端 (interestfor 屬性)

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

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

延伸閱讀

這份文件僅涵蓋部分重點。如要瞭解 Chrome 141 的其他變更，請參閱下列連結。

訂閱

如要掌握最新資訊，請訂閱 Chrome 開發人員 YouTube 頻道，這樣每當我們發布新影片，您就會收到電子郵件通知。你也可以在 X 或 LinkedIn 上追蹤我們，閱讀新文章和網誌貼文。

Chrome 143 版推出後，我們會立即在此說明 Chrome 的新功能！