Google 整理的 2024 年新的 CSS 語法 Part 1

Google 整理了他們在 Chrome 2024 年值得提出來的修改與增加的 CSS 的語法，共分為 5 個 Component，4 個 Interaction 以及 8 個 DX Feature，以下就來看看各別的介紹。

Components

field sizing

field sizing 可以讓你的輸入欄位自動根據內容展開。

過去，沒有欄位自動調整功能時，若要製作一個符合內容大小的輸入欄位，您必須猜測文字輸入的平均大小，或者使用 JavaScript 計算字元數，隨著使用者輸入文字來動態調整元素的高度或寬度。現在，只需一行 CSS 即可完成！

語法：

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

Animate to height: auto

許多人經常請求的 CSS 功能之一是能夠對 height: auto 進行動畫處理。而這個需求的稍微變化版本則是希望對 width 屬性進行過渡效果，或者對像 min-content、max-content 和 fit-content 這些內建尺寸關鍵字進行過渡。

從 Chrome 129 開始，您可以使用 interpolate-size 屬性或 calc-size() 函數，實現從固定長度到內建尺寸關鍵字（例如 min-content）及其相互切換的平滑過渡與動畫效果。

啟用此功能最簡單的方法是讓整個頁面選擇使用，您只需在 :root 宣告以下設定即可：

:root {
    interpolate-size: allow-keywords; 
}

這樣即可全局啟用對內建尺寸關鍵字的平滑過渡效果。

大多數情況下，使用 interpolate-size 就已經足夠了。但如果您需要更高的控制能力，例如對計算出的像素值進行運算，或者在同兩個內建尺寸關鍵字之間進行過渡，可以改用 calc-size() 函數。

這樣能讓您更靈活地操作尺寸計算和動畫過渡，以滿足更複雜的需求。

Exclusive <details>

網頁中常見的一種使用者介面模式是 手風琴元件。此元件由幾個可展開或收合的「詳細內容小工具」組成，用於顯示或隱藏內容。

這種模式可以透過幾個 <details> 元素來實現，通常會將它們在視覺上分組，表示它們屬於同一組。

如果您想實現一個互斥型手風琴（exclusive accordion），只需為每個 <details> 元素添加一個 name 屬性。當多個 <details> 元素具有相同的 name 值時，它們會形成一個語意群組。在此群組中，當您打開一個 <details> 元素時，先前已打開的元素會自動關閉。

以下是一個範例：

 這樣就能輕鬆實現互斥的手風琴效果，無需額外的 JavaScript！

Styleable <details>

從 Chrome 131 開始，您可以使用更多選項來設計 <details> 和 <summary> 元素的結構，使其更適合構建揭露式或手風琴式小工具。

特別是 Chrome 131 引入了以下改進：

1. 支援對這些元素使用 display 屬性，例如將其設置為 flex 或 grid。
2. 新增 ::details-content 偽元素，用於樣式化可展開和收合的部分內容。

以下是一個創建水平互斥手風琴的範例，其中應用了一個橫向流動的 Flex 布局：

details {
  display: flex;
  flex-direction: row;
}

 在 Chrome 131 及更高版本中，除了支援更多的 display 類型外，<details> 元素的內容會自動包裹在一個 ::details-content 偽元素中。這個偽元素會將 <details> 元素的所有子元素（除了 <summary>）都插入到其中。

您可以利用 ::details-content 偽元素來控制展開和收合的部分，從而對樣式進行更細緻的設計。

Anchor Positioning 

錨點（Anchoring）是一種全新的聲明式方法，用於將元素彼此相對定位。這種方法非常適合設計像是選單、工具提示（tooltips）、下拉選單（selects）、標籤、卡片、設定對話框等介面元件。有了瀏覽器內建的錨點定位功能，您可以構建分層式使用者介面，而無需依賴第三方函式庫。

錨點關係的構成

錨點關係由兩個元素組成：

1. 錨點（anchor）：提供參考位置的元素。
2. 定位元素（positioned element）：相對於錨點進行定位的元素。

如何將一個元素變成錨點

只需一行 CSS 即可將某個元素設置為錨點：

.anchor {
  anchor-name: --over-easy;
}

定位元素是相對於錨點進行定位的元素。它們透過 position-anchor 指向需要對齊的錨點，並使用第二行 CSS 來指定定位的方向或區域。

使用方式

1. 設定錨點：為錨點元素設置 position: anchor;。
2. 設定定位元素：
   • 使用 position-anchor 指向錨點。
   • 使用屬性（如 inset-anchor 或 align）指定定位方向或區域。

.positioned-element {
  position: fixed;
  position-anchor: --over-easy;
  position-area: block-end;
}

以下是一個示範，說明如何讓「可愛的蛋」成為錨點，而文字 "Over-Easy" 是定位的元素：

 這種設計方式非常適合用於工具提示（tooltips）或標籤等情境，輕鬆完成整潔的 UI 效果！

position-area 屬性提供了多種選項，讓您能夠靈活地將定位元素放置在錨點的不同位置。在這個範例中，使用了邏輯屬性值 block-end，但您也可以使用 center、bottom 等其他值來實現不同的定位效果。

為了幫助您視覺化這些選項，Una Kravets 開發了一個圖形化工具，方便您探索和選擇適合的定位方式。

Interactions

Custom Scrollbars

捲軸樣式化一直可以透過 ::-webkit-scrollbar-* 偽元素實現，但這種方法僅適用於 Chrome 和 Safari，且並未被 CSS 工作組標準化。

從 Chrome 121 開始，您可以使用標準化的 scrollbar-width 和 scrollbar-color 屬性來樣式化捲軸的寬度與顏色，這使得跨瀏覽器的支持更加一致。

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

• scrollbar-color on MDN
• scrollbar-width on MDN

Cross-Document View Transitions

2023 年，Chrome 成為首個支援同文件視圖過渡（same-document view transitions）的瀏覽器，為網頁平台帶來豐富且流暢的過渡效果，讓您的網站視圖切換更加生動。今年，Chrome 更進一步，在 Chrome 126 推出了跨文件視圖過渡（cross-document view transitions）。

這項新功能允許您在兩個不同文件之間運行視圖過渡，這意味著您不需要將網站重新構建為單頁應用程式（SPA）也可以使用這些效果。它直接基於網頁核心特性——從一個頁面導航到另一個頁面——真正展現了「網頁的本質」。

要在兩個頁面之間啟用視圖過渡（View Transition），需要滿足以下兩個條件：

1. 同源導航（Same-Origin Navigation）
   頁面之間的導航必須發生在相同的域名下，確保安全性和一致性。

2. 頁面選擇加入過渡功能（Opt-In to View Transitions）
   兩個頁面都需要顯式啟用視圖過渡，這可以通過以下 CSS 規則來實現：

@view-transition {
  navigation: auto;
}

一旦啟用，跨文件檢視轉場（Cross-Document View Transitions）會使用與同文件檢視轉場相同的基本構件：將 view-transition-name 屬性添加到您想要捕捉的元素，動畫則由 CSS 動畫提供動力。

除了推出跨文件檢視轉場功能外，Chrome 還新增了一些功能，讓使用檢視轉場更為方便，例如 view-transition-class。這些更新已於 2024 年 5 月的 Google I/O 大會上宣布。

• “What's new in view transitions? (Google I/O 2024 update)”
• Documentation “Smooth transitions with the View Transition API”

Scroll-Driven Animations

滾動驅動動畫（Scroll-Driven Animations）是網頁上一種常見的用戶體驗模式。滾動驅動動畫與滾動容器的滾動位置相關聯，這意味著當您向上或向下滾動時，關聯的動畫會隨之向前或向後播放，直接響應滾動的動作。

在以下示範中，如果您的瀏覽器支援 CSS 滾動驅動動畫，當圖片穿過滾動視窗（scrollport）時，它們會逐漸顯示完整的內容。

為了支援 Chrome 115 中滾動驅動動畫的推出，Chrome 開發者關係團隊（Chrome DevRel）製作了一個名為 「釋放滾動驅動動畫的力量」（Unleash the Power of Scroll-Driven Animations） 的 10 部分影片課程。該課程將教您透過 CSS 或 JavaScript 全面掌握滾動驅動動畫的所有相關知識。

• scroll-driven-animations.style — Your one-stop shop for all your scroll-driven animations needs
• “Unleash the Power of Scroll-Driven Animations” on YouTube
• “Unleash the Power of Scroll-Driven Animations” course notes by Geoff Graham

Scroll Snap Events

內建的快照事件（Snap Events）讓滾動過程中以前不可見的瞬間變得可見，並且在正確的時機觸發，且始終精確無誤。這些事件是補足滾動快照功能的關鍵，使其成為一個完整的解決方案。

新增了兩個快照事件：scrollsnapchange 和 scrollsnapchanging。

scroller.addEventListener('scrollsnapchange', event=> {
    console.log(event.snapTargetBlock);
    console.log(event.snapTargetInline);
  })

scrollsnapchange 事件的觸發時機類似於 scrollend，會在滾動停止且使用者停止與滾動容器互動時觸發。

scrollsnapchanging 事件會更早觸發，當滾動容器有新的快照目標時，立即調用回呼函式（callback）。這對於提供即時用戶體驗回饋非常有用，能根據使用者的互動即刻進行視覺更新。

scroller.addEventListener('scrollsnapchanging', event=> {
    console.log(event.snapTargetBlock);
    console.log(event.snapTargetInline);
  })

透過結合這些事件，您可以利用滾動手勢創建一個流暢的選取體驗。以下是一個尺規範例，此範例會對齊至四分之一英吋的數值，並使用滾動驅動動畫來突顯選取的數值。

• scrollsnapchanging 事件：用於即時更新數字輸入框中的值，提供即時回饋。
• scrollsnapchange 事件：用於確認使用者選取的數值並支持最終的交互體驗。

範例流程：

1. 使用滾動手勢在尺規上滾動。
2. 當尺規有新的對齊目標時（觸發 scrollsnapchanging），即時更新顯示數值。
3. 當滾動停止且快照完成時（觸發 scrollsnapchange），確認選取的數值並執行相關邏輯，例如更新資料或觸發動畫。

這種設計確保了滾動的即時性與最終結果的準確性，帶來更直觀且流暢的用戶體驗。

您可以參閱 developer.chrome.com 上的文章，了解更多詳細資訊與範例。此外，下方的範例連結提供了一個 Snap Event 視覺化工具，幫助您感受並觀察這些新事件的觸發時機和效果。

這些資源將為您提供實用的指引，讓您能更好地運用快照事件於您的專案中！