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

Una Kravets

網頁平台充滿創新元素，CSS 和網頁 UI 功能更是這項令人振奮的演進過程中的重要推手。我們正處於網頁使用者介面的黃金時期，新的 CSS 功能以前所未見的速度在各瀏覽器上推出，為創造美觀且引人入勝的網頁體驗開啟無限可能。本篇文章將深入探討 CSS 的現況，並介紹一些最具變革性的新功能，這些功能可重新定義我們建構網頁應用程式的方式，並在 2024 年 Google I/O 大會現場展示。

新穎的互動式體驗

網站體驗基本上是您與使用者之間的呼叫和回應，因此投資優質的使用者互動十分重要。我們一直致力於改善網頁的功能，讓使用者在網頁中和網頁間瀏覽時，能享有前所未有的體驗。

捲動驅動動畫

瀏覽器支援

  • Chrome：115。
  • Edge：115。
  • Firefox：透過標記。
  • Safari：不支援。

資料來源

如同名稱所示，捲動驅動動畫 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 瞭解捲動驅動動畫的基本概念，包括這項功能的運作方式、相關術語、建立效果的各種方式，以及如何結合效果來打造豐富的體驗。這是一個值得一看的影片系列。

查看轉場效果

我們剛剛介紹了可在網頁內製作動畫的強大新功能，但還有另一項強大新功能，稱為「檢視畫面轉場」，可在網頁瀏覽之間製作動畫，打造順暢的使用者體驗。透過檢視畫面轉場效果，您可以讓網頁更流暢，在單一頁面或不同頁面之間，建立不同檢視畫面之間的無縫轉場效果。

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：不支援。
  • Safari：18 歲。

資料來源

Airbnb 是其中一家已開始實驗將檢視轉場效果整合至使用者介面，以提供順暢無礙的網頁導覽體驗的公司。包括房源編輯器側欄，以及編輯相片和新增設施的流程，都能在流暢的使用者流程中完成。

與 Airbnb 相同的檢視畫面轉場效果。
Maxwell Barvian 的投資組合，展示各個檢視畫面之間的檢視畫面轉場效果。

雖然這些全頁效果看起來很美觀，且使用起來很順暢，但您也可以建立微互動，例如在這個範例中，當使用者與清單檢視畫面互動時，系統會更新清單檢視畫面。您可以輕鬆透過檢視畫面轉場效果，達到這種效果。

如要快速在單頁應用程式中啟用檢視畫面轉場效果，只要使用 document.startViewTransition 包裝互動內容，並確保每個轉場元素都具有 view-transition-name、內嵌或在建立 DOM 節點時動態使用 JavaScript。

示範圖片

現場示範

 
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;
}

查看轉換類別

您可以使用檢視畫面轉場名稱，為檢視畫面轉場套用自訂動畫，但如果有許多元素要轉場，這麼做可能會很麻煩。今年第一個 View 轉場效果更新功能可簡化這項問題，並提供建立 View 轉場效果類別的功能，可套用至自訂動畫。

瀏覽器支援

  • Chrome：125。
  • Edge：125。
  • Firefox：不支援。
  • Safari：18.2。

查看轉場類型

檢視畫面轉場功能的另一項重大改進，是支援檢視畫面轉場類型。如果您想在網頁瀏覽動畫中使用不同類型的視覺瀏覽轉場效果，這類轉場類型就很實用。

瀏覽器支援

  • Chrome：125。
  • Edge：125。
  • Firefox：不支援。
  • Safari：18 歲。

舉例來說，您可能希望首頁的動畫效果與網誌頁面返回首頁的動畫效果不同。或者，您可能想要以不同的方式切換頁面，例如從左到右和從右到左。這項操作在先前相當複雜，您可以將類別新增至 DOM 以套用樣式，但之後必須移除類別。瀏覽器可透過 View-transition-types 清除舊的轉場效果，無須您在啟動新轉場效果前手動清除，這項工作會由瀏覽器自動執行。

分頁示範的錄製影片。類型會決定要使用的動畫。有效的轉場類型會在樣式表單中分隔樣式。

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

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

多頁面瀏覽轉換

網際網路之所以強大，是因為它具有廣泛的應用方式。許多應用程式不僅僅是單一網頁，而是包含多個網頁的強大網頁集合。因此，我們很高興宣布，在 Chromium 126 中，我們為多頁應用程式提供跨文件檢視畫面轉場支援功能。

瀏覽器支援

  • Chrome：126。
  • Edge：126。
  • Firefox：不支援。
  • Safari 技術預覽：支援。

這套新的跨文件功能包含同源網頁體驗，例如從 web.dev 前往 web.dev/blog，但不包含跨來源導覽，例如從 web.dev 前往 blog.web.dev，或前往 google.com 等其他網域。

與同一個文件檢視畫面轉場效果的其中一個主要差異，是您不需要使用 document.startViewTransition() 包裝轉場效果。請改用 CSS @view-transition at-rule，為參與檢視畫面轉場的兩個網頁都選擇加入。

@view-transition {
  navigation: auto;
}

如要取得更多自訂效果，您可以使用新的 pageswap 或 pagereveal 事件監聽器掛接 JavaScript，這樣就能存取 View 轉場物件。

您可以使用 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)。

開發人員的一大痛點是看似簡單的要求：能夠為下拉式選單 (選取元素) 設定樣式。雖然這項問題看似簡單，但實際上卻相當複雜，因為它涉及許多平台元件，包括版面配置和算繪、捲動和互動、使用者代理程式樣式和 CSS 屬性，甚至是 HTML 本身的變更。

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

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

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

目前很難自行管理所有狀態，而且平台也沒有提供簡單的管理方式。為解決這個問題，我們將這些部分拆解，並推出幾項基本功能，讓您可以設定下拉式選單的樣式，但也能執行更多操作。

Popover API

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

瀏覽器支援

  • Chrome：114。
  • Edge：114。
  • Firefox：125。
  • Safari：17。

資料來源

彈出式元素會透過 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>

啟用彈出式視窗屬性後，瀏覽器就能處理許多重要行為，無須額外使用任何指令碼，包括：

  • 升級至頂層。：在頁面其他部分上方建立獨立的圖層，這樣您就不必操作 z-index。
  • 輕鬆關閉功能：按一下彈出式視窗區域外部，系統就會關閉彈出式視窗並返回焦點。
  • 預設分頁焦點管理。：開啟彈出式視窗後，下一個分頁會在彈出式視窗中停止。
  • 內建鍵盤繫結：按下 esc 鍵或雙重切換可關閉彈出式視窗並返回焦點。
  • 預設元件繫結。：瀏覽器會將彈出式視窗與其觸發事件連結。
GitHub 主畫面
「GitHub」GitHub首頁的選單。

您現在可能正在使用這個彈出式視窗 API，但未察覺。GitHub 在首頁的「New」選單和提取要求審查總覽中，實作了彈出式視窗。他們使用 Oddbird 開發的 彈出式視窗 polyfill，逐步強化這項功能，並獲得 GitHub 內部人員 Keith Cirkel 的協助，讓這項功能支援舊版瀏覽器。

「我們已成功將 1,000 多行程式碼淘汰，並改用彈出式視窗。Popover 可協助我們解決魔法 z-index 數字的問題，讓我們能透過宣告式按鈕行為建立正確的無障礙樹狀結構關係，並內建焦點行為，讓我們的設計系統能以正確的方式實作模式。-GitHub 軟體工程師 Keith Cirkel”

為進入和離開效果加入動畫

使用彈出式視窗時，您可能會想要加入一些互動功能。過去一年推出了四項新的互動功能，可支援彈出式視窗動畫。包括：

在主要畫面格時間軸上為 display 和 content-visibility 設定動畫。

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

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：129。
  • Safari：17.4。

資料來源

@starting-style 規則，用於為從 display: none 進入 top-layer 的動畫效果設定動畫。

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：129。
  • Safari：17.5。

資料來源

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

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

無論是彈出式視窗或對話方塊，只要是您要加入頂層的動畫元素，都可以使用這些屬性。總而言之，如果對話方塊有背景，就會像這樣：

示範圖片

現場示範

 
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 現已支援錨點定位。

瀏覽器支援

  • Chrome：125。
  • Edge：125。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

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

示範圖片

現場示範

在 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;
}

雖然使用錨點定位搭配彈出式視窗非常方便，但彈出式視窗絕非使用錨點定位的必要條件。錨點定位可與任何兩個 (或更多) 元素搭配使用，建立視覺關聯。事實上，下列範例是受到 Roman Komarov 的文章啟發，展示當您將游標懸停或在清單項目上按下 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 設定動態錨點位置

您可以結合彈出式視窗和錨點位置，輕鬆建立選單和子選單導覽功能。當您在檢視區邊緣使用錨定元素時，也可以讓瀏覽器處理位置變更。您可以透過幾種方式完成這項操作。第一個方法是自行建立定位規則。在這種情況下，子選單一開始會位於「storefront」按鈕的右側。不過，如果選單右側沒有足夠的空間，您可以建立 @position-try 區塊，並為其指定 --bottom 自訂 ID。接著，您可以使用 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。對於 Wikipedia 風格的預覽畫面 (網頁平台上常見的模式)，使用者必須能夠與之互動，並且能夠透過連結和使用者感興趣的內容觸發彈出式視窗，而不需要點選連結，例如游標懸停或分頁焦點。

為了進一步改善彈出式視窗 API，我們正在開發 interesttarget，以滿足這些需求，並透過內建的適當無障礙鉤子，更輕鬆地重現這些體驗。這是一項難以解決的無障礙功能問題，因為理想行為的相關問題仍有很多未知數，但在平台層級解決並標準化這項功能，應可改善所有使用者的體驗。

<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 也開發了另一個未來通用的一般叫用器 (invoketarget)，可在 Canary 中進行測試。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: 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 中隱藏。

示範圖片

gmail 示範

現場示範

 
selectedoption .text {
  display: none;
}

重複使用此 API 的 <select> 元素，其中一個最大優點就是回溯相容性。在這個國家/地區選單中，您可以看到自訂的 UI，其中的選項會顯示旗幟圖片，方便使用者剖析內容。由於不支援的瀏覽器會忽略不瞭解的程式碼行，例如自訂按鈕、資料清單、selectedoption 和選項中的圖片，因此備用方案會類似目前的預設選取 UI。

不支援的瀏覽器會獲得目前的選取體驗。
左側為支援的瀏覽器視覺效果，右側為不支援的瀏覽器備用方案。

有了可自訂的選取器，您可以發揮無限的創意。我特別喜歡這個 Airbnb 風格的國家/地區選取器，因為它採用了回應式設計的巧妙樣式。您可以使用即將推出的樣式選取器執行這項操作，以及更多其他操作，這項功能是網頁平台急需的新增功能。

示範圖片

現場示範

專屬手風琴

解決選取樣式 (以及隨附的所有部分) 並非 Chrome 團隊唯一專注的 UI 元件。第一個額外元件更新功能是建立專屬摺疊式元件，在這種摺疊式元件中，一次只能開啟摺疊式元件中的一個項目

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：130。
  • Safari：17.2。

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

獨家 Accordion 示範
<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

另一項 UI 元件改善項目是 :user-valid 和 :user-invalid 擬似類別。:user-valid 和 :user-invalid 擬似類別最近在所有瀏覽器中都已穩定運作，其行為與 :valid 和 :invalid 擬似類別相似，但只有在使用者與輸入內容進行大量互動後，才會比對表單控制項。這表示您只需要少量程式碼，即可判斷表單值是否已與使用者互動，或是否已變更為「髒值」。這對於提供使用者意見回饋非常實用，而且可減少過去執行這項操作所需的大量指令碼。

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：88。
  • Safari：16.5。

資料來源

操作示範螢幕側錄

現場示範

 
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，可套用至輸入框和 textarea 等表單控制項。這可讓輸入內容的大小視內容而定而增加 (或縮小)。field-sizing: content 對於 textarea 特別實用，因為您不再需要將輸入框調整為固定大小，這樣就不會在輸入框太小時，需要向上捲動畫面，才能查看提示訊息中先前輸入的內容。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

操作示範螢幕側錄

現場示範

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

進一步瞭解欄位大小。

<select>的<hr>

在選取項目中啟用 <hr> 或水平線元素，是另一項小巧但實用的元件功能。雖然這項功能的語意用途不大，但確實有助於妥善區分選取清單中的內容，尤其是您不一定想與 optgroup 分組的內容，例如預留位置值。

選取「螢幕截圖」

在 Chrome 中以淺色和深色主題選取 hr 的螢幕截圖

選取「現場示範」

 
<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>

進一步瞭解如何在選取時使用 hr

改善生活品質

我們會持續進行迭代，而且不只針對互動和元件進行迭代。過去一年，我們也推出了許多其他提升使用體驗的更新。

使用先行判斷的巢狀結構

原生 CSS 巢狀結構去年已在所有瀏覽器中推出，並自此改良為支援前瞻功能，也就是說，元素名稱前方的 & 不再是必要條件。這樣巢狀結構的使用體驗會更符合人體工學，也更接近我過去的使用習慣。

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：117。
  • Safari：17.2。

資料來源

我最喜歡 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 中執行垂直置中等操作，而無需套用 Flexbox 或 GridLayout，也不會產生邊距收合等不必要的副作用。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：125。
  • Safari：17.4。

螢幕截圖

現場示範

 
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 功能，可在自然片語界線處換行。

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：不支援。
  • Safari：不支援。

word-break: auto-phrase 會在自然片語邊界處換行。
word-break: normal 與 word-break: auto-phrase 的比較

text-spacing-trim 會在標點符號之間套用字間距，改善中文、日文和韓文排版的可讀性，讓結果看起來更賞心悅目。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

使用 text-spacing-trim 移除 CJK 字元的右半部。
如果標點符號出現在同一行，請移除 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() 函式，主題設定變得更動態且簡單。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：120。
  • Safari：17.5。

資料來源

light-dark() 函式是人體工學改善功能，可簡化色彩主題設定選項，讓您以更精簡的方式編寫主題樣式，如 Adam Argyle 在這個圖表中所示。先前，您需要兩個不同的程式碼區塊 (預設主題和使用者偏好查詢) 才能設定主題選項。您現在可以使用 light-dark() 函式，在同一個 CSS 行中為淺色和深色主題撰寫這些樣式選項。

light-dark() 的視覺化呈現。詳情請參閱示範影片。
html {
  color-scheme: light dark;
}

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

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

:has()選取器

談到現代化 UI，就不能不提過去一年最具影響力的互通性亮點之一，也就是去年 12 月推出的 :has() 選取器。這個 API 可讓您以邏輯風格編寫程式碼。

瀏覽器支援

  • Chrome：105。
  • Edge：105。
  • Firefox：121。
  • Safari：15.4。

資料來源

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

示範如何使用 has() 為 Tokopedia 上的比較區塊設定樣式。

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

「有了 :has() 選取器，我們就能消除使用者選取項目的 JavaScript 驗證，並以 CSS 解決方案取而代之，這項解決方案可提供與先前相同的體驗，並能順暢運作。」– PolicyBazaar 技術主管 Aman Soni

容器查詢

另一個新增至網頁的關鍵功能是容器查詢，可用於查詢元素父項的內在大小，以便套用樣式：比起只會查詢檢視區大小的媒體查詢，容器查詢可提供更精細的查詢。

瀏覽器支援

  • Chrome：105。
  • Edge：105。
  • Firefox：110。
  • Safari：16 歲。

資料來源

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

Angular.dev 網站在標題資訊卡中展示容器查詢。

在沒有容器查詢的情況下，要實現這類功能相當困難，而且會影響效能，因為需要使用大小調整觀察器和元素觀察器。如今，根據父項大小為元素設定樣式已非難事。

操作示範螢幕側錄

現場示範

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

@property

最後，我們很高興很快就能在 Baseline 中看到 @property。這是為 CSS 自訂屬性 (也稱為 CSS 變數) 提供語意意義的重要功能，可啟用一系列新的互動功能。@property 也支援 CSS 中的內容意義、型別檢查、預設值和備用值。這也為更多強大的功能 (例如範圍樣式查詢) 開啟了大門。這項功能是先前從未實現的功能，現在可為 CSS 語言提供更深層的支援。

瀏覽器支援

  • Chrome：85。
  • Edge：85。
  • Firefox：128。
  • Safari：16.4。

資料來源

操作示範螢幕側錄

現場示範

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

結論

有了這些強大的全新 UI 功能，您可以發揮無限的創意。透過捲動驅動的動畫和檢視畫面轉場，您可以打造出前所未見的新型互動體驗，讓網頁更流暢、更具互動性。而下一代 UI 元件可讓您輕鬆建構功能強大、美觀的客製化元件，無須移除整個原生體驗。最後，架構、版面配置、字體排版和回應式設計的品質改善不僅解決了小問題，也讓開發人員擁有所需工具，以便建構可在各種裝置、板型規格和使用者需求下運作的複雜介面。

有了這些新功能，您應該可以移除第三方指令碼，以便使用錨點定位來實現效能要求高的功能 (例如捲動敘事)，並將元素彼此連結，建立流暢的頁面轉場效果，最後為下拉式選單設定樣式，並原生改善程式碼的整體結構。

網路開發人員正處於前所未有的大好時代。自 CSS3 推出以來，我們就沒有這麼興奮。過去我們一直希望能實現的功能，現在終於實現，並成為平台的一部分。我們會根據你的意見，決定優先開發哪些功能，並最終實現這些功能。我們致力於讓您能更輕鬆地完成繁瑣的作業，讓您有更多時間專注於重要工作，例如打造核心功能和設計細節，讓品牌脫穎而出。

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