CSS 總結：2023 年！
直接前往內容：
太棒了！2023 年是 CSS 大受歡迎的一年！
從 #Interop2023 到 CSS 和 UI 空間中的許多新到達目的地，讓開發人員在網路平台上看似不可能。現在，每一個新式瀏覽器都支援容器查詢、子格線、: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-* 選項。
範圍
Chrome 118 已新增對 @scope 的支援。您可以利用一項規則，將選取器比對文件的特定子樹狀結構。透過限定範圍樣式，您可以非常具體地選取哪些元素，而不必編寫過於具體的選取器，或將這些元素與 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 */
}
巢狀螢幕側錄
巢狀現場示範
巢狀可以減少樣式表的權重、減輕重複選取器的負擔，以及集中元件樣式。這種語法最初發布時設有以下限制：在多個位置使用 &，但隨著巢狀寬鬆語法更新已放寬。
進一步瞭解巢狀結構。
子類別
CSS subgrid 可讓您建立更複雜的格線，並更妥善地對齊子項版面配置。它允許位於其他格狀空間中的格線，透過將 subgrid 做為格線列或欄的值，自表採用外部格線的列和欄。
子格螢幕側錄
Subrid 現場示範
子網格特別適合用來將同層級與其之間的動態內容對齊。讓文案撰寫人員、使用者體驗撰稿人和譯者不必構思合適的專案文案版面配置。使用子格線時，您可配合內容調整版面配置。
進一步瞭解子類別。
字體排版
2023 年，網頁字體排版出現幾項重大更新。text-wrap 屬性特別適合使用漸進式增強。這個屬性可讓您調整字體排版版面配置，這類調整都是在瀏覽器中編寫，而且不需另外編寫指令碼。再也不怕難忘的線條長度，還有更可預測的字體排版！
初始字母
今年初，Chrome 110 開始採用 initial-letter 屬性，這是一項強大而強大的 CSS 功能，可設定初始字母位置的樣式。您可以將字母設為已捨棄或凸起的狀態。此屬性接受兩個引數：第一個是指定字母在對應段落中的深度，第二個則是表示字母上字母的高度。您甚至可以合併這兩種方法，如下方的示範所示。
初始字母的螢幕截圖
初始字母示範
::first-letter 虛擬元素的 initial-letter 值，觀察此情況的位移。進一步瞭解初始字母。
文字換行：平衡兼顧
開發人員並不知道最終大小、字型大小，甚至是標題或段落使用的語言。瀏覽器支援所有必要的變數，才能以美觀的方式處理文字換行。由於瀏覽器「確實」瞭解所有因素 (例如字型大小、語言和分配的區域)，因此非常適合處理進階和高品質的文字版面配置。
這就是採用兩種新的文字包裝技術，分別名為 balance 和 pretty。balance 值會試圖建立協調的文字區塊，而 pretty 會尋求預防孤島，並確保連字號良好。這兩種工作通常都是手動完成，而且能夠在瀏覽器上運作，並且支援任何翻譯語言，真的太棒了。
文字自動換行
文字換行即時示範
balance 和 pretty 對標題和段落的影響。建議你將示範內容翻譯成其他語言！進一步瞭解文字換行：餘額。
顏色
2023 年是網路平台的崛起，有了新的色彩空間和功能，可以支援動態色彩主題，您就可以輕鬆打造生動活潑、吸睛的主題，或是打造可自訂的主題！
HD 高畫質色彩空間 (顏色等級 4)
從硬體到軟體，CSS 和閃爍的燈號；因此，我們的電腦可能需要花費大量功夫，設法讓色彩和人類眼睛一樣恰到好處。我們在 2023 年加入了更多顏色、更多顏色、新的色彩空間、色彩功能及全新功能。
CSS 和顏色現在可以：
- 檢查使用者的螢幕硬體是否支援廣角 HDR 色彩。
- 檢查使用者的瀏覽器是否瞭解色彩語法，例如 Oklch 或 Display P3。
- 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等介面中指定 HDR 色彩。
- 使用 HDR 色彩創造漸層效果。
- 在替代色彩空間中插入漸層。
- 使用 color-mix() 混合色彩。
- 使用相對顏色語法建立顏色子類。
顏色 4 螢幕側錄
顏色 4 示範
進一步瞭解顏色 4 和色域。
色混功能
混合顏色是一項經典工作，而在 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 年發展，在這個新創的一年，Google 推出各種新功能，徹底改變了回應式網頁體驗的建構方式，更進一步採用以元件為基礎的回應式設計的全新模式。結合容器查詢和 :has() 之後，即可支援根據父項大小，以及任何子項是否存在/狀態，擁有回應式和邏輯樣式的元件。也就是說，您終於可以將頁面層級版面配置與元件層級版面配置分開，並編寫一次邏輯，在所有位置使用元件！
大小容器查詢
容器查詢不必使用可視區域的全域大小資訊來套用 CSS 樣式，而是支援網頁內父項元素的查詢。這表示，您可以對多個版面配置和多個檢視畫面，以動態方式設定元件的樣式。今年 (2 月 14 日) 在所有新式瀏覽器中，大小容器查詢都變得穩定可靠。
如要使用這項功能，請先為要查詢的元素設定包含範圍，接著使用與媒體查詢類似的方式，使用 @container 搭配「size」參數來套用樣式。連同容器查詢，您可以取得容器查詢大小。在以下示範中，容器查詢大小 cqi (代表內嵌容器的大小) 會用來調整資訊卡標頭的大小。
@container 螢幕側錄
@container 示範
進一步瞭解如何使用容器查詢。
設定容器查詢樣式
在 Chrome 111 中實作部分樣式查詢。您目前可以透過樣式查詢，在使用 @container style() 時查詢父項元素的自訂屬性值。例如，查詢是否有自訂屬性值，或設為特定值，如 @container style(--rain: true)。
樣式查詢螢幕截圖
樣式查詢示範
雖然這聽起來類似於在 CSS 中使用類別名稱，但樣式查詢仍有一些優點。第一種是使用樣式查詢，您可以視需要更新 CSS 中的值，以便因應虛擬狀態。此外，在日後的實作版本中，您將能查詢值範圍以確定套用的樣式，例如 style(60 <= --weather <= 70)，以及根據 style(font-style: italic) 等屬性值組合的樣式。
進一步瞭解如何使用樣式查詢。
:has() 選取器
將近 20 年來，開發人員要求使用「家長選取器」。只要使用 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 是否可使用 JavaScript 的策略，都是在 HTML 中加入 nojs 類別，並使用 JavaScript 將其移除。這些指令碼現在可以移除，因為 CSS 現在可以偵測 JavaScript 並做出相應調整。
瞭解如何透過 Chrome 開發人員工具在網頁中啟用及停用用於測試的 JavaScript。
編寫螢幕側錄指令碼
指令碼示範
考慮在網站上執行主題切換時，使用指令碼的媒體查詢可以根據系統偏好設定進行切換，因為沒有 JavaScript 可用。或者考慮切換元件，如果可使用 JavaScript，使用者可透過手勢滑動切換元件，不必只是開啟或關閉這項功能。如果指令碼功能可以使用，同時提供有意義的基礎體驗，那麼若指令碼功能已停用，就帶來許多改善使用者體驗的大好機會。
進一步瞭解指令碼。
降低資訊透明度媒體查詢
非不透明的介面可能會導致頭痛，或造成視覺上的阻礙，造成各種視覺障礙。因此，Windows、macOS 和 iOS 有系統偏好設定，可讓使用者降低或移除使用者介面的透明度。這項「prefers-reduced-transparency」媒體查詢適合搭配其他慣用的媒體查詢，您可以發揮創意，同時針對使用者進行調整。
減少透明螢幕側錄
透明度簡化示範
在某些情況下，您可以提供沒有內容重疊其他內容的替代版面配置。在其他情況下，您可以將色彩的不透明度調整為不透明或幾乎不透明。以下網誌文章提供更具啟發性的示範內容，讓您根據使用者的偏好加以調整，如果您想瞭解這些媒體查詢何時可產生價值，不妨參考這些文章。
互動
互動是數位體驗的基礎，使用者可以取得意見回饋，瞭解使用者點選的內容，以及他們在虛擬空間中的位置。今年有許多令人期待的功能到達網頁，使得撰寫和實作互動變得更加容易，進而為使用者提供流暢的體驗，並提供更優異的網路體驗。
查看轉場效果
檢視轉場效果對網頁的使用者體驗有很大的影響。利用 View Transitions API，您可以在單頁應用程式的兩個頁面狀態之間建立視覺轉場效果。這類轉場效果可以是整頁的轉換，也可以是網頁上較小的內容，例如在清單中新增或移除項目。
View Transitions API 的核心是 document.startViewTranstion 函式。傳入可將 DOM 更新為新狀態的函式，API 會為您完成所有工作。做法是擷取前後對照快照，然後在兩者間切換。透過 CSS，您可以控制要擷取的內容，並視需要自訂快照的動畫方式。
VT 螢幕側錄
VT 示範
Chrome 111 推出單一頁面應用程式的 View Transitions API。進一步瞭解檢視區塊轉場效果。
線性加/減速函式
瀏覽器支援
- 113
- 113
- 112
- 17.2
但別讓這個函式的名稱騙取了。linear() 函式 (不要與 linear關鍵字混淆) 可讓您以簡單的方式建立複雜的加/減速函式，但也會失去部分精確度。
在 linear() 之前為 Chrome 113 推出，在 CSS 中無法產生彈跳或彈簧效果。有了 linear()，就能把加/減速簡化為一系列的點，然後在這些點之間進行線性內插，藉以達到約略值。
linear() 函式會使用這些點，以線性方式在這兩個點之間進行內插。線性調節螢幕側錄
線性加/減速示範
linear() 示範。捲動結束
許多介面都包括捲動互動，有時介面需要同步處理與目前捲動位置相關的資訊，或根據目前狀態擷取資料。在 scrollend 事件之前，您必須使用不正確的逾時方法，這個方法可能會在使用者的手指仍停留在螢幕上時觸發。scrollend 事件可讓您有一個完美的定時捲動事件，瞭解使用者是否仍在手勢中。
捲動式螢幕側錄
捲動示範
瀏覽器必須扮演舉足輕重的角色，因為 JavaScript 無法在捲動過程中追蹤畫面上的手指移動情形，因此無法取得相關資訊。現在可以刪除嘗試不精確的捲動結尾程式碼區塊，並替換為瀏覽器擁有的高精確度事件。
進一步瞭解捲動功能。
捲動導向動畫
捲動式動畫是 Chrome 第 115 版推出的全新功能。這類動畫可讓您使用現有的 CSS 動畫或透過 Web Animations API 建構的動畫，並搭配使用捲軸的捲動位移。當您在水平捲軸上上下捲動，或左右捲動，連結動畫都會向前或向後向後滑動。
透過 ScrollTimeline，您可以追蹤捲動器的整體進度，如以下示範所示。您捲動至頁面底部時，系統會逐字元顯示文字內容。
SDA 螢幕側錄
SDA 示範
透過 ViewTimeline，您可以追蹤跨捲動處的元素。這個方式與 IntersectionObserver 追蹤元素的運作方式類似。在以下示範中，每張圖片從進入捲軸的那一刻開始顯示，直到圖片位於中央為止。
SDA 示範螢幕側錄
SDA 現場示範
由於捲動式動畫可搭配 CSS 動畫和 Web Animations 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 屬性中，以簡寫在 transition-behavior 屬性中完成此操作。
離散式動畫。螢幕側錄
離散式動畫。示範
進一步瞭解如何轉換獨立動畫。
@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> 元素中的內容。
選取螢幕截圖
選取現場示範
進一步瞭解如何使用選取時間的 hr
:使用者有效和無效的虛擬類別
今年在所有瀏覽器中均穩定，:user-valid 和 :user-invalid 的行為類似於 :valid 和 :invalid 虛擬類別，但只有在使用者與輸入內容大幅互動後，才會比對表單控制項。即使使用者尚未開始與網頁互動，這是必填且空白的表單控制項也會符合 :invalid。除非使用者變更輸入內容，使其處於無效狀態，否則相同控制項不會比對 :user-invalid。
有了這些新的選取器，您不再需要撰寫有狀態的程式碼，就能追蹤使用者已變更的輸入內容。
:使用者* 螢幕側錄
:使用者* 現場示範
進一步瞭解如何使用使用者*表單驗證虛擬元素。
獨家配音員
瀏覽器支援
- 120
- 120
- x
- 17.2
網路上的常見的 UI 模式是摺疊元件。如要實作這個模式，請結合多個 <details> 元素 (通常以視覺化方式將元素分組)，以便呈現這些元素屬於同一群組。
Chrome 120 的新功能支援使用 <details> 元素的 name 屬性。使用這項屬性時，多個具有相同 name 值的 <details> 元素就會形成語意群組。群組最多只能同時開啟一個元素：當您從群組中開啟其中一個 <details> 元素時，先前開啟的元素會自動關閉。這類手術稱為「獨家配方」。
專屬指令中的 <details> 元素不一定需要同層級。也可以散佈在文件中。
CSS 在過去幾年內進行瞭如此大的改革，在 2023 年更是如此。如果您是 CSS 新手，或單純想複習基本概念，請參考我們免費提供的「學習 CSS」課程及 web.dev 提供的其他免費課程。
祝一切順心！
⇾ Chrome UI 開發人員團隊，
