網頁版使用者介面新功能

Bramus
Una Kravets

發布日期：2026 年 7 月 1 日

在 2026 年 Google I/O 大會，我們分享了 Web UI 平台的一連串更新。從尊重使用者偏好到實作自然互動、引導導覽、減少雜亂，以及配合各種外型規格，現代網路為開發人員提供功能強大的工具，可打造高品質的觸覺使用者體驗。

以下是「網頁使用者介面新功能」課程中提及的所有功能，並依據核心 UX 原則分類。

第 1 部分：尊重使用者偏好設定

個人化是提升網站可用性的基本要素。透過新式網頁 API，您可以更輕鬆地自動配合使用者系統層級的選擇。雖然這些概念看似基本，我們也討論多年，但實際上，有幾項新的 API 和模式可讓您更輕鬆地建構動態個人化功能。

1. contrast-color()

contrast-color() CSS 函式會接收輸入顏色，並根據 WCAG AA 最低對比度演算法，自動傳回與輸入顏色對比度較高的 black 或 white。這樣一來，您不必手動維護文字與背景顏色配對，就能確保文字清晰易讀。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

進一步瞭解「contrast-color()」

2. light-dark()

light-dark() CSS 函式可讓您在單一宣告中，為屬性指定兩個不同的值 (顏色或圖片)，分別用於淺色模式和深色模式。瀏覽器會根據有效的 color-scheme 自動選取正確的對比顏色 (必須在 :root 或父項上設為 light、dark 或 light dark)。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark() 的新功能是，不再僅限於顏色值。自 Chrome 150 起，這個屬性現在也接受兩個圖片值。

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. CSS 自訂函式 (@function)

@function at 規則可讓您直接在原生 CSS 中定義可重複使用的自訂函式。它可以接受本機範圍的自訂屬性做為引數、執行計算，並使用 result 描述元傳回值，減少前置處理器的需求。

Browser Support

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

Source

結合容器樣式查詢和 CSS if() 函式，即可建立適用於任何類型值的自訂 --light-dark() 函式，如下方範例所示：

4. 容器樣式查詢

樣式查詢是 CSS 容器查詢的一部分，可讓開發人員根據父項容器的計算自訂屬性值，將樣式套用至子項元素，進而啟用動態元件，不必明確限制大小。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

在本示範中，樣式查詢會根據 --theme 自訂屬性設定顏色。

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

進一步瞭解樣式查詢

5. CSS if() 函式

if() CSS 函式可直接將內嵌條件邏輯帶入 CSS 屬性值。這項函式會評估一系列以半形分號分隔的條件 (樣式查詢、媒體查詢或功能查詢)，並根據第一個為 true 的條件設定相關聯的不同值，還可選擇性地提供 else 後備值。

Browser Support

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

Source

在先前的範例中，if() 函式用於根據 contrast-color() 函式的輸出內容建立主題對比色。

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

搭配 @supports 使用的 CSS at-rule() 函式可讓開發人員進行功能偵測，判斷瀏覽器是否可辨識特定 at 規則，例如 @starting-style 或 @view-transition。

舉例來說，如要檢查是否支援 @function，請使用下列程式碼：

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

使用 at-rule() 只能檢查 at 規則本身的基本支援，無法用於測試特定描述元、前奏或完整 at 規則區塊。您可以透過替代方案，偵測錨定查詢或樣式查詢等項目。

進一步瞭解「@supports at-rule」

7. <meta name="text-scale">

text-scale HTML 中繼標記會讓網頁的 <html> 根元素初始字型大小，根據作業系統和瀏覽器層級的文字縮放設定成比例縮放，這對行動平台來說尤其重要。

Browser Support

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

Source

套用後，html 元素的字型大小會由作業系統決定，因此您不需要設定基本 font-size。如果您接著使用 em 和 rem 等相對單位表示長度，系統會根據該基本字型大小計算像素值。

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

您可以在開發人員工具的「算繪」分頁中模擬偏好的字型大小。使用下拉式選單變更值。

進一步瞭解「<meta name=text-scale>」

第 2 部分：實作自然互動

直覺的實體動作和自然手勢是讓網頁體驗像原生應用程式一樣有觸覺回饋的關鍵。現代 CSS 可讓您更輕鬆達成這個目標。

8. linear() 緩和函式

linear() 緩和函式可讓您在無限數量的指定進度點之間進行線性插補，藉此建立複雜的自訂轉換曲線 (例如彈跳、彈簧或彈性過衝)。

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

在下列示範中，linear() 用於在顯示或隱藏對話方塊時，為對話方塊提供自然加/減速效果。

進一步瞭解「linear()」

9. @starting-style

@starting-style CSS at-rule 會定義元素屬性的起始值，當元素首次在 DOM 中算繪，或 display 從 none 變更為可見值時，您希望從這些起始值開始轉換，以啟用平滑的進入轉場效果。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

在先前的示範中，這項屬性用於在 <dialog> 首次顯示時，為其製作動畫。

10. transition-behavior: allow-discrete

transition-behavior 屬性 (通常在 transition 簡寫中用做 allow-discrete) 可讓您轉換 display 或 overlay 等離散屬性，確保元素在隱藏前，於結束動畫期間保持可見。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index()和sibling-count()

sibling-index() 和 sibling-count() CSS 函式會分別傳回整數，代表元素在同層級元素中的位置 (從 1 開始編號)，以及同層級元素的總數。非常適合在 CSS 中動態計算交錯動畫延遲，不必使用 JavaScript。

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

在本示範中，對話方塊的內容會使用 animation-delay 中的 sibling-index() 交錯顯示

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. 對話方塊輕觸關閉 (closedby 屬性)

<dialog> 元素上的 closedby 屬性 (值為 any) 可讓您使用宣告式「輕觸即關閉」行為，在點選對話方塊外部或按下 ESC 時自動關閉強制回應對話方塊，無須自訂 JavaScript。

Browser Support

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

Source

您可以在先前的試用版中試用這項功能。

13. corner-shape

開發人員可使用實驗性的 corner-shape 簡寫屬性修改圓角 (來自 border-radius)，建立自訂視覺形狀，例如 bevel、scoop、notch 或 squircle (透過 superellipse())。邊框、陰影和焦點外框會自動符合形狀。

Browser Support

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

Source

第 3 部分：提供導覽式導覽

引導使用者歷程有助於維持脈絡和瞭解應用程式流程，避免重新載入時迷失方向。您可以透過幾種方式執行此操作，包括檢視畫面轉場效果，這項功能最近也進行了幾項更新。

14. 相同文件的檢視畫面轉場效果

同文件轉換是 View Transition API 的一部分，可透過擷取快照並使用 CSS 轉換快照，在單頁應用程式 (SPA) 的 DOM 狀態之間提供動畫機制。

Browser Support

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

Source

進一步瞭解同份文件的檢視畫面轉換

15. 跨文件檢視畫面轉場效果

將 View Transition API 擴充至多頁面應用程式 (MPA)，讓您在不同文件之間導覽時，透過比對各頁面中相同的 view-transition-name 元素，建立流暢的動畫轉場效果。

Browser Support

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

Source

進一步瞭解跨文件檢視區塊轉換

16. 元素範圍檢視畫面轉場效果

Chrome 147 推出的元素範圍檢視區塊轉場效果，可讓您只在特定 DOM 子樹狀結構 (使用 element.startViewTransition()) 上執行檢視區塊轉場效果，同時保持網頁其餘部分的活動和互動狀態。

Browser Support

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

啟動元素範圍的檢視區塊轉場效果時，系統會以獨立方式執行：只掃描該子樹狀結構中含有 view-transition-name 的元素，並將 ::view-transition 虛擬元素插入範圍根目錄本身。自動套用 view-transition-scope: all，因此可以進行隔離。

這樣一來，多個檢視區塊轉換就能同時執行，檢視區塊轉換也能巢狀化：在這些清單中的項目隨機排序時，您也可以交換清單本身。

此外，群組虛擬元素會自動巢狀化，並在必要時裁剪封閉群組子項虛擬元素的溢位。

範圍檢視區塊轉換非常適合微互動和網頁內有狀態的變形，可在視覺變化時提供更多背景資訊給使用者。這不僅能提升應用程式的可用性，還能改善外觀和使用體驗。這些小細節會帶來很大的差異！

進一步瞭解元素範圍的檢視畫面轉換

17. 兩階段檢視畫面轉場效果

這項實驗功能會立即啟動跨文件檢視區塊轉場效果，不必等待新 DOM 準備就緒，首先會轉場至中介的骨架畫面或載入 UI，然後繼續進行跨文件檢視區塊轉場效果。

進一步瞭解雙階段檢視畫面轉換

18. 捲動式動畫

捲動驅動動畫會將 CSS 動畫的進度直接連結至捲動容器的捲動位置，讓開發人員建構以捲動為基礎的介面，例如高效的視差效果和捲動指標。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. 捲動觸發的動畫

Chrome 新增了「捲動觸發」動畫。捲動觸發的動畫會在捲動邊界遭到跨越時觸發標準的以時間為基礎的 CSS 動畫 (使用 timeline-trigger 定義觸發條件，並使用 animation-trigger 播放動畫)，提供 IntersectionObserver 的宣告式替代方案。

Browser Support

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

捲動觸發動畫的基礎機制是時間軸觸發條件，這些條件會處於啟用或停用狀態。

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

在下列範例中開啟視覺化工具，即可查看發生了什麼事：第一個範圍是啟用範圍，決定觸發條件的啟用時間。第二個範圍是有效範圍，決定應保持有效狀態的時間長度。

進一步瞭解捲動觸發動畫

20. scroll-target-group: auto

您現在可以建構原生 CSS 捲動偵測器，根據使用者的捲動位置自動醒目顯示導覽連結。在導覽清單中設定 scroll-target-group: auto 後，瀏覽器會自動設定 aria-current="true"，並將 :target-current 虛擬類別套用至有效連結。接著，您可以使用 :target-current 進一步設定有效連結的樣式。

Browser Support

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

Source

Browser Support

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

Source

進一步瞭解 CSS 捲動偵測器，請參閱 scroll-target-group

21. scrollIntoView() 容器選項

scrollIntoView() 方法會取得 container 選項。設定 target.scrollIntoView({container: 'nearest'}) 會將捲動限制在最接近的祖系捲軸，而不是一路向上冒泡，避免發生令人困惑的網頁層級捲動。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

使用這個示範中的核取方塊，即可切換選項的開啟和關閉狀態：

進一步瞭解「container: "nearest"」

22. 可等待的程式輔助捲動

所有程式輔助捲動方法 (例如 scroll()、scrollTo() 和 scrollIntoView()) 現在都會傳回 Promise。開發人員可藉此await順暢捲動動畫完成，再執行後續邏輯 (例如新增醒目效果)。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

在下列示範中，您可以看到實際運作情形：元素會先捲動到檢視區塊中，然後加上醒目效果。

第 4 部分：盡量提高內容品質，減少雜訊

最令人沮喪的網路體驗之一，就是想查看內容卻遭到侵入式彈出式視窗或橫幅封鎖。消除視覺雜亂和應用程式邊框，並將次要動作移至分層 UI 後方，優先顯示內容區域。

23. 捲動狀態查詢 (scrolled)

scroll-state 查詢是 CSS 容器查詢的一部分，可讓您根據容器的捲動狀態 (使用 container-type: scroll-state)，設定後代的樣式。scrolled 查詢 (例如 scroll-state(scrolled: bottom)) 會偵測最近一次相對捲動的方向，啟用「隱藏式工具列」等模式。

Browser Support

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

進一步瞭解「Hidey Bar」模式

24. 錨定容器查詢

CSS 錨點定位包含錨定容器查詢，可讓您檢查錨定元素目前啟用的後備位置 (例如 fallback: bottom 或 fallback: flip-block)，動態更新錨定元素 (例如工具提示箭頭) 的樣式。

Browser Support

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

在下列範例中，錨定位置的快顯視窗會使用錨定容器查詢，根據其備用位置和可視區域中的位置重新定位。當工具提示在呼叫端上方開啟時，會從來源由下往上顯示動畫。如果位於呼叫器下方，則會從上到下顯示動畫。

25. CSS border-shape

border-shape 屬性可讓您使用與 clip-path 相同的形狀語法，定義非矩形邊框。與裁剪不同，border-shape 會讓邊框、輪廓和陰影在視覺上與自訂形狀對齊。此外，border-shape 的彈性比 corner-shape 更高，因此功能也更強大。

Browser Support

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

26. CSS shape() 函式

CSS shape() 函式可讓您在 CSS 中內嵌定義複雜的幾何路徑。這項屬性可與 clip-path、border-shape 或 shape-outside 等屬性搭配使用，建立內容可浮動的隨機非矩形形狀。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. 每個軸的固定位置

由於溢位規格最近有所變更，容器只能成為單一軸的捲軸，因此固定位置現在可以同時追蹤兩個不同的捲動容器 (每個軸各一個)。即使在單軸捲動容器內，表格中的固定第一欄和頂端列也能正常運作。

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

啟用「實驗性網頁平台功能」旗標後，即可在 Chrome 148 中測試這項功能。

進一步瞭解每個軸的 position: sticky

第 5 部分：配合板型規格調整

網路最珍貴的特質之一就是彈性。使用者可以透過各種裝置瀏覽網路，每種裝置都有自己的互動機制。版面配置應根據裝置和輸入法進行調整，無論虛擬鍵盤是否開啟，或觸控目標是否啟用，都應如此。在設計網頁時考量板型規格，可讓網站或網頁應用程式更加精緻，並符合使用者期望。

28. 過度捲動手勢 (可滑動區域)

舉例來說，在行動版網頁上，使用者可以透過滑動和手勢互動，這就是因應外型規格調整的例子。您可以使用捲動器達成部分效果，但這並非一律直覺易懂。

Chrome 團隊正與 OpenUI 社群群組討論，並著手開發建議的宣告式解決方案，讓您使用 overscrollcontainer 和指令叫用程式建立原生、手勢驅動的可滑動區域 (例如可滑動的 Gmail 清單或滑動即可關閉的側邊選單)，在觸控和捲動時自然運作。

進一步瞭解過度捲動手勢

29. 畫布中的 HTML

畫布中的 HTML API 是一項重大典範轉移，可讓開發人員將實際 DOM 元素放置在 <canvas> 內 (使用 layoutsubtree 屬性)。這些元素仍可完整搜尋、存取，並支援自動填入等瀏覽器功能，同時讓 WebGL/WebGPU 著色器與這些元素進行原生互動。

閃電輪

快速瞭解其他幾項強大功能，如何推動網路發展。

30. 保留 DOM 狀態的移動 (moveBefore())

moveBefore() DOM 方法可重新設定 DOM 節點的父項 (例如播放影片、iframe 或焦點輸入)，而不會破壞節點的狀態或觸發重新載入。

也就是說，當您在版面配置中重新設定父項時，影片會繼續播放、iframe 不會重新載入、CSS 動畫不會重新啟動，且輸入欄位會保持焦點。

Browser Support

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

Source

進一步瞭解「moveBefore()」

31. CSS text-fit

text-fit 是實驗性 CSS 屬性，可動態縮放字型大小，精確調整文字行，使其符合所含元素 (例如 text-fit: grow per-line-all) 的確切寬度。

進一步瞭解「text-fit」

32. CSS text-box (text-box-trim 和 text-box-edge)

text-box 屬性 (及其簡寫 text-box-trim 和 text-box-edge) 會修剪文字上方和下方的垂直空間 (行距)，確保垂直對齊和置中。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

進一步瞭解「text-trim」

33. CSS 間距裝飾

CSS 間距裝飾可為格線和 Flexbox 帶來 column-rule，並導入新的 row-rule 屬性，讓開發人員設定列和欄之間的間距樣式。您不必再使用邊框或虛擬元素，為列和欄之間的規則設定樣式。

Browser Support

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

進一步瞭解 CSS 間隙裝飾

34. 可感知捲軸的檢視區塊單位 (vw、vh 等)

vw 和 vh 等檢視區塊單位會自動扣除捲軸大小 (如果保證會顯示，則使用 :root 上宣告的 overflow-y: scroll 或 scrollbar-gutter: stable)，防止將元素設為 100vw 時發生意外的水平溢位。

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

進一步瞭解可感知捲軸的可視區域單位

35. 透過 JavaScript 存取虛擬元素

網頁 API 現在會向 JavaScript 公開 CSS 虛擬元素 (例如 ::before 或 ::after)。

您可以使用 Element.pseudo(type) 擷取 CSSPseudoElement 例項，並使用 Event.pseudoTarget 檢查觸發事件的虛擬元素。

Browser Support

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

進一步瞭解「CSSPseudoElement」

結論

以上就是 Web UI 最新消息的彙整內容。希望您能善用這些功能，打造出色的介面。明年再見！