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

CSS 和網頁版 UI 最新動態：2024 年 I/O 大會重點回顧

Una Kravets

網頁平台充滿創新，CSS 和網頁 UI 功能更是這項令人振奮的演進趨勢先鋒。我們正處於網頁 UI 的黃金時代，瀏覽器以空前速度推出新的 CSS 功能，為打造美觀又引人入勝的網頁體驗開創無限可能。這篇網誌文章將深入探討 CSS 的現況，並介紹一些改變遊戲規則的新功能，這些功能重新定義了我們建構網頁應用程式的方式，並在 2024 年 Google I/O 大會上現場展示。

新穎的互動體驗

網路體驗基本上就是您與使用者之間的呼叫和回應，因此投入心力提升使用者互動品質非常重要。我們致力於進行重大改良，讓使用者在網頁內和之間導覽時，享有前所未有的體驗。

捲動驅動動畫

Browser Support

Source

顧名思義，捲動驅動動畫 API 可讓您建立動態捲動式動畫，不必依賴捲動觀察器或其他大量指令碼。

建立捲動驅動動畫

與平台上的時間型動畫運作方式類似，您現在可以使用捲動器的捲動進度，啟動、暫停及反向播放動畫。因此，當您向前捲動時，會看到動畫進度，向後捲動時則會看到相反的進度。您可以運用這項功能，在可視區域中建立部分或全頁的視覺效果，並加入動畫元素，也就是所謂的捲軸式敘事，打造動態視覺衝擊。

捲動驅動動畫可用於醒目顯示重要內容、引導使用者瀏覽故事，或為網頁增添動態效果。

捲動驅動動畫視覺效果

現場示範

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

上述程式碼定義的簡單動畫會變更圖片的不透明度和比例，在檢視區塊中顯示。動畫會根據捲動位置變化。如要建立這項效果，請先設定 CSS 動畫，然後設定 animation-timeline。在本例中，view() 函式會使用預設值，追蹤圖片相對於捲動埠 (在本例中也是檢視區塊) 的位置。

請務必考量瀏覽器支援和使用者偏好設定，尤其是無障礙需求。因此，請使用 @supports 規則檢查瀏覽器是否支援捲動驅動動畫，並將捲動驅動動畫包裝在 @media (prefers-reduced-motion: no-preference) 等使用者偏好查詢中，尊重使用者的動態偏好設定。完成這些檢查後，您就能確定樣式可正常運作，且動畫不會對使用者造成問題。

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

捲動驅動動畫可以是全頁捲動說故事體驗，也可以是更細微的動畫，例如在捲動網頁應用程式時，標題列縮小並顯示陰影。

捲動驅動動畫視覺效果

現場示範

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

本範例使用幾種不同的主要畫面格動畫 (標題、文字、導覽列和背景)，然後將各自的捲動驅動動畫套用至每個動畫。雖然動畫樣式各不相同，但動畫時間軸、最接近的捲動器和動畫範圍都相同，都是從網頁頂端到 150 像素。

捲動驅動動畫的效能優勢

無論是您編寫的自訂指令碼，還是納入額外的第三方依附元件，這個內建 API 都能減少您需要維護的程式碼負擔。這也表示您不需要運送各種捲動觀察器，因此可大幅提升效能。這是因為無論您是直接在 CSS 中使用新的 API，還是使用 JavaScript 勾點，捲動驅動動畫都會在合成器上為可製作動畫的屬性 (例如轉換和不透明度) 製作動畫，因此會在主要執行緒外運作。

Tokopedia 最近使用捲動驅動動畫，在捲動時顯示產品導覽列。使用這個 API 不僅有助於程式碼管理，還能提升效能，帶來許多好處。

當您向下捲動時，捲動驅動動畫會驅動 Tokopedia 上的這個產品導覽列。

「相較於使用傳統的 JS 捲動事件，我們成功減少了多達 80% 的程式碼行數，並發現捲動時的平均 CPU 使用率從 50% 降至 2%。- Tokopedia 資深軟體工程師 Andy Wihalim

捲動效果的未來

我們相信這些效果會讓網路變得更加吸引人，也已開始思考下一步該怎麼做。包括不僅能使用新的動畫時間軸，還能使用捲動點觸發動畫的開始，這類動畫稱為捲動觸發動畫。

未來瀏覽器還會推出更多捲動功能，以下展示的內容結合了這些未來功能。它會使用 CSS scroll-start-target 在挑選器中設定初始日期和時間，並使用 JavaScript scrollsnapchange 事件更新標題日期，因此可輕鬆將資料與擷取的事件同步。

在 Codepen 上查看即時示範

您也可以根據這項資訊，使用 JavaScript scrollsnapchanging 事件即時更新挑選器。

這些特定功能目前僅在 Canary 中透過旗標提供，但可解鎖先前無法或難以在平台中建構的功能，並突顯捲動式互動的未來可能性。

如要進一步瞭解如何開始使用捲動驅動動畫，我們的團隊剛在 Chrome for Developers YouTube 頻道推出全新系列影片。您將透過 Bramus Van Damme 的說明，瞭解捲軸驅動動畫的基本概念，包括這項功能的運作方式、詞彙、建立效果的各種方式，以及如何結合效果來打造豐富的體驗。這是一系列很值得觀看的影片。

查看轉移作業

我們剛介紹了網頁「內部」的動畫功能，但還有一個強大的新功能，可為網頁檢視畫面「之間」製作動畫，打造流暢的使用者體驗，那就是檢視畫面轉場效果。檢視畫面轉場效果為網頁帶來全新層次的流暢度，讓您在單一網頁內的不同檢視畫面之間，甚至是不同網頁之間，建立無縫轉場效果。

Browser Support

Source

Airbnb 是其中一家公司，他們已開始實驗將檢視畫面轉場效果整合至使用者介面，提供流暢無礙的網頁瀏覽體驗。包括房源編輯器側欄、直接編輯相片和新增設施，所有操作都在流暢的使用者流程中完成。

如 Airbnb 所示，這是同文件檢視畫面轉場效果。

Maxwell Barvian 的投資組合，展示檢視區塊之間的檢視區塊轉場效果。

雖然這些全頁面效果美觀又流暢，但您也可以建立微互動，例如這個範例，使用者互動時清單檢視畫面會更新。使用檢視區塊轉場效果，即可輕鬆達成這個效果。

如要在單頁應用程式中快速啟用檢視區塊轉場效果，只要使用 document.startViewTransition 包裝互動，並確保每個轉場元素都有 view-transition-name，無論是內嵌或使用 JavaScript 動態建立 DOM 節點，都一樣簡單。

示範圖片

現場示範

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

查看轉換類別

檢視區塊轉換名稱可用於將自訂動畫套用至檢視區塊轉換，但如果轉換的元素很多，這項作業可能會很麻煩。今年首度推出的檢視區塊轉場效果更新，簡化了這個問題，並導入建立檢視區塊轉場效果類別的功能，可套用至自訂動畫。

Browser Support

Source

查看轉場效果類型

檢視區塊轉場效果的另一項重大改進，是支援檢視區塊轉場效果類型。如要在網頁瀏覽之間進行動畫處理時，使用不同類型的視覺檢視畫面轉場效果，檢視畫面轉場類型就非常實用。

Browser Support

Source

舉例來說，您可能希望首頁以不同方式動畫效果轉場至網誌頁面，而網誌頁面則以其他方式動畫效果返回首頁。或者，您可能希望頁面以不同方式切換，例如這個範例，從左到右，反之亦然。先前這項作業相當繁瑣。您可以將類別新增至 DOM 來套用樣式，然後必須移除類別。有了檢視區塊轉場效果類型，瀏覽器就能清理舊的轉場效果，不必在啟動新的轉場效果前手動執行這項操作，為您省下時間。

分頁示範的錄製內容。類型會決定要使用的動畫。樣式表中的樣式會因啟用的轉場效果類型而有所不同。

您可以在 document.startViewTransition 函式中設定型別，該函式現在可接受物件。update 是更新 DOM 的回呼函式，而 types 則是包含型別的陣列。

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

多頁面檢視轉換

網路之所以強大，是因為它非常廣闊。許多應用程式不只是單一網頁，而是包含多個網頁的強大架構。因此，我們很高興宣布，Chromium 126 將支援跨文件檢視區塊轉換，適用於多頁面應用程式。

Browser Support

Source

這組新的跨文件功能包括位於同源的網頁體驗，例如從 web.dev 瀏覽至 web.dev/blog，但不包括跨源瀏覽，例如從 web.dev 瀏覽至 blog.web.dev 或其他網域 (如 google.com)。

與同文件檢視區塊轉換的主要差異之一，在於您不需要使用 document.startViewTransition() 包裝轉換。請改用 CSS @view-transition at 規則，選擇加入檢視區塊轉場效果的兩個頁面。

@view-transition {
  navigation: auto;
}

如要取得更自訂的效果，可以使用新的 pageswap 或 pagereveal 事件監聽器，透過 JavaScript 連結，存取檢視區塊轉換物件。

您可以使用 pageswap 在舊版快照建立前，對外送頁面進行最後的變更，並使用 pagereveal 在初始化後開始算繪前，自訂新頁面。

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

在多頁面應用程式中顯示檢視區塊轉場效果。請參閱示範連結。

我們預計在日後擴展檢視區塊轉場效果，包括：

範圍轉換：可將轉換限制在 DOM 子樹狀結構中，讓網頁的其餘部分繼續保持互動，並支援同時執行的多個檢視區塊轉換。
手勢驅動的檢視畫面轉場效果：使用拖曳或滑動手勢觸發跨文件檢視畫面轉場效果，在網路上提供更接近原生的體驗。
CSS 中的導覽比對：直接在 CSS 中自訂跨文件檢視區塊轉場效果，不必使用 JavaScript 中的 pageswap 和 pagereveal 事件如要進一步瞭解多頁面應用程式的檢視區塊轉場效果，包括如何使用預先算繪功能以最高效能設定這些效果，請觀看 Bramus Van Damme 的演講：

支援引擎的 UI 元件：簡化複雜互動

建構複雜的網路應用程式並不容易，但 CSS 和 HTML 不斷演進，讓這個過程變得更容易管理。新功能和強化功能可簡化 UI 元件的建立作業，讓您專心打造優質體驗。這項工作由多個重要標準機構和社群團體共同完成，包括 CSS 工作群組、Open UI 社群群組和 WHATWG (Web Hypertext Application Technology Working Group)。

開發人員的一大痛點是看似簡單的要求：能夠設定下拉式選單 (select 元素) 的樣式。雖然表面上看起來很簡單，但這其實是個複雜的問題，牽涉到平台許多部分，包括版面配置和算繪、捲動和互動、使用者代理程式樣式和 CSS 屬性，甚至是 HTML 本身。

選取含有選項的選項資料清單、觸發按鈕、指標箭頭和所選選項。 — 分解選取內容的各個部分

下拉式選單由許多部分組成，且包含許多必須考量的狀態，例如：

鍵盤繫結 (進入/退出互動模式)
按一下即可關閉
管理作用中的彈出式視窗 (開啟一個彈出式視窗時關閉其他視窗)
管理 Tab 鍵焦點
以視覺化方式呈現所選選項值
箭頭互動樣式
狀態管理 (開啟/關閉)

目前自行管理所有這些狀態並不容易，但平台也不會讓這項工作變得簡單。為解決這個問題，我們將這些片段拆開，並推出幾項原始功能，不僅能設定下拉式選單的樣式，還能執行更多作業。

首先，我們推出了名為 popover 的全域屬性，很高興在幾週前宣布這項屬性已達到 Baseline 新推出的狀態。

Browser Support

Source

Popover 元素會以 display: none 隱藏，直到透過呼叫器 (例如按鈕) 或 JavaScript 開啟為止。如要建立基本快顯視窗，請在元素上設定快顯視窗屬性，並使用 popovertarget 將其 ID 連結至按鈕。現在，按鈕是呼叫端，

示範圖片

現場示範

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

啟用 popover 屬性後，瀏覽器會處理許多重要行為，不必額外編寫指令碼，包括：

升級至頂層。：位於網頁其他部分的上方，因此不必使用 z-index。
輕觸即可關閉功能：點選彈出式視窗區域以外的地方，即可關閉彈出式視窗並返回焦點。
預設分頁焦點管理。：開啟快速鍵會將下一個分頁停止點設在快速鍵內。
內建鍵盤繫結。：按下 esc 鍵或切換兩次，即可關閉彈出式視窗並返回焦點。
預設元件繫結。：瀏覽器會將彈出式視窗與觸發元素建立語意連結。

您可能每天都在使用這個快顯視窗 API，只是未曾發覺。GitHub 在首頁的「new」選單和提取要求審查總覽中，實作了快顯視窗。他們使用 popover polyfill 逐步強化這項功能，並在 GitHub 的 Keith Cirkel 大力協助下，建構出支援舊版瀏覽器的功能。

「我們遷移至 Popover 後，實際淘汰了數千行程式碼。Popover 讓我們不必再與神奇的 z-index 數字奮戰，而且能透過宣告式按鈕行為建立正確的無障礙樹狀結構關係，內建的焦點行為也讓我們的設計系統更容易以正確方式實作模式。- GitHub 軟體工程師 Keith Cirkel

為進場和退場效果製作動畫

使用彈出式視窗時，您可能需要加入一些互動元素。過去一年，我們推出了四項全新互動功能，支援動畫式快顯視窗。包括：

能夠在主要畫面格時間軸上製作 display 和 content-visibility 的動畫。

使用 allow-discrete 關鍵字的 transition-behavior 屬性，可啟用 display 等離散屬性的轉場效果。

Browser Support

Source

@starting-style 規則，可將進入效果從 display: none 動畫化，並進入頂層。

Browser Support

Source

疊加層屬性，可控制動畫期間的頂層行為。

Browser Support

Source

無論是彈出式視窗或對話方塊，只要是動畫效果會將元素移至頂層，這些屬性都適用。如果對話方塊有背景，整體看起來會像這樣：

示範圖片

現場示範

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

首先，請設定 @starting-style，讓瀏覽器知道要將哪些樣式從 DOM 製作成動畫。對話方塊和背景都會執行這項操作。接著，為對話方塊和背景設定開啟狀態的樣式。如果是對話方塊，這會使用 open 屬性；如果是快顯視窗，則會使用 ::popover-open 虛擬元素。最後，使用 allow-discrete 關鍵字為 opacity、display 和 overlay 製作動畫，啟用動畫模式，讓個別屬性可以轉換。

錨定位置

彈出式視窗只是故事的開端。令人振奮的更新：Chrome 125 版起支援錨點定位。

Browser Support

Source

使用錨點定位時，瀏覽器只需幾行程式碼，就能處理將定位元素繫結至一或多個錨點元素的邏輯。在下列範例中，每個按鈕都錨定一個簡單的工具提示，位置在底部中央。

示範圖片

現場示範

在 CSS 中，使用錨定元素 (本例為按鈕) 的 anchor-name 屬性，以及定位元素 (本例為工具提示) 的 position-anchor 屬性，設定錨定定位關係。接著，使用 anchor() 函式，相對於錨點套用絕對或固定定位。以下程式碼會將工具提示頂端放在按鈕底部。

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

或者，您也可以直接在錨點函式中使用錨點名稱，並略過 position-anchor 屬性。錨定至多個元素時，這項功能非常實用。

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

最後，針對 justify 和 align 屬性使用新的 anchor-center 關鍵字，將定位元素置中對齊錨點。

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

雖然使用錨點定位搭配快顯視窗非常方便，但錨點定位絕對不是使用快顯視窗的必要條件。錨點定位功能可用於任何兩個以上的元素，建立視覺關係。事實上，以下羅曼·科馬羅夫的文章啟發了這個範例，顯示當您將游標懸停在清單項目上或使用 Tab 鍵瀏覽時，底線樣式會錨定在清單項目上。

示範圖片

現場示範

這個範例使用錨點函式，透過 left、right 和 bottom 的實體屬性設定錨點位置。將滑鼠游標懸停在其中一個連結上時，目標錨點會變更，瀏覽器也會移動目標來套用定位，同時為顏色加上動畫效果，營造出整齊的感覺。

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

`inset-area`定位

除了您可能用過的預設方向絕對定位之外，還有一種新的版面配置機制，已納入錨點定位 API 的一部分，稱為插邊區域。內嵌區域可讓您輕鬆將定位元素放置在各自的錨點相對位置，並在 9 格格線中運作，錨定元素位於中心。舉例來說，inset-area: top 會將定位元素放在頂端，inset-area: bottom 則會將定位元素放在底部。

第一個錨點範例的簡化版本如下所示：inset-area

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

您可以將這些位置值與範圍關鍵字合併使用，從中心位置開始，向左或向右擴展，或擴展至所有可用的欄或列。您也可以使用邏輯屬性。如要更輕鬆地查看及選取這個版面配置機制，請在 Chrome 125 以上版本中使用這項工具：

由於這些元素已錨定，因此定位元素會隨著錨點移動，在網頁上動態移動。因此在這個案例中，我們有以容器查詢樣式的資訊卡元素，這些元素會根據內建大小調整大小 (這是媒體查詢無法做到的事)，而錨定選單會隨著資訊卡 UI 的變化，一併調整新版面配置。

示範圖片

現場示範

使用 `position-try-options` 設定動態錨點位置

結合使用彈出式視窗和錨點定位，即可輕鬆建立選單和子選單導覽。此外，當錨定元素到達檢視區塊邊緣時，您也可以讓瀏覽器處理定位變更。你可以透過幾種方式執行這項操作。第一種是建立自己的定位規則。在本例中，子選單一開始會位於「店面」按鈕的右側。不過，如果選單右側空間不足，您可以建立 @position-try 區塊，並將自訂 ID 設為 --bottom。然後，使用 position-try-options 將這個 @position-try 區塊連結至錨點。

現在，瀏覽器會在這些錨定狀態之間切換，先嘗試正確位置，然後移至底部。而且可以透過流暢的轉場效果完成。

示範圖片

現場示範

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

除了明確的定位邏輯，如果您想要一些基本互動，例如在區塊或內嵌方向中翻轉錨點，瀏覽器也會提供幾個關鍵字。

position-try-options: flip-block, flip-inline;

如要輕鬆翻轉，請善用這些翻轉關鍵字值，完全略過撰寫 position-try 定義。現在只要幾行 CSS，就能擁有可正常運作的錨定元素，並根據位置調整。

示範圖片

現場示範

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

進一步瞭解如何使用錨定位置。

分層式 UI 的未來

我們隨處可見繫結體驗，而本文介紹的這組功能，是釋放創意、更妥善控制錨點定位元素和分層介面的絕佳起點。但這只是第一步。舉例來說，目前 popover 只能搭配按鈕做為叫用元素，或搭配 JavaScript 使用。以維基百科風格的預覽畫面為例，這種模式在網頁平台隨處可見，因此必須能夠互動，並從連結和使用者感興趣的內容觸發彈出式視窗，不一定要點選，例如懸停或分頁焦點。

為了滿足這些需求，並讓您更輕鬆地使用內建的適當無障礙掛鉤重新建立這些體驗，我們正在開發 interesttarget，這是 Popover API 的下一步。這項無障礙問題的解決難度很高，理想行為方面也有許多未解的疑問，但如果能在平台層級解決並標準化這項功能，應能為所有人提升體驗。

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

此外，在 Keith Cirkel 和 Luke Warlow 這兩位第三方開發人員的努力下，Canary 版還提供另一個適用於未來的通用呼叫器 (invoketarget) 供您測試。invoketarget 支援 popovertarget 提供的宣告式開發人員體驗，可針對所有互動式元素 (包括 <dialog>、<details>、<video>、<input type="file"> 等) 正規化快顯視窗。

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

我們知道這個 API 目前尚未涵蓋某些用途。舉例來說，設定將錨定元素連結至錨點的箭頭樣式 (尤其是錨定元素的位置變更時)，以及讓元素「滑動」並留在可視區域中，而不是在到達其周框時貼齊至設定的其他位置。我們很期待推出這項強大的 API，也期待在未來進一步擴充其功能。

可設定樣式的選取畫面

透過 popover 和 anchor 雙管齊下，團隊終於能啟用可自訂的選取下拉式選單，好消息是，我們已取得許多進展。壞消息是，這項 API 目前仍處於實驗階段。不過，我很樂意分享一些即時展示和進度更新，並希望獲得一些意見回饋。首先，我們在如何讓使用者選擇加入全新自訂精選體驗方面有所進展。目前正在開發的解決方案是使用 CSS 中的 appearance 屬性，並設為 appearance: base-select。設定外觀後，系統會啟用可自訂的全新選取體驗。

select {
  appearance: base-select;
}

除了 appearance: base-select 之外，還有幾項新的 HTML 更新。包括將選項包裝在 datalist 中進行自訂，以及在選項中加入任意非互動式內容 (例如圖片)。您也可以使用新元素 <selectedoption>，將選項內容反映到元素本身，然後根據自身需求進行自訂。這個元素非常實用。

示範圖片

現場示範

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

以下程式碼示範如何在 Gmail UI 中自訂 <selectedoption>，以視覺化圖示代表所選的回覆類型，節省空間。您可以在 selectedoption 中使用基本顯示樣式，將選項樣式與預覽樣式區分開來。在這種情況下，選項中顯示的文字可以在 selectedoption 中以視覺化方式隱藏。

示範圖片

現場示範

selectedoption .text {
  display: none;
}

為這個 API 重複使用 <select> 元素的最大優點之一，就是回溯相容性。在這個國家/地區選取畫面中，您可以看到自訂的 UI，選項中包含國旗圖片，方便使用者剖析內容。由於不支援的瀏覽器會忽略無法解讀的程式碼行 (例如自訂按鈕、datalist、selectedoption 和選項中的圖片)，因此備用選項會與目前的預設選取 UI 類似。

不支援的瀏覽器會沿用目前的選取體驗。 — 左側為支援的瀏覽器，右側為不支援的瀏覽器。

有了可自訂的選取器，就能實現無限可能。我特別喜歡這個 Airbnb 風格的國家/地區選取器，因為它採用了適用於回應式設計的巧妙樣式。即將推出的可設定樣式的選取器可讓您執行這項操作，以及更多功能，因此是網頁平台不可或缺的項目。

示範圖片

現場示範

專屬手風琴

Chrome 團隊專注的 UI 元件不只有解決選取樣式 (以及隨附的所有項目)。第一個額外元件更新是建立專屬手風琴式選單，一次只能開啟手風琴式選單中的一個項目

Browser Support

如要啟用這項功能，請為多個詳細資料元素套用相同名稱值，藉此建立連結的詳細資料群組，就像一組單選按鈕一樣

獨家風琴式選單示範

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

`:user-valid`和`:user-invalid`

:user-valid 和 :user-invalid 虛擬類別也改善了 UI 元件。:user-valid 和 :user-invalid 虛擬類別最近已在所有瀏覽器中穩定運作，行為與 :valid 和 :invalid 虛擬類別類似，但只會在使用者與輸入內容進行大量互動後，才比對表單控制項。也就是說，判斷表單值是否已互動或「髒污」，所需程式碼大幅減少，這對提供使用者意見回饋非常實用，且減少了過去執行這項操作時所需的許多指令碼。

Browser Support

Source

操作示範螢幕側錄

現場示範

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

進一步瞭解如何使用 user-* 表單驗證虛擬元素。

`field-sizing: content`

最近推出的另一項實用元件更新是 field-sizing: content，可套用至輸入內容和文字區域等表單控制項。這可讓輸入內容的大小視內容而定擴大 (或縮小)。field-sizing: content 對於文字區域特別實用，因為您不再受限於固定大小，不必在過小的輸入框中向上捲動，即可查看提示中較早撰寫的部分。

Browser Support

Source

操作示範螢幕側錄

現場示範

textarea, select, input {
  field-sizing: content;
}

進一步瞭解欄位大小。

`<select>`的`<hr>`

在選取項目中啟用 <hr> 或水平規則元素的功能，也是一項實用的小型元件功能。雖然這項功能在語意上用途不大，但有助於在選取清單中清楚分隔內容，特別是您可能不一定想與 optgroup 分組的內容，例如預留位置值。

選取螢幕截圖

選取「現場示範」

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

進一步瞭解如何在 select 中使用 hr

提升生活品質

我們不斷進行疊代，不只是為了互動和元件。過去一年內，我們也推出了許多其他生活品質更新。

使用先行條件巢狀結構

原生 CSS 巢狀結構已於去年在所有瀏覽器中推出，並支援預先讀取功能，因此不再需要在元素名稱前加上 &。這樣巢狀結構的感覺更符合人體工學，也與我過去習慣的方式類似。

Browser Support

Source

我最喜歡 CSS 巢狀結構的一點，就是它能讓您以視覺化方式封鎖元件，並在這些元件中加入狀態和修飾符，例如容器查詢和媒體查詢。先前，我習慣將所有這些查詢分組放在檔案底部，以利於指定。現在，您可以將這些註解寫在程式碼旁邊，方便查看

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

區塊版面配置的 align-content

另一個很棒的變更，是可以在區塊版面配置中使用 align-content 等置中機制。也就是說，您現在可以在 div 中垂直置中，不必套用彈性或格線版面配置，也不會產生您可能不想要的副作用，例如防止邊界摺疊。

Browser Support

螢幕截圖

現場示範

div {
  align-content: center;
}

文字換行：平衡和美觀

說到版面配置，文字版面配置也獲得改善，新增了 text-wrap: balance 和 pretty。text-wrap: balance 用於更一致的文字區塊，而 text-wrap: pretty 則著重於減少文字最後一行中的單一字元。

操作示範螢幕側錄

現場示範

在下列示範中，您可以拖曳滑桿，比較 balance 和 pretty 對標題和段落的影響。請嘗試將展示內容翻譯成其他語言！

h1 {
  text-wrap: balance;
}

進一步瞭解 text-wrap: balance。

國際字體排版更新

CJK 文字功能排版更新在過去一年獲得許多實用更新，例如 word-break: auto-phrase 功能，可將行換行至自然片語界線。

Browser Support

word-break: auto-phrase 會在自然片語界線處換行。 — 「`word-break: normal`」和「`word-break: auto-phrase`」的比較結果

以及 text-spacing-trim，可套用標點符號之間的字元間距，提升中文、日文和韓文排版的易讀性，讓結果更賞心悅目。

Browser Support

Source

CJK 句號的右半部會透過 text-spacing-trim 移除。 — 如果標點符號連續出現，應移除 CJK 句號的右半部。

相對顏色語法

在色彩主題方面，我們推出了相對色彩語法這項重大更新。

在本範例中，這裡的顏色使用以 Oklch 為基礎的主題。隨著色調值根據滑桿調整，整個主題也會隨之變更。這可以使用相對顏色語法達成。背景會根據色相使用主色，並調整亮度、色度和色相通道來調整值。--i 是值漸層清單中的同層級索引，顯示如何結合步進、自訂屬性和相對顏色語法來建構主題。

操作示範螢幕側錄

現場示範

在下列示範中，您可以拖曳滑桿，比較 balance 和 pretty 對標題和段落的影響。請嘗試將展示內容翻譯成其他語言！

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

「`light-dark()`」函式

搭配 light-dark() 函式，主題設定變得更加動態且簡化。

Browser Support

Source

light-dark() 函式是人體工學方面的改良措施，可簡化顏色主題選項，讓您以更簡潔的方式編寫主題樣式，如 Adam Argyle 的視覺化圖表所示。過去您需要兩組不同的程式碼 (預設主題和使用者偏好查詢)，才能設定主題選項。現在，您可以使用 light-dark() 函式，在同一行 CSS 中為淺色和深色主題編寫這些樣式選項。

light-dark() 的視覺化呈現。詳情請參閱示範。

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

如果使用者選取淺色主題，按鈕會顯示淺藍色背景。如果使用者選取深色主題，按鈕會顯示深藍色背景。

`:has()`選取器

談到現代 UI，就不能不提去年最受矚目的互通性重點之一，也就是 :has() 選取器，這項功能已於去年 12 月在各個瀏覽器推出。這個 API 改變了撰寫邏輯樣式的方式。

Browser Support

Source

:has() 選擇器可讓您檢查子元素是否具有特定子項，或這些子項是否處於特定狀態，基本上也能做為父項選擇器。

在 Tokopedia 上，使用 has() 樣式比較區塊的示範。

:has() 已證明對許多公司特別有用，包括 PolicyBazaar，他們使用 :has() 根據內部內容設定區塊樣式，例如在比較部分，如果區塊中有要比較的方案，或區塊為空白，樣式就會調整。

「有了 :has() 選取器，我們就能淘汰以 JavaScript 為基礎的使用者選取項目驗證，改用 CSS 解決方案，以與先前相同的體驗順暢運作。–PolicyBazaar 技術主管 Aman Soni」

容器查詢

網頁的另一項重大新增功能是容器查詢，這項功能現已推出，且使用率不斷提高。容器查詢可查詢元素上層的內建大小，以便套用樣式，比只能查詢檢視區塊大小的媒體查詢更精細。

Browser Support

Source

Angular 最近在 angular.dev 上推出了美觀的新版說明文件網站，並使用容器查詢，根據頁面上可用的空間設定標題區塊的樣式。因此，即使版面配置從多欄側欄版面配置變更為單欄版面配置，標題區塊也能自行調整。

Angular.dev 網站的標頭資訊卡顯示容器查詢。

如果沒有容器查詢，就難以達成這類效果，而且會影響效能，需要調整大小觀察器和元素觀察器。現在，根據父項大小設定元素樣式非常簡單。

操作示範螢幕側錄

現場示範

重新建立 Angular 標題資訊卡容器查詢。

`@property`

最後，我們很高興 @property 即將納入 Baseline。這項重要功能可為 CSS 自訂屬性 (也稱為 CSS 變數) 提供語意意義，並啟用大量新的互動功能。@property 也支援 CSS 中的情境意義、型別檢查、預設值和備用值。為更多強大功能 (例如範圍樣式查詢) 開啟大門。這項功能以前從未實現，現在為 CSS 語言提供許多深度。

Browser Support

Source

操作示範螢幕側錄

現場示範

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

結論

隨著這些強大的新版 UI 功能在各個瀏覽器上推出，您將能發揮無限創意。捲動驅動動畫和檢視區塊轉換等新穎的互動式體驗，讓網頁更加流暢，互動方式也前所未見。此外，新一代的 UI 元件讓您能輕鬆建構強大的自訂元件，不必完全捨棄原生體驗。最後，架構、版面配置、排版和回應式設計方面的生活品質改善，不僅解決了微小但重要的問題，也為開發人員提供所需工具，以便建構適用於各種裝置、外型規格和使用者需求的複雜介面。

這些新功能可讓您移除第三方指令碼，以使用效能密集型功能，例如捲動說故事和將元素彼此繫結至錨點位置、建構流暢的網頁轉場效果、設定下拉式選單樣式，以及改善程式碼的整體結構。

現在是網頁開發人員大展身手的最佳時機。自 CSS3 推出以來，還沒有任何技術能引起如此大的迴響。我們過去夢想實現的功能，如今終於成真，並成為平台的一部分。正因為有您的支持，我們才能優先開發這些功能，並最終實現。我們正努力簡化繁瑣的作業，讓您能將更多時間用於建構重要事物，例如核心功能和設計細節，讓品牌與眾不同。

如要進一步瞭解這些新功能，請前往 developer.chrome.com 和 web.dev，我們的團隊會在這些網站上分享網頁技術的最新消息。歡迎試用捲動驅動動畫、檢視畫面轉場效果、錨點定位，甚至是可設定樣式的選取器，並告訴我們您的想法。我們很樂意傾聽並提供協助。

CSS 和網頁版 UI 最新動態：2024 年 I/O 大會重點回顧 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

新穎的互動體驗

捲動驅動動畫

建立捲動驅動動畫

捲動驅動動畫視覺效果

現場示範

捲動驅動動畫視覺效果

現場示範

捲動驅動動畫的效能優勢

捲動效果的未來

查看轉移作業

示範圖片

現場示範

查看轉換類別

查看轉場效果類型

多頁面檢視轉換

支援引擎的 UI 元件：簡化複雜互動

Popover API

示範圖片

現場示範

為進場和退場效果製作動畫

示範圖片

現場示範

錨定位置

示範圖片

現場示範

示範圖片

現場示範

inset-area定位

示範圖片

現場示範

使用 position-try-options 設定動態錨點位置

示範圖片

現場示範

示範圖片

現場示範

分層式 UI 的未來

可設定樣式的選取畫面

示範圖片

現場示範

示範圖片

現場示範

示範圖片

現場示範

專屬手風琴

:user-valid和:user-invalid

操作示範螢幕側錄

現場示範

field-sizing: content

操作示範螢幕側錄

現場示範

<select>的<hr>

選取螢幕截圖

選取「現場示範」

提升生活品質

使用先行條件巢狀結構

區塊版面配置的 align-content

螢幕截圖

現場示範

文字換行：平衡和美觀

操作示範螢幕側錄

現場示範

國際字體排版更新

相對顏色語法

操作示範螢幕側錄

現場示範

「light-dark()」函式

:has()選取器

容器查詢

操作示範螢幕側錄

現場示範

@property

操作示範螢幕側錄

現場示範

結論

CSS 和網頁版 UI 最新動態：2024 年 I/O 大會重點回顧

`inset-area`定位

使用 `position-try-options` 設定動態錨點位置

`:user-valid`和`:user-invalid`

`field-sizing: content`

`<select>`的`<hr>`

「`light-dark()`」函式

`:has()`選取器

`@property`