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

查看轉換類別

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

瀏覽器支援

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

查看轉場類型

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

瀏覽器支援

  • 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 的全域屬性，很高興在此宣布，這項屬性在幾週前已達到基準新推出狀態。

瀏覽器支援

  • 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 首頁的選單。

您或許甚至在不知不覺間就使用了這個彈出式視窗 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 使用。就如同維基百科的預覽，這種模式在整個網路平台上都只能找到，並需要能夠與連結及使用者顯示彈出式視窗，而且使用者不需點閱 (例如懸停或分頁焦點)，即可看到此內容。

為因應 Popover 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> 元素，其中一個最大優點就是回溯相容性。在這個國家/地區選取，您可以在選項中看到含有旗標圖片的自訂使用者介面，以便使用者比較內容。由於不支援的瀏覽器會忽略不瞭解的程式碼行，例如自訂按鈕、資料清單、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

:user-valid 和 :user-invalid 擬似類別是另一項 UI 元件改善項目。: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(...);
}

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

field-sizing: content

另一個近期推出的實用元件更新是 field-sizing: content，可套用至表單控制項 (例如輸入和文字區域)。這可讓輸入內容的大小視內容而定而增加 (或縮小)。field-sizing: content 特別適合用於文字區域，因為你不再是固定大小，因此可能需要向上捲動，才能在過小的輸入方塊中，捲動查看先前在提示部分撰寫的內容。

瀏覽器支援

  • 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，我們的團隊會在這些網站分享最新的網路技術消息。歡迎試用捲動驅動動畫、檢視畫面轉場效果、錨點定位，甚至是可樣式化的選取功能，並與我們分享您的想法。我們隨時樂意提供協助，並樂意提供協助。