CSS 包裝完成：2023 年！
直接前往內容：
太厲害了！2023 是 CSS 供應商的重要一年！
從 #Interop2023 到 CSS 和 UI 空間中的許多新登陸點，開發人員可說是開發網路平台所無法做到的，功能也能實現。現在，每個新式瀏覽器都支援容器查詢、Subgrid、:has() 選取器，以及各式各樣的全新色彩空間和函式。在 Chrome 中，我們支援僅限 CSS 的捲動式動畫，並透過檢視畫面轉場效果，在網頁檢視畫面之間流暢地播放動畫。最重要的是，目前市面上有許多全新基本功能，可以改善開發人員體驗，例如 CSS 巢狀結構和限定範圍樣式。
今年真是精彩萬分！為了慶祝這個里程碑，我們想要慶祝並表揚瀏覽器開發人員和網路社群在達成這個願景所付出的心血。
架構基礎
首先來更新主要的 CSS 語言和功能。這些功能都是編寫及整理樣式的基礎功能，也是開發人員能夠使用的絕佳工具。
三角函數
Chrome 111 新增對三角函數 sin()、cos()、tan()、asin()、acos()、atan() 與 atan2() 的三角函式支援，適用於所有主要引擎。製作動畫和版面配置時，這些函式非常實用。舉例來說，您現在可以輕鬆將元素置於所選中心的圓形上。
進一步瞭解 CSS 中的三角函式。
複雜第 n-* 個選項
瀏覽器支援
- 111
- 111
- 113
- 9
透過 :nth-child() 虛擬類別選取器，您可以依據索引選取 DOM 中的元素。使用 An+B 微語法即可精確控制要選取的元素。
根據預設，:nth-*() 虛擬會將所有子項元素納入考量。自 Chrome 111 起，您可以視需要將選取器清單傳遞至 :nth-child() 和 :nth-last-child()。如此一來，您就可以在 An+B 執行作業之前預先篩選子項清單。
在以下示範中，3n+1 邏輯只會套用至小型娃娃，使用 of .small 預先濾除。請使用下拉式選單動態變更使用的選取器。
進一步瞭解複雜第 n-* 選項。
範圍
瀏覽器支援
- 118
- 118
- x
- 17.4
Chrome 118 新增了 @scope 的 at-rule 設定，可讓你指定符合文件特定子樹狀結構的範圍選取器。使用限定範圍樣式時，您不必編寫過於具體的選取器，也不必與 DOM 結構緊密結合，就能明確決定要選取哪些元素。
限定範圍的子樹狀結構是由「範圍根層級」 (上限) 和選用的範圍限制 (下限) 定義。
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
在範圍區塊內的樣式規則只會指定分支子樹狀結構內的元素。舉例來說，以下範圍樣式規則只會指定介於 .card 元素和任何與 [data-component] 選取器相符的巢狀元件之間的 <img> 元素。
@scope (.card) to ([data-component]) {
img { … }
}
在下列示範中，輪轉介面元件中的 <img> 元素因已套用範圍限製而不相符。
範圍示範螢幕截圖
範圍即時示範
@scope 示範如要進一步瞭解 @scope，請參閱「如何使用 @scope 限制選取器的觸及率」一文。在本文中，您將瞭解 :scope 選取器、如何處理明確性、無前置範圍的範圍，以及 @scope 對串連的影響。
巢狀結構
建立巢狀結構前，每個選取器必須明確宣告，並且彼此獨立。這會產生重複性、樣式表大量及分散的創作體驗。現在，選取器可以使用多個相關樣式規則來繼續設定。
dl {
/* dt styles */
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
/* same as */
dt {
/* dt styles */
}
dl dt {
/* dl dt styles */
}
dl dd {
/* dl dd styles */
}
巢狀螢幕側錄
Nesting 現場示範
巢狀結構可以降低樣式表的權重、降低重複選取器的負擔，並集中管理元件樣式。語法最初發布時設有限制，必須在多個位置使用 &，但之後已透過巢狀語法更新解除了這項限制。
進一步瞭解巢狀結構。
子網格
CSS subgrid 可讓您建立更複雜的格線，並在子版面配置之間對齊更好的對齊方式。這樣一來，使用 subgrid 做為格線列或欄的值，就能讓位於其他格狀檢視畫面內的格線自行採用外格線中的列和欄，
微格螢幕側錄
Subgrid 即時示範
子網格特別適合用來將同層級項目與彼此的動態內容對齊。讓文案撰寫者、使用者體驗寫手和譯者得以自由嘗試建立可「符合」版面配置的專案文案。使用子格線時，您可以配合內容調整版面配置。
進一步瞭解子網格。
字體排版
網路字體排版在 2023 年看過幾項重大更新。更棒的漸進式強化功能是 text-wrap 屬性。這個屬性可讓您根據瀏覽器組合調整字體排版版面配置，不需要額外編寫指令碼。擺脫不自然的行長，體驗更易於預測的字體排版！
初始字母
initial-letter 屬性是功能強大的 CSS 功能，用於設定初始字母位置的樣式，而在今年初登陸 Chrome 110 時，將會是功能強大的小型 CSS 功能。您可以將字母放置於捨棄或凸起的狀態。屬性可接受兩個引數：第一個是將字母拖放至對應段落中的程度，第二個則代表要增加字母的程度。您甚至可以合併使用這兩種方法，例如下列示範。
初始字母螢幕截圖
初始字母展示模式
::first-letter 虛擬元素的 initial-letter 值，即可觀察元素位移。進一步瞭解初始字母表。
text-wrap: 平衡，而且美觀
開發人員可能不瞭解標題或段落的最終大小、字型大小，甚至是標題或段落的語言。所有必要的變數，都能在瀏覽器中以有效、美觀的方式處理文字。瀏覽器會知道所有因素 (例如字型大小、語言和配置區域)，因此適合處理進階和高品質文字版面配置。
您可以在這裡使用兩種新的文字換行技術，一種稱為 balance，另一個則是 pretty。balance 值旨在建立和諧的文字區塊，pretty 則會試圖避免孤立無助，並確保連字號健康。這兩項工作以往都是以手動方式完成，而且可以把工作交給瀏覽器，讓它能支援任何翻譯語言，這真是太棒了！
文字包裝螢幕側錄
自動換行示範
balance 和 pretty 對標題和段落的影響。請試著將示範內容翻譯成其他語言！進一步瞭解文字換行：餘額。
顏色
2023 年是網路平台各色的年代。全新的色彩空間和功能可啟用動態色彩主題設定，讓您揮灑創意、鮮豔動人的主題，還可以自訂這些主題！
HD Color Space (色階 4)
無論是硬體、軟體、CSS 或閃爍的光芒，我們的電腦需要耗費大量心力，才能像人類的眼睛一樣嘗試呈現顏色。我們在 2023 年推出了全新顏色、更多顏色、全新色彩空間、色彩功能及全新功能。
CSS 和顏色現在可以：
- 檢查使用者螢幕硬體是否支援廣色的 HDR 色彩。
- 檢查使用者的瀏覽器是否能理解 Oklch 或 Display P3 等色彩語法。
- 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等位置指定 HDR 顏色。
- 使用 HDR 顏色建立漸層。
- 在替代色彩空間中插入漸層。
- 使用 color-mix() 混色。- 使用相對色彩語法建立色彩變化版本。
顏色 4 螢幕側錄
「顏色 4」示範
進一步瞭解顏色 4 和色域。
color-mix 函式
混搭顏色是一項典型的任務，而在 2023 年，CSS 供應商也能派上用場。你不僅可以將白色或黑色混合成顏色，也可以在任何色域執行這些動作，而且還能呈現透明度。同時提供基本色彩功能和進階色彩功能。
color-mix() 螢幕側錄
color-mix() 示範
您可以將 color-mix() 視為漸層的一段時間。漸層會顯示從藍色變成白色的所有步驟，color-mix() 只會顯示一個步驟。開始考慮色域後，工具就會變得比較進階，並協助您瞭解不同的混合色空間會對結果造成什麼影響。
進一步瞭解 color-mix()。
相對顏色語法
相對顏色語法 (RCS) 是用於建立色彩變化版本的 color-mix() 互補方法。這個方式比 color-mix() 更強大，不過使用色彩時也是不同的策略。color-mix() 可能會混用白色來調亮顏色，其中 RCS 可讓您精確存取亮度管道，還能透過程式輔助方式使用 calc() 來減少或增加亮度。
RCS 螢幕側錄
RCS 即時示範模式
RCS 可讓您對特定色彩執行相對和絕對的操控，相對變更可讓您擷取飽和度目前的值或亮度，並使用 calc() 進行修改。絕對變更是指以全新的管道取代管道值 (例如將透明度設為 50%)。這個語法可提供有關主題設定和時間變數等重要工具的實用工具。
進一步瞭解相對顏色語法。
回應式設計
回應式設計在 2023 年演進。今年突破性的一年，我們推出多項全新功能，顛覆了我們打造回應式網頁體驗的方式，也因此出現以元件為基礎的回應式設計模型。搭配使用容器查詢和 :has() 時，可根據父項的大小、子項的現狀或狀態，支援擁有其回應式和邏輯樣式的元件。因此，您終於可以分隔頁面層級版面配置與元件層級版面配置，並且編寫一次邏輯，以便在任何地方使用元件！
大小容器查詢
容器查詢不支援查詢網頁中父項元素，而不是使用可視區域的全域大小資訊套用 CSS 樣式。這表示您可以在多個版面配置和多個檢視畫面中以動態方式設定元件樣式。在今年情人節 (2 月 14 日) 中，所有新版瀏覽器的大小容器查詢都穩定。
如要使用這項功能，請先為您要查詢的元素設定納入項目，然後類似於媒體查詢，請使用 @container 搭配尺寸參數來套用樣式。除了容器查詢之外，您也能取得容器查詢大小。在以下示範中，容器查詢大小 cqi (代表內嵌容器的大小) 會用來調整資訊卡標頭的大小。
@container 螢幕側錄
@container 示範
進一步瞭解如何使用容器查詢。
設定容器查詢的樣式
在 Chrome 111 中導入部分樣式查詢。目前使用樣式查詢時，您可以使用 @container style() 查詢父項元素的自訂屬性值。例如，查詢是否存在自訂屬性值，或查詢是否設為特定值 (例如 @container style(--rain: true))。
樣式查詢螢幕截圖
樣式查詢示範
雖然這聽起來與在 CSS 中使用類別名稱的方式類似，但樣式查詢在部分方面有一些優點。第一種是使用樣式查詢，您可以視需要在 CSS 中更新虛擬狀態的值。此外，在日後的實作版本中，您將能查詢值的範圍，以判斷套用的樣式，例如 style(60 <= --weather <= 70)，並能根據屬性/值組合 (例如 style(font-style: italic)) 設定樣式。
進一步瞭解如何使用樣式查詢。
:has() 選取器
有近 20 年，開發人員要求 CSS 提供「上層選取器」。透過 Chrome 105 隨附的 :has() 選取器，現在有了這項功能。舉例來說，使用 .card:has(img.hero) 即可選取含有主頁橫幅做為子項的 .card 元素。
:has() 示範螢幕擷取畫面
:has() 現場示範
:has() 示範：不含圖片的卡片由於 :has() 接受相對選取器清單做為引數，因此您可以選取比父項元素更多。使用各種 CSS 組合器，不僅可向上移動 DOM 樹狀結構，也可以側向選取。舉例來說，li:has(+ li:hover) 會選取目前懸停在 <li> 元素之前的 <li> 元素。
:has() 螢幕側錄
:has() 示範
:has() 示範：插入座進一步瞭解 CSS :has() 選取器。
更新媒體查詢
update 媒體查詢可讓您配合裝置的刷新率調整使用者介面。這項功能可回報與不同裝置功能相關的 fast、slow 或 none 值。
您針對大多數裝置設計的刷新率可能較快，包括電腦和大多數行動裝置。電子閱讀器和低耗電付款系統等裝置，重新整理頻率可能較為緩慢。不過，瞭解裝置無法處理動畫或頻繁更新，便可節省電池用量或顯示錯誤的檢視畫面更新。
更新螢幕側錄
更新示範
進一步瞭解 @media (更新)。
編寫媒體查詢的指令碼
指令碼媒體查詢可用來檢查 JavaScript 是否可用。很適合循序漸進地進行強化。在此媒體查詢之前，一個用來偵測是否可用 JavaScript 的策略，就是在 HTML 中放置 nojs 類別，並使用 JavaScript 將其移除。這些指令碼都可以移除，因為 CSS 現在可用來偵測 JavaScript，並據此調整。
瞭解如何為網頁啟用及停用 JavaScript，並透過 Chrome 開發人員工具進行測試。
編寫螢幕側錄內容
指令碼示範
假設網站沒有 JavaScript，可以透過指令碼媒體查詢讓切換機制與系統偏好設定搭配運作，例如為網站上的主題切換設定。或者考慮使用切換元件：如有 JavaScript，使用者就能透過手勢滑動切換裝置，而不必切換至開啟和關閉。如果指令碼有無法編寫，那麼您將有機會升級使用者體驗，同時還能提供有意義的基礎體驗。
進一步瞭解指令碼。
減少透明度的媒體查詢
不透明的介面可能會造成頭痛或視覺障礙，導致各種視覺失能問題。因此，Windows、macOS 和 iOS 都有系統偏好設定，這可能導致 UI 的透明度降低或移除。這項「prefers-reduced-transparency」的媒體查詢很適合其他偏好的媒體查詢，協助您發揮創意，同時為使用者進行調整。
減少資訊公開螢幕側錄內容
「降低透明度」示範
在某些情況下，您可以提供沒有內容重疊於其他內容的其他版面配置。在其他情況下，顏色的不透明度可以調整為不透明或幾乎不透明。以下網誌文章提供更具啟發性的示範內容，能滿足使用者偏好。如果想知道這些媒體查詢何時具有價值，可以參考這些網誌文章。
互動技術
互動是數位體驗的基石。這可讓使用者取得意見回饋，瞭解他們點擊的內容和在虛擬空間中的位置。今年有許多令人期待的功能，讓使用者可以更輕鬆地編寫和實作各項互動功能，流暢地使用者歷程，並提供更精細的網路體驗。
查看轉場效果
檢視轉場效果會對網頁的使用者體驗帶來重大影響。使用 View Transitions API，建立單頁應用程式的兩個頁面狀態之間的視覺化轉場效果。這類轉場效果可以是整頁轉換，也可以是網頁上的較小的內容，例如在清單中新增或移除新項目。
View Transitions API 的核心是 document.startViewTranstion 函式。傳入一個函式，將 DOM 更新為新的狀態，API 會為您處理所有工作。做法是擷取前後的快照，然後在兩者之間轉換。透過 CSS，您可以控制要擷取的內容，並視需要自訂這些快照的動畫效果。
VT 螢幕側錄
佛蒙特州示範
適用於 Chrome 111 的單頁應用程式適用的 View Transitions API。進一步瞭解查看轉場效果。
線性加/減速函式
瀏覽器支援
- 113
- 113
- 112
- 17.2
別讓這個函式的名稱不堪負荷。linear() 函式 (請勿和 linear 關鍵字混淆) 可讓您以簡單的方式建立複雜的加/減速函式，但會失去部分精確度。
Chrome 113 版推出的 linear() 之前，無法透過 CSS 建立彈跳或彈簧效果。這麼做的好處是，linear()只要將這些加/減速簡化為一系列點，然後以線性方式在這些點之間插入，即可估算出這些加/減速。
linear() 函式會使用這些點，並在這些點之間以線性方式插入。線性調節螢幕側錄
線性調節示範
linear() 示範。捲動結束
許多介面都包括捲動互動，有時介面需要同步處理與目前捲動位置相關的資訊，或根據目前狀態擷取資料。在 scrollend 事件之前，您必須使用不正確的逾時方法，這類方法可能會在使用者的手指持續顯示螢幕時觸發。透過 scrollend 事件，您即有恰當的捲動事件，可判斷使用者是否仍在進行中操作。
捲動螢幕側錄
捲動示範
這對瀏覽器來說很重要，因為 JavaScript 無法在捲動期間追蹤螢幕上的手指，只是無法取得資訊。現在可以刪除區塊結尾不正確的捲動結束嘗試程式碼，並替換為瀏覽器擁有的高精確度事件。
進一步瞭解捲動。
捲動式動畫
捲動式動畫是 Chrome 115 推出的新功能。這些元件可讓您使用現有的 CSS 動畫或使用 Web Animations API 建立的動畫，並與捲動器的捲動偏移值搭配運作。當您在水平捲軸上上下捲動時，連結的動畫會以直接回應向前或向後拖曳。
使用 ScrollTimeline 可以追蹤捲動器的整體進度，如以下示範所示。捲動至頁面結尾時，該文字會逐字元顯示。
SDA 螢幕側錄
SDA 示範
只要使用 ViewTimeline，就能追蹤跨捲動區域的元素。運作方式與 IntersectionObserver 追蹤元素的方式類似。在以下示範中，每張圖片會在進入捲軸的那一刻起顯示，直到圖片位於中央為止。
SDA 示範螢幕側錄
SDA 現場示範
由於捲動式動畫可搭配 CSS 動畫和 Web Animation API 使用，因此您可以享有這些 API 帶來的所有優勢。包括讓這些動畫在主執行緒外執行。您現在可以建立流暢的動畫，像是捲動操作的流暢動畫，只要加入幾行額外程式碼，在主執行緒中執行即可，這感覺不是這樣？
如要進一步瞭解捲動式動畫，請參閱這篇文章中的所有詳細資料，或參閱內含許多示範的捲動式捲動式動畫.style。
延遲時間軸附件
透過 CSS 套用捲動導向的動畫時，找出控制捲動器的查詢機制一律會往上移動 DOM 樹狀結構，因此僅限捲動祖系。不過，需要動畫的元素通常不是捲動器的子項，而是位於完全不同的子樹狀結構中的元素。
如要允許動畫元素尋找非祖系的已命名捲動時間軸，請使用共用父項上的 timeline-scope 屬性。如此一來，具有該名稱定義的 scroll-timeline 或 view-timeline 就能附加至該名稱，並獲得更廣泛的範圍。如此一來，該共享家長的所有子項都能使用該名稱時間軸。
timeline-scope 後，使用該父項做為 animation-timeline 的元素就能找到在捲軸上宣告的 scroll-timeline螢幕側錄示範
現場示範
進一步瞭解 timeline-scope。
離散屬性動畫
2023 年還有一項新功能，就是能夠為離散動畫建立動畫，例如為 display: none 加上動畫效果。在 Chrome 116 版中，您可以在主要畫面格規則中使用 display 和 content-visibility。您也可以在 50% 點 (而不是 0% 點) 轉換任何獨立資源。方法是使用 allow-discrete 關鍵字在 transition-behavior 屬性，或在 transition 屬性中作為簡寫。
離散動畫。螢幕側錄
離散動畫。示範
進一步瞭解轉換離散動畫。
@starting-style
@starting-style CSS 規則是以新的網路功能為基礎，在 display: none 之間來回建立動畫。這項規則可讓您為元素指定「之前開啟」的樣式，讓瀏覽器可以在開啟該元素前先行查詢。這對於進入動畫，以及為彈出式視窗或對話方塊等元素建立動畫效果時，這個方法非常實用。當您要建立元素，並想要提供動畫效果時，這種做法也能派上用場。下例示範如何在可視區域外，為 popover 屬性 (請參閱下一節) 建立動畫效果至頂層圖層。
@starting-style 螢幕側錄
@starting-style 示範
進一步瞭解 @starting-style 和其他項目動畫。
重疊元素
您可以為轉場效果加入新的 CSS overlay 屬性，以啟用頂層樣式 (例如 popover 和 dialog) 的元素，流暢地從頂層建立動畫。如果沒有轉換重疊元素，元素將立即回到裁剪、轉換和覆蓋範圍，且您不會看到轉場效果。同樣地，將 overlay 加入頂層元素時，::backdrop 就能順暢地展開動畫。
重疊螢幕側錄
重疊現場示範
進一步瞭解重疊和其他結束動畫。
元件
2023 年是許多樣式與 HTML 元件交會的一年，我們投入了大量心力，popover包括錨點位置和樣式下拉式選單未來的發展。這些元件可讓您輕鬆建立常見的 UI 模式，不必仰賴其他程式庫，也不必每次都要從頭開始建構狀態管理系統。
彈出式視窗
Popover API 可協助您建立設計元素，讓這些元素放置在頁面其他部分上方。包括選單、選項和工具提示。如要建立簡易的彈出式視窗，您可以將 popover 屬性和 id 新增至彈出的元素，然後使用 popovertarget="my-popover" 將其 id 屬性連結至叫用按鈕。Popover API 支援：
- 升級到頂層彈出式視窗會出現在網頁的其他部分上方，因此您不必特意探索 Z-index。
- 輕度關閉功能：按一下彈出式視窗區域以外的位置，即可關閉彈出式視窗並返回焦點。
- 預設焦點管理。開啟彈出式視窗後，下一個分頁會在彈出式視窗中停止。
- 無障礙鍵盤繫結。按下
esc鍵或輕觸兩下切換鈕，即可關閉彈出式視窗並返回焦點。 - 可存取的元件繫結。透過語意將彈出元素連結至彈出式觸發條件。
彈出式視窗螢幕側錄
彈出式視窗現場示範
選取範圍中的水平規則
今年 Chrome 和 Safari 導入的 HTML 還有另一項小幅變更，就是能夠在 <select> 元素中加入水平規則元素 (<hr> 標記)，以視覺化的方式清楚呈現內容。過去，將 <hr> 標記放入選取項目並不會顯示出來。不過，Safari 和 Chrome 今年都支援這項功能，讓 <select> 元素中的內容得以進一步區隔。
選取螢幕截圖
選取現場展示
進一步瞭解如何使用所選時數
:使用者有效和無效的虛擬類別
在今年的所有瀏覽器中，:user-valid 和 :user-invalid 的行為與 :valid 和 :invalid 虛擬類別類似，但只有在使用者與輸入內容產生顯著互動後，才會比對表單控制項。即使使用者尚未開始與網頁互動，必要和空白的表單控制項仍會與 :invalid 相符。除非使用者變更了輸入內容，並將輸入內容設為無效狀態，否則同一個控制項將與 :user-invalid 不相符。
有了這些新的選取器，您就不需要撰寫有狀態的程式碼來追蹤使用者輸入的變更。
:user-* 螢幕側錄
:user-* 現場示範
進一步瞭解如何使用 user-* 表單驗證虛擬元素。
獨家手風琴
瀏覽器支援
- 120
- 120
- x
- 17.2
網路上常見的使用者介面模式就是摺疊元件。如要實作此模式，您可以組合幾個 <details> 元素，通常會以視覺化方式將這些元素分組，表示這些元素屬於同一群組。
Chrome 120 的新功能支援 <details> 元素的 name 屬性。使用這個屬性時，具有相同 name 值的多個 <details> 元素就會形成語意群組。一次最多只能開啟群組中的一個元素：當您開啟群組中的其中一個 <details> 元素時，先前開啟的元素會自動關閉。這類手術類型稱為專屬手術。
屬於專屬摺疊法的 <details> 元素不一定要是同層級。可能會分散在文件中。
過去幾年來，CSS 已掀起熱潮，在 2023 年更是如此。如果你是 CSS 新手，或單純想複習基本概念，請前往 Web.dev 免費參加「學習 CSS」課程，以及其他免費課程。
祝您佳節愉快！希望您能把握機會，將這些絕佳的全新 CSS 和使用者介面功能融入貴公司的工作中！
⇾ Chrome UI DevRel 團隊
