本頁面由 Cloud Translation API 翻譯而成。

網頁版使用者介面最新消息：2025 年 I/O 大會回顧

Una Kravets

發布日期：2025 年 8 月 14 日

隨著 Google I/O 活動季即將結束，這篇文章將回顧今年活動中分享的 CSS 和網頁 UI 重點。

開發人員夢寐以求的強大功能已在瀏覽器中實現，且跨瀏覽器相容性比以往更快。不過，儘管有這些進展，某些最常見的 UI 模式仍難以正確實作。您通常必須仰賴 JavaScript 架構、複雜的 CSS 技巧和大量的自訂程式碼，才能建構出應該更簡單的元件。

Chrome 團隊與其他瀏覽器供應商、CSSWG 和 WHATWG 等標準機構，以及 Open UI 等社群團體合作，致力於讓這些基本 UI 模式的實作過程真正簡單明瞭。

可自訂的選取選單

<select> 元素是表單的必要元素，但瀏覽器過去會遮蔽其內部結構，導致幾乎無法套用一致且全面的 CSS 樣式。如要建構更完善的 <select>，必須瞭解其建構區塊，也就是 Popover API 和 CSS Anchor Positioning API。

自訂下拉式選單需要選項的浮動方塊，該方塊會顯示在所有其他 UI 元素上方，可輕鬆關閉，並正確管理焦點。Popover API 會處理所有這些事項，且自今年起已達到「Baseline Newly available」狀態，表示所有主要瀏覽器都支援這項 API。

Browser Support

Source

建立快顯視窗需要兩個部分：觸發元素 (例如 <button>) 和快顯視窗元素本身。方法是為快顯視窗提供 id 和 [popover] 屬性，然後在按鈕的 [popovertarget] 屬性中參照該 id。

Popover API 可管理元素的整個生命週期，並提供下列功能：

頂層算繪：不再需要處理 Z-index。
可選用的輕觸關閉功能：使用者點選彈出式視窗區域以外的位置時，系統會關閉彈出式視窗。
自動管理焦點：瀏覽器會處理進出快顯視窗的 Tab 鍵導覽。
可存取的繫結：系統會以原生方式處理基礎互動模型。

`<dialog>` 元素升級

雖然彈出式視窗功能強大，但並非總是合適的選擇。舉例來說，在需要使用者回饋意見的網頁封鎖互動中，使用模式對話方塊 <dialog> 會更合適。

<dialog> 先前缺少 [popover] 的部分便利功能，但情況即將改變。有了新的 closedby="any" 屬性，現在模態對話方塊支援輕觸關閉功能，使用者點選外部或按下 Esc 鍵時，對話方塊就會關閉。

Browser Support

Source

此外，指令呼叫器 ([command] 和 [commandfor]) 提供宣告式方法，可將按鈕連結至動作 (例如使用 command="show-modal" 開啟對話方塊)，不必使用 JavaScript。

Browser Support

Source

	`<dialog>` 元素 + `closedby=any` + 指令呼叫器	`[popover]` 項屬性
主要用途	模式互動 (使用者協議、導覽等)	暫時性 UI (選單、工具提示、資訊卡、祝賀訊息快訊)
可輕易關閉	是	是
Traps Focus	是	否
Inerts 頁面	是	否
宣告式啟用	是	是
導入	元素	屬性
在頂層算繪	是	是
完全可設定樣式	是	是

CSS 錨點定位

彈出式視窗顯示後，必須根據開啟該視窗的元素來定位。以 JavaScript 手動計算這項指標既不可靠，也可能影響效能。

從 Chrome 125 開始，您可以使用 CSS Anchor Positioning API。這項新功能會以宣告方式將一個元素繫結至另一個元素，並在元素靠近螢幕邊緣時自動處理重新定位作業。這項功能是 Interop 2025 計畫的一環，這項跨瀏覽器計畫旨在推出眾所期待的功能，因此我們預期所有主要瀏覽器都會在 2025 年底前支援這項功能。

Browser Support

Source

顯示錨定位置的不同部分如何與程式碼相關聯，例如錨定的頂端邊緣為 anchor(top)，右側邊緣為 anchor(right)。 — 顯示 CSS 錨點位置的圖表。

雖然您可以使用 anchor-name 和 position-anchor 屬性明確連結元素，但規格和 Chrome 133 的更新會在 <popover> 和其叫用 <button> 之間建立隱含錨點關係。這大幅簡化了程式碼，表示您現在可以使用單行 CSS (例如：position-area: bottom span-left) 定位快顯視窗。

chrome.dev 的錨點工具會說明如何使用 position-area 取得您想要的刊登位置：

您可以進一步使用 position-try-fallbacks 定義後備值，讓瀏覽器重新定位錨點，避免錨點超出螢幕範圍。以下展示的快訊會使用這項屬性，進行內建的重新定位邏輯：

可完全自訂的 `<select>`

在先前版本中加入這些建構區塊後，Chrome 134 終於支援 <select> 元素的網頁原生樣式。包括新的 appearance 屬性、新的虛擬元素和 <selectedcontent> 元素。

如要解鎖自訂功能，請將 appearance: base-select; 套用至 <select> 元素及其新的 ::picker(select) 虛擬元素，後者會以選項的下拉式清單為目標。這會公開新的內部樣式設定部分，包括：

<selectedcontent>：代表按鈕中顯示所選選項的內容。
::picker-icon：下拉式箭頭圖示
<option>:checked 和 ::checkmark：用於設定所選選項和勾號指標的樣式

圖表：顯示 select 的新部分，例如 ::picker-icon、selectedcontent 和 ::picker(select)。 — 可自訂選取畫面的組成部分。

這樣一來，選項中就能包含豐富的內容，並精細控管顯示方式。舉例來說，您可以在選項清單中顯示圖示和副標題，但使用 selectedcontent 內的 display: none 在關閉狀態下隱藏這些項目。

最棒的是，這個 API 可以逐步強化。在不支援這些功能的瀏覽器中，使用者仍會看到可正常運作的網頁原生選取畫面。您可獲得自訂外觀，同時保留網頁原生 select 元素的內建無障礙功能、鍵盤導覽和表單整合。

輪轉介面

輪轉介面在網路上隨處可見，不只出現在首頁區塊。包括應用程式商店 UI 等緊密版面配置中的可水平捲動內容。不過，在網頁上建構輪播內容仍是一大挑戰，需要考量許多因素，例如狀態管理、捲動卡頓、互動性和無障礙功能。但仔細想想，輪播效果本質上就是具有額外 UI 輔助功能的精美捲動區域。

開始使用捲軸

如要建構輪播，請先建立溢出容器的項目清單。如要隱藏水平捲軸，但仍允許捲動內容，請使用 scrollbar-width: none。此外，如要讓捲動器「快速貼齊」，請套用 scroll-snap-type 和 scroll-snap-align，確保項目在使用者捲動時貼齊。

使用 `::scroll-button` 切換上一個和下一個項目

Browser Support

Source

Chrome 135 推出的新 ::scroll-button() 虛擬元素，可指示瀏覽器產生有狀態且無障礙的「下一個」和「上一個」按鈕。瀏覽器會自動處理正確的 ARIA 角色、索引標籤順序，甚至在到達開頭或結尾時停用按鈕，完全不需要新增任何 JavaScript。

如要啟動捲動按鈕，請提供內容和無障礙標籤，如下所示：

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

使用 CSS 錨點定位設定這些按鈕的樣式，並相對於父項輪轉介面定位，這是建議的做法。

使用 `::scroll-marker` 直接導覽

Browser Support

Source

如果是點指標或縮圖，::scroll-marker 和 ::scroll-marker-group 虛擬元素會將導覽標記直接與捲動容器中的項目建立關聯。瀏覽器會將群組視為 tablist，並處理鍵盤導覽。

與捲動按鈕類似，您可以使用 content 屬性選擇加入，並提供無障礙標籤，藉此啟動捲動標記。在下列範例中，資料屬性用於設定捲動標記的標籤。此外，請使用 scroll-marker-group 屬性，在 ::scroll-marker-group 中放置捲動標記。最後，使用新的 :target-current 虛擬類別設定有效標記的樣式。以下是基本輪轉介面的範例：

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

捲動狀態查詢

全新的捲動相關 CSS 功能可讓您建立更具互動性的動態輪轉介面。捲動狀態查詢是新的媒體查詢，會根據捲動器的狀態套用。共有三種捲動狀態查詢，可使用 @container 陳述式中的 scroll-state() 存取。這 3 個子類型如下：

scroll-state(snapped)：當元素處於「貼齊」位置時，系統會比對這個值。在輪播內容中，當項目位於輪播內容中央時，即為可見。
scroll-state(stuck)：在父項變成黏滯時，為元素 (例如標題) 設定樣式。
scroll-state(scrollable)：新增視覺指標 (例如淡出效果)，表示還有更多內容可捲動。

合併運用各種策略

結合新的 CSS 輪轉介面基本元素、捲動狀態查詢和錨點定位，您就能更輕鬆地建構自訂互動式輪轉介面。您還可以進一步加入捲動驅動動畫，直接將動畫連結至捲動位置，建立高效能效果，例如項目在捲動至檢視畫面時縮放及淡出。這些動畫會在主要執行緒外執行，提供流暢的體驗。

這個互動式輪播介面結合了 scroll-state() 查詢、::scroll-button、::scroll-marker、CSS 錨點定位和 :target-current。

此外，您可以使用名為 interactivity 的新屬性，協助使用者專注於有效內容。interactivity: inert 可讓使用者透過 CSS 套用惰性，使畫面外的輪轉介面項目無法聚焦，並從無障礙樹狀結構中移除。

進一步瞭解 CSS 輪轉介面。

互動式懸停卡片

懸停資訊卡 (將滑鼠游標懸停在使用者名稱或連結上時顯示的豐富彈出式視窗) 非常實用，但正確建構卻非常困難。光是處理延遲、事件處理和多裝置支援等問題，就可能需要專屬團隊花上好幾個月的時間。不過，我們正在開發新的宣告式解決方案，應能徹底解決這個問題。

使用 `[interestfor]` 顯示興趣觸發的彈出式視窗

宣告式懸浮資訊卡背後的魔法核心是 [interestfor] 屬性。這項即將推出的功能會根據使用者的「興趣」觸發彈出式視窗，舉例來說，使用者對指標裝置感興趣，可能是指標懸停、使用鍵盤進行 Tab 鍵導覽，或是長按或輕觸觸控螢幕。行動互動問題尚未解決。

如要將以點擊為基礎的快顯視窗轉換為以興趣為基礎的快顯視窗，請建構叫用元素 (可以是 <button> 或 <a>)，並為其提供等於 [popover] 元素 id 的 [interestfor] 屬性。HTML 如下所示：

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

瀏覽器會處理所有複雜的事件邏輯，包括：

進入和退出事件：在精細指標裝置上懸停進入，使用鍵盤進行 Tab 鍵導覽，在粗略指標裝置上長按或觸控。
事件延遲：使用單一 CSS 屬性控制進入和退出延遲。

這項功能支援其他快顯視窗功能，例如頂層支援，快顯視窗會在 DOM 樹狀結構其餘部分上方的新層中轉譯。系統會以原生方式處理語意元件繫結和基礎無障礙樹狀結構模型。

設定興趣叫用端的樣式

興趣叫用工具包含一些新功能。其中一項功能是使用 CSS 屬性 interest-target-delay 控制進入和離開延遲。另一項功能是使用 :has-interest 虛擬類別，根據呼叫元素是否具有興趣來設定樣式。

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

`popover="hint"` 和多功能使用者介面

對於興趣呼叫器而言，拼圖的關鍵部分是新的快顯視窗類型：popover="hint"。與其他快顯視窗的主要差異在於，提示快顯視窗開啟時不會關閉其他快顯視窗。如果工具提示或預覽資訊卡應顯示，但使用者不想關閉已開啟的選單或即時通訊視窗，這項功能就非常實用。

Browser Support

	`popover=auto`	`popover=manual`	`popover=hint`
輕觸關閉 (透過點按或 `esc` 鍵)	是	否	是
開啟時會關閉其他 `popover=auto` 元素	是	否	否
開啟時會關閉其他 `popover=hint` 元素	是	否	是
開啟時會關閉其他 `popover=manual` 元素	否	否	否
可使用 JS 開啟及關閉彈出式視窗 (`showPopover()` 或 `hidePopover()`)	是	是	是
下一個分頁鍵停駐點的預設焦點管理	是	是	是
可使用 `popovertargetaction` 隱藏或切換	是	是	是
可在父項 `popover` 中開啟，以保持父項開啟	是	是	是

您可以使用這項功能，以宣告方式建構功能強大的多功能 UI。現在單一按鈕可使用 popovertarget 進行主要點擊動作 (例如開啟通知面板) 和興趣叫用提示快顯視窗，在指標懸停時顯示實用工具提示，自動顯示快顯視窗。

未來是宣告式

本文介紹的功能代表著重大轉變，可望打造更強大且宣告式的網路平台。讓瀏覽器處理複雜且重複的狀態管理和無障礙功能工作，我們就能移除大量 JavaScript、提升效能，並專注於最擅長的事：打造創新且引人入勝的使用者體驗。網頁 UI 的黃金時代才剛開始，歡迎在此追蹤我們的進度，瞭解我們如何打造更強大且更易於使用的網路。

其他資源：

網頁版使用者介面最新消息：2025 年 I/O 大會回顧 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

可自訂的選取選單

Popover API：現已納入 Baseline

<dialog> 元素升級

CSS 錨點定位

可完全自訂的 <select>

輪轉介面

開始使用捲軸

使用 ::scroll-button 切換上一個和下一個項目

使用 ::scroll-marker 直接導覽

捲動狀態查詢

合併運用各種策略

互動式懸停卡片

使用 [interestfor] 顯示興趣觸發的彈出式視窗

設定興趣叫用端的樣式

popover="hint" 和多功能使用者介面

未來是宣告式

網頁版使用者介面最新消息：2025 年 I/O 大會回顧

`<dialog>` 元素升級

可完全自訂的 `<select>`

使用 `::scroll-button` 切換上一個和下一個項目

使用 `::scroll-marker` 直接導覽

使用 `[interestfor]` 顯示興趣觸發的彈出式視窗

`popover="hint"` 和多功能使用者介面