如果我將 CSS 的演變分為幾類，我們已經遠遠超越了僅僅要求邊框半徑的時代，感覺我們生活在未來。我們目前生活在這樣一個時代：平台為我們提供的工具不僅可以調整視覺層，而且從根本上重新定義了我們建構介面的方式。我認為 2024 年宣布的功能數量不會超過。我從來沒有這麼高興地犯過錯。
Chrome 團隊的「CSS Wrapped 2025」不僅僅是功能清單；它是動態、原生網路的宣言。作為一個花了幾年時間記錄這些演變的人——從定義「CSS5」時代到複雜的現代佈局實用程式——我發現自己帶著巨大的興奮感看待今年的總結。我們看到了向「優化人體工學」和「下一代互動」的轉變，這使我們能夠停止與程式碼作鬥爭，並開始在自然狀態下塑造介面。
在本文中，您可以透過我最近的實驗以及對該平台未來的希望來全面了解 Chrome 報告中的突出功能。
元件革命：最終，原生可自訂選擇
多年來，我們一直依賴大量的 JavaScript 函式庫來設定下拉式選單的樣式，這個平台終於解決了這個「幾十年來的問題」。正如我在深入研究可自訂選擇（以及相關文章）的歷史中所詳細描述的那樣，這是一條漫長的道路，涉及開放 UI、自行車捨棄諸如
允許在選項中添加豐富的內容（例如圖像或標誌）的奇妙補充非常有趣。現在我們可以創建各種選擇：
演示：我創建了一個 Poké 冒險演示，展示了新的
請參閱鋼筆可自訂的選擇，其中包含選項內的圖像以及 utilitybend 的所選內容 [forked]。
示範：全面了解僅使用偽元素設定選擇樣式。
請參閱 utilitybend 的 Pen A 可自訂選擇，僅包含偽元素 [forked]。
演示：或者您可以使用 optgroups 透過此選單選擇演示將其提升一個檔次。
請參閱Pen 實際的選擇選單，其中包含utilitybend 的optgroups [forked]。 僅此功能就標誌著我們建立表單的方式發生了巨大轉變，減少了依賴性和技術債。 滾動標記和 JavaScript 輪播的消亡 歷史上，創建輪播一直是開發人員和客戶之間的摩擦點。客戶喜歡它們，但開發人員害怕讓它們易於存取和高效能所需的 JavaScript。 ::scroll-marker 和 ::scroll-button() 偽元素的出現完全改變了這個動態。 這些功能使我們能夠純粹使用 CSS 創建導航點和滾動按鈕，並本地連結到滾動容器。正如我在部落格中所寫，這就是第一張幻燈片的愛。無需一行 JavaScript 即可建立功能齊全、可存取的滑桿的能力不僅方便，而且非常方便。這是性能的勝利。圍繞此功能存在一些可訪問性問題，儘管這些是有效的，但我們開發人員可能有一種方法可以使其發揮作用。好處是，所有這些 UI 更改都比自訂 DOM 操作和拖曳 aria 標籤容易得多，但我離題了… 現在，我們可以使用滾動標記組自動對標記進行分組，並使用錨定位對按鈕進行樣式設置，以將它們準確地放置在我們想要的位置。
.輪播{ 溢出-x：自動； 滾動標記組：之後； /* 建立點的容器 */
/* 建立按鈕 */ &::滾動按鈕（行內結束），&::滾動按鈕（內聯開始）{ 內容：「」； 位置：絕對； /* 使用錨定位將它們居中 */ 位置錨點：--旋轉木馬； 頂部：錨點（中心）； }
/* 在子節點上建立標記 */ div { &::滾動標記 { 內容：「」； 寬度：24px； 邊界半徑：50%； 遊標：指針； } /* 反白顯示活動標記 */ &::滾動標記:目標當前{ 背景：白色； } } }
示範：我的實驗純粹使用 HTML 和 CSS 創建輪播，使用錨定位來放置按鈕。
請參閱 utilitybend 的 Pen Carousel 純 HTML 和 CSS [forked]。
示範：使用 attr() 將背景影像動態拉入標記中的 Webshop 光滑滑桿重製版。
請參閱 utilitybend 用 CSS [forked] 重新製作的 Pen Webshop 光滑滑桿。 狀態查詢：黏性物體卡住了？活潑的東西突然斷了？ 很長一段時間以來，我們無法在不依賴 IntersectionObserver 駭客的情況下知道「黏性物體是否被卡住」或「活潑的物體是否被折斷」。 Chrome 133 引入了捲動狀態查詢，讓我們以聲明方式查詢這些狀態。 透過設定container-type:scroll-state，我們現在可以根據子項目是否卡住、對齊或溢出來設計它們的樣式。這是我自 2023 年 CSS Day 以來一直熱切期待的巨大的「生活品質」改進。它甚至已經發展了很多，因為我們還可以看到滾動的方向，可愛！ 舉一個簡單的例子：我們最終可以僅當標題實際上粘在視口頂部時才將陰影應用於標題： .header-container { 容器類型：滾動狀態； 位置：黏性； 頂部：0；
標頭{ 過渡：box-shadow 0.5s 緩出； /* 查詢檢查容器的狀態 */ @container滾動狀態（卡住：頂部）{ 框陰影：rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
演示：一個黏性標頭，僅在實際黏住時應用陰影。
請參閱帶有滾動狀態查詢的 Pen Sticky 標題，檢查黏性元素是否被 utilitybend 黏住 [forked]。
示範：以 Pokémon 為主題的列表，使用滾動狀態查詢與錨點定位相結合，將框架移至當前捕捉的角色上。
請參閱 Pen Scroll-state 查詢來檢查哪個項目是使用 CSS 捕捉的，Pokemon 版本 [forked] by utilitybend。 優化的人體工學：CSS 中的邏輯 CSS Wrapped 的「優化人體工學」部分重點介紹了使我們的工作流程更加直觀的功能。三個特徵對我們編寫邏輯的方式具有變革性：
if() 語句我們終於在 CSS 中得到了條件語句。 if() 函數的作用類似於樣式表的三元運算符，允許我們基於媒體、支援或內嵌樣式查詢應用值。這減少了對單一屬性變更的詳細 @media 區塊的需求。 @function 函數我們終於可以將一些邏輯移動到不同的地方，從而產生一些更乾淨的文件，這是一個真正的生活品質功能。 sibling-index() 和sibling-count() 這些樹計數函數解決了基於清單大小的動畫或樣式項目的交錯問題。正如我在使用 CSS 設計同級樣式從未如此簡單中所探索的那樣，這消除了在 HTML 中硬編碼自訂屬性（如 --index: 1）的需要。
範例：計算佈局 我們現在可以寫出簡潔的數學公式。例如，讓卡片進入螢幕的動畫交錯變得很簡單： .card-container > * { 動畫：顯示 0.6 秒的緩出前進； /* 不再需要手動 --index 變數！ */ 動畫延遲： calc(sibling-index() * 0.1s); }
我甚至嘗試使用這些函數和三角學來將專案放置在一個完美的圓圈中，而不需要任何 JavaScript。
示範：動態地交錯卡片動畫。
請參閱 utilitybend 使用sibling-index() [forked] 的 Pen Stagger 卡。
示範：使用兄弟索引、兄弟數數和新的 CSS @function 功能將項目放置在完美的圓圈中。
請參閱使用同級索引、同級計數和 utilitybend 的 [forked] 函數的圓。 我的 CSS 待辦事項清單：我迫不及待想嘗試的功能 雖然我一直忙於雕刻選擇和過渡，但「CSS Wrapped 2025」報告充滿了我還沒有機會在 CodePen 中使用的其他好東西。這些是我接下來的實驗清單上的重要內容： 錨定容器查詢 我在輪播演示中對按鈕使用了 CSS 錨定位，但“CSS Wrapped”突出顯示了其演變：錨定容器查詢。這解決了我們在工具提示方面遇到的一個問題：如果瀏覽器由於空間限製而將工具提示從上到下翻轉，「箭頭」通常會指向錯誤的方向。透過錨定容器查詢（@containeranchored(fallback:flip-block)），我們可以根據瀏覽器實際選擇的後備位置來設定元素的樣式。 嵌套視圖過渡組 視圖過渡是一場革命，但它們帶來了特定的權衡：它們扁平化了元素樹，這通常會破壞 3D 變換或溢出：剪輯。我總覺得它缺少了一些東西，而這可能是答案。透過使用view-transition-group:nearest，我們最終可以將過渡組嵌套在一起。 這使我們能夠在過渡期間保持剪切效果或 3D 旋轉——這在以前是不可能的，因為元素被提升到頂層。 .card img { 視圖轉換名稱：照片； 視圖轉換組：最近的； /* 保持嵌套！ */ }
版式和形狀 最後，我內心的人體工學家渴望嘗試文字框修剪，它承諾刪除文字內容（前導）上方和下方令人討厭的額外空白，以最終實現完美的垂直對齊。對於創意方面，corner-shape 和 shape() 函數正在開放非矩形佈局，允許響應 CSS 變數的「方形」和複雜路徑。話雖這麼說，我迫不及待想要一個充滿松鼠的設計！ 充滿希望的未來 我們正在見證一個 CSS 正在變得能夠處理以前屬於 JavaScript 的邏輯、狀態和複雜互動的世界。 moveBefore（為 iframe/視訊保留 DOM 狀態）和 attr()（使用字串以外的類型來表示顏色和網格）等功能進一步鞏固了這一現實。 雖然其中一些功能目前處於實驗階段或特定於 Chrome，但其勢頭是不可否認的。我們必須希望透過 Interop 等措施獲得所有瀏覽器的持續支持，以確保這些功能成為基準。話雖如此，擁有瀏覽器引擎與「Chrome 優先」中所有這些出色的功能同樣重要。這些新功能在登陸瀏覽器之前需要進行討論、修改和測試。 現在是進入 CSS 的絕佳時刻。我們不再只是設計文件；而是設計文件。我們正在使用比以往更強大的本機工具包來製作動態、符合人體工學且強大的應用程式。 讓我們繼續這個新時代並傳播這個訊息。 這是 CSS 包裝的！
