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

在這個令人期待的發展時代，最先的是 CSS 和網頁版 UI 功能，最先進的網路平台才有創新的精神。這個網路使用者介面正處於黃金時代，新的 CSS 功能按照前所未見的速度推出在不同瀏覽器上，為打造精美又引人入勝的網路體驗開創無限可能。 這篇網誌文章會深入介紹 CSS 的現狀，探索正在重新定義網頁應用程式建構方式的一些新功能，這些功能正在 2024 年 Google I/O 大會上發表。

創新的互動體驗

基本上，網站體驗是您與使用者之間的來電和回應，因此務必投入心力進行高品質的使用者互動。為此，我們投注了大量心力，實現我們不曾在網路上體驗過的各種功能，例如「在」網頁中瀏覽及「切換」網頁。

以捲動為主的動畫

顧名思義，捲動式動畫 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 可有效管理程式碼和提高效能，

「與使用傳統的 JS 捲動事件相比，我們最多可減少 80% 的程式碼行，並觀察到捲動畫面時的平均 CPU 使用率從 50% 減少到 2%。- Tokopedia 資深軟體工程師 Andy Wihalim」

捲動效果的未來發展

我們瞭解這些效果將持續讓網路環境更精彩，而且在意接下來會出現什麼事。這包括除了使用新的動畫時間軸，還能使用捲動點來觸發動畫開始 (稱為捲動觸發的動畫)。

日後，瀏覽器也會推出更多捲動功能。以下示範同時示範這些未來功能的組合。這個程式庫使用 CSS scroll-start-target 在挑選器中設定初始日期和時間，而 JavaScript scrollsnapchange 事件可用來更新標頭日期，以便同步處理資料與貼齊事件。

您也可以在建構此項目時使用 JavaScript scrollsnapchanging 事件即時更新挑選器。

這些特定功能目前只能在標記背後加入 Canary，但可讓您享有先前在平台中難以或難以建構的功能，並突顯出未來可能與捲動式互動的方式。

如要進一步瞭解如何開始使用捲動式動畫，我們的團隊最近推出了全新系列影片，可在 Chrome for Developers YouTube 頻道上取得。這裡將介紹 Bramus Van Damme 的捲動式動畫基本概念，包括這項功能的運作方式、詞彙、建立效果的各種方式，以及如何結合各種效果來打造豐富的體驗。這個系列影片非常適合您觀看

查看轉場效果

我們剛剛介紹了在網頁「內部」呈現的強大新功能，還有一個稱為「瀏覽轉換」這項強大的新功能，可在「每次」網頁瀏覽之間產生動畫效果，提供流暢的使用者體驗。瀏覽轉場效果，可提升網頁畫面的流暢度，讓您可以在單一頁面，甚至是不同網頁的不同檢視之間流暢切換。

Airbnb 是一家嘗試將檢視模式整合到使用者介面的公司之一，藉此提供流暢且流暢的網頁瀏覽體驗。包括商家資訊編輯器側欄，可直接編輯相片及新增設施，完成整個使用者流程。

這種全頁效果的顯示效果一目了然，但您也可以建立小型互動。舉例來說，清單檢視畫面會在使用者互動時更新。使用檢視畫面轉換即可輕鬆達到效果。

在單頁應用程式中快速啟用檢視畫面轉換的方法，就像使用 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;
}

查看轉換類別

檢視畫面轉場效果可用於為檢視區塊轉場效果套用自訂動畫，但隨著許多元素轉換而變得很麻煩。今年首次使用查看轉場效果的更新可以簡化這個問題，並新增建立檢視畫面轉換類別的功能，供您套用至自訂動畫。

查看轉場效果類型

檢視畫面轉場效果還有另一個重大改進，那就是檢視畫面轉場類型支援。當您想為網頁檢視畫面或從網頁瀏覽套用不同視覺檢視畫面的轉場效果時，就適合使用檢視畫面轉換類型。

舉例來說，您可能希望首頁是網誌頁面動畫，或是網誌頁面返回首頁動畫的方式。此外，您可能會想以不同方式切換頁面，例如在本範例中，從左到右移動，反之亦然。在這個混亂之前，您可以先在 DOM 新增類別來套用樣式，之後就必須先移除類別。這種轉換類型可讓瀏覽器清除舊的轉場效果，而不需要先手動執行。

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

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

多頁面檢視轉場效果

網路功能之所以強大，是因為它具有廣泛性。許多應用程式不只是單頁，更是包含多個頁面的強大磁帶。因此，我們很高興在此宣布，Chromium 126 將支援多頁面應用程式的跨文件檢視轉換功能。

這項新的跨文件功能集包含同一來源內的網路體驗，就像從 web.dev 瀏覽至 web.dev/blog 一樣，但不包括跨來源瀏覽，例如從 web.dev 瀏覽 blog.web.dev 或其他網域 (例如 google.com)。

與文件檢視畫面轉換的情況有一項主要差異，就是您不必使用 document.startViewTransition() 納入轉場效果。請改為使用 CSS @view-transition 規則，同時加入與檢視畫面轉換相關的網頁。

@view-transition {
  navigation: auto;
}

如需更多自訂效果，您可以在 JavaScript 中使用新的 pageswap 或 pagereveal 事件監聽器來掛接，這樣就能存取檢視轉換物件。

使用 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 Working Group、Open UI 社群群組和 WHATWG (網頁超文字應用程式技術工作團隊)。

開發人員遇到的一大難題就是非常簡單的要求：能夠設定下拉式選單的樣式 (選取元素)。雖然表面上看起來很簡單，但這個問題相當複雜，但必須接觸平台中的許多部分，包括版面配置和轉譯、捲動和互動、使用者代理程式樣式和 CSS 屬性，甚至是 HTML 本身的變更。

下拉式選單包含許多部分，並包含許多需要考慮的州，例如：

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

目前要自行管理所有狀態並不容易，但這個平台也都拒絕提供簡單方式。為解決這個問題，我們拆解了這些部分，並推出一些原始功能，讓您開啟樣式下拉式選單，並提供更多功能。

Popover API

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

彈出式視窗元素會隱藏，直到使用 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 鍵或雙鍵切換鈕會關閉彈出式視窗並返回焦點。
• 預設元件繫結：：瀏覽器在語意上將彈出式視窗連結至其觸發條件。

您或許甚至在不知不覺間就使用了這個彈出式視窗 API。GitHub 在首頁的「新增」選單及提取要求審查總覽中，實作了彈出式視窗。為了支援舊版瀏覽器，由 Oddbird 所建構的 popover polyfill 逐漸增加，並受到 GitHub 本身的 Keith Cirkel 支援。

「我們已遷移至彈出式視窗，藉此淘汰 1000 行程式碼。Popover 致力協助開發人員省去與魔法 Z-index 數字的不足...

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

顯示彈出式視窗時，建議你加入互動。我們去年推出了四項全新互動功能，可支援彈出動畫效果。包括：

可在主要畫面格時間軸上為 display 和 content-visibility 建立動畫效果。

transition-behavior 屬性搭配 allow-discrete 關鍵字，可啟用個別屬性 (例如 display) 的轉換。

@starting-style 規則可以為 display: none 和頂層進入項目效果建立動畫。

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

這些屬性適用於您用來製作至頂層圖層的任何元素，無論是彈出式視窗或對話方塊。搭配背景幕的對話方塊看起來像這樣：

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 版現在可支援錨定位置。

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

在錨定元素 (在本例中為按鈕) 上使用 anchor-name 屬性，以及位置元素 (在此案例中為工具提示) 上的 position-anchor 屬性，即可在 CSS 中設定錨定位置關係。接著，使用 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 以上版本中的這項工具：

由於這些元素是錨定標記，因此位置元素會在錨定標記移動時動態移動到網頁上。因此，我們使用容器查詢風格的資訊卡元素，這些資訊卡元素會根據內建函式的大小調整大小 (媒體查詢無法調整的大小)，且錨定選單會隨著卡片使用者介面的變更而改變。

包含 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 使用。就如同維基百科的預覽，這種模式在整個網路平台上都只能找到這種模式，並需要能夠與連結或使用者開啟彈出式視窗，而且使用者不需點閱滑鼠 (例如懸停或分頁焦點)，即可看到該項目。

為因應 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 中。

selectedoption .text {
  display: none;
}

重複使用這個 API 的 <select> 元素最大優勢之一是具備回溯相容性。在這個國家/地區選取，您可以在選項中看到含有旗標圖片的自訂使用者介面，以便使用者比較內容。由於不支援的瀏覽器會忽略這些無法辨識的行，例如自訂按鈕、資料清單、已選取選項和選項中的圖片，因此備用方案與目前預設的選取使用者介面相似。

自訂選項提供無限可能。我特別喜歡這款 Airbnb 風格的國家/地區選取器，因為它具有巧妙的回應式設計風格。我們即將推出的觸控設定選項，提供更多功能，讓網路平台更加便利。

獨家手風琴

解決特定樣式 (以及所有相關元件) 並不是 Chrome 團隊唯一關注的 UI 元件。第一項額外的元件更新是建立專屬摺疊的能力，其中一次只能開啟該指法中的一個項目

啟用這項功能的做法是對多個詳細資料元素套用相同的名稱值，因此建立了一組連結的詳細資料群組，就像是一組圓形按鈕群組一樣

<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 虛擬類別類似，但只有在使用者與輸入內容大幅互動後，才會比對表單控制項。這意味著，可用來判斷表單值是否已互動或變成「骯髒」的程式碼，可大幅減少用來判斷表單值是否互動或變成「骯髒」的程式碼，這在提供使用者意見回饋時非常有用，並減少以往需要大量指令碼編寫的指令碼。

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 特別適合用於文字區域，因為你不再是固定大小，因此可能需要向上捲動，才能在過小的輸入方塊中，捲動查看先前在提示部分撰寫的內容。

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

進一步瞭解欄位大小調整。

<select>的<hr>

此外，在選取項目中啟用 <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 巢狀結構在所有瀏覽器中都加入了，現在也經過改善，現在可支援回溯期。換句話說，在元素名稱前面不再需要使用 &。這使得建立巢狀結構的感覺更符合人體工學，與我過往的習慣類似。

CSS 巢狀結構最令人滿意的一項特色，就是能以視覺方式封鎖元件，並在這些元件中納入狀態和修飾符，例如容器查詢和媒體查詢。過去，我習慣將上述所有查詢歸到檔案底部的位置，以達到明確效果。現在，您只需要以合理的方式撰寫這些程式碼，就在程式碼的其餘部分。

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

根據區塊版面配置對齊內容

另一個很棒的改變，是在區塊版面配置中使用置中機制 (例如 align-content)。這表示您現在可以在 div 中進行垂直置中等操作，無需套用 Flex 或格線版面配置，也不需要避免邊界收合等連帶效果，而這些版面配置演算法可能就無法派上用場。

div {
  align-content: center;
}

文字換行：平衡兼顧

說到版面配置，加入 text-wrap: balance 和 pretty 後，文字版面配置大幅提升。text-wrap: balance 用於更統一的文字區塊，text-wrap: pretty 則著重於減少文字中最後一行的單例模式。

h1 {
  text-wrap: balance;
}

進一步瞭解文字換行：餘額。

國際字體排版更新

過去一年來有關 CJK 文字功能的排版版面配置更新 (例如 word-break: auto-phrase 功能，可將線條納入自然詞組邊界)。

而 text-spacing-trim 可套用標點符號字元之間的轉換，讓中文、日文和韓文的字體排版更加易讀，在視覺上更加賞心悅目。

相對顏色語法

在色彩主題設定的領域中，我們發現相對色彩語法有重大更新。

這個範例中的顏色使用以荷蘭文 (Oklch) 為基礎的主題設定。系統會根據滑桿調整色調值，整個主題也會跟著改變。使用相對顏色語法可以達到這個目的。背景採用以色調為基準的主要顏色，並調整亮度、色度和色調管道的值。--i 是清單中值升級的同層級索引，展示您可以如何結合自訂屬性和相對色彩語法來建立主題。

: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() 函式外，主題設定也變得更加動態且簡單。

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

html {
  color-scheme: light dark;
}

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

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

:has()選取器

我也很樂意談論現代使用者介面的話題，但又不曾提及去年最具影響力的互通性重點之一。這是 :has() 選取器，於去年 12 月抵達所有瀏覽器。這個 API 徹底改變了編寫邏輯樣式的過程。

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

:has() 已證實對許多公司而言特別實用，包括 PolicyBazaar，他們運用 :has() 根據內部內容設定模塊樣式 (例如在比較區段中)，當區塊中有要比較的計畫，或是空白時，樣式就會進行調整。

「透過 :has() 選取器，我們得以消除根據 JavaScript 驗證使用者所選的項目，並替換為能順暢運作的 CSS 解決方案。—PolicyBazaar 技術主管 Aman Soni」

容器查詢

另外，網路現在也越來越多人使用容器查詢功能，因為這項功能可以查詢元素父項內建函式的大小，以便套用樣式；相較於媒體查詢，只有查詢可視區域大小，因此更精細地呈現出混合效果。

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

如果沒有容器查詢，則難以達成上述目標，而且會損害效能，同時需要大小調整觀察器和元素觀察器。現在，依元素父項大小為元素設定樣式十分簡單。

@property

不久後，我們期待看到 @property 在 Baseline 中出現。這是為 CSS 自訂屬性 (也稱為 CSS 變數) 提供語意含義的重要功能，並支援大量新的互動功能。@property 也能在 CSS 中啟用內容意義、類型檢查、預設值和備用值。開放更多空間使用，提供更多強大的功能，例如範圍樣式查詢。這項功能以前所未見，現在與 CSS 語言十分深入。

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

結論

這些強大的全新 UI 功能已經通過各種瀏覽器，可以帶來無限可能。透過捲動式動畫和檢視轉場效果，提供全新的互動式體驗，以前所未有的方式，讓網路更流暢、互動性更高。再升級的 UI 元件可讓您更輕鬆地建構強大且精美的自訂元件，而不會套用完整的原生體驗。最後，改善架構、版面配置、字體排版和回應式設計的生活品質，不僅可解決小小的難題，還能為開發人員提供所需工具，建構適用於各種裝置、板型規格和使用者需求的複雜介面。

您可以利用這些新功能，針對成效較需要的功能移除第三方指令碼 (例如捲動敘述和共用元素)，並透過錨定位置建立流暢的頁面轉換、最後的樣式下拉式選單，並且以原生方式改善程式碼的整體結構。

永遠是網站程式開發人員的最好時機。自推出 CSS3 以來，這顆星球的活力和熱情都不盡理想。我們提供的必要功能，不僅讓人夢寐以求，也能實現這個平台。有鑑於你的意見，我們得以優先開發這些能力並付諸實行。我們正努力讓這類繁瑣的瑣事變得輕鬆又自然，讓您有更多時間打造真正重要的事情，例如能夠讓品牌脫穎而出的核心功能和設計細節。

如要進一步瞭解這些新功能推出後，請追蹤 developer.chrome.com 和 web.dev，我們的團隊分享了網路技術的最新消息。試用捲動式動畫、檢視轉場效果、錨定位置，或甚至是可自訂的選取項目，並與我們分享您的想法。我們隨時樂意提供協助，並樂意提供協助。