CSS 年度總回顧：2023！
直接前往內容：
太棒了！2023 年是 CSS 的重大年份！
從 #Interop2023 到 CSS 和 UI 空間中的許多新登陸頁面，這些功能讓開發人員在網路平台上實現原本認為不可能的功能。如今，所有新型瀏覽器都支援容器查詢、子格線、:has() 選取器，以及大量新色彩空間和函式。Chrome 支援 CSS 專用捲動驅動動畫，並可透過檢視畫面轉場在網路檢視畫面之間流暢地播放動畫。更棒的是，我們推出了許多新的原始元素，可為開發人員提供更優質的體驗，例如 CSS 巢狀結構和範圍樣式。
回顧精彩的一年！因此，我們想在這個里程碑年結束之際，感謝瀏覽器開發人員和網路社群的辛勤付出，讓這一切得以實現。
架構基礎
首先，我們來談談核心 CSS 語言和功能的更新。這些功能是您編寫和整理樣式的基礎，可讓開發人員發揮強大的力量。
三角函數
Chrome 111 新增對三角函式 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支援，讓這些函式可在所有主要引擎中使用。這些函式非常適合用於動畫和版面配置。舉例來說，現在您可以更輕鬆地在圓形上以所選中心為基準排列元素。
進一步瞭解 CSS 中的三角函式。
複雜的 nth-* 選取作業
Browser Support
使用:nth-child() 擬造類別選取器，即可根據索引選取 DOM 中的元素。使用 An+B 微語法，您可以精確控制要選取的元素。
根據預設，:nth-*() 擬物會考量所有子項。自 Chrome 111 起，您可以選擇將選取器清單傳遞至 :nth-child() 和 :nth-last-child()。這樣一來，您可以在 An+B 執行操作前，先過濾子項清單。
在以下示範中，3n+1 邏輯只會套用至小娃娃，因為我們使用 of .small 預先篩除大娃娃。使用下拉式選單動態變更所使用的選取器。
進一步瞭解複雜的 nth-* 選取項目。
範圍
Chrome 118 新增了對 @scope 的支援，@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 選取器、如何處理特異性、無前置程式的範圍，以及 @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 做為格線列或欄的值，採用外部格線的列和欄。
子格線螢幕側錄
子格線現場示範
子格線特別適合用於將同層元素對齊彼此的動態內容。這樣一來，文案撰寫者、使用者體驗撰寫者和翻譯人員就無須嘗試建立「適合」版面的專案文案。使用子格線時，版面配置可以調整為配合內容。
進一步瞭解子格。
字體排版
網頁字體在 2023 年有幾項重大更新。text-wrap 屬性是漸進式改善的絕佳選擇。這個屬性可啟用排版調整功能，在瀏覽器中組合，不必額外編寫指令碼。告別彆扭的文字行長度，迎接更可預測的排版！
Initial-letter
initial-letter 屬性是 Chrome 110 年初推出的一項 CSS 功能，雖然小巧，但功能強大，可設定初始字母的樣式。您可以將字母置於下墜或升起狀態。這個屬性會接受兩個引數：第一個引數用於指定字母在對應段落中的位置，第二個引數則用於指定字母在段落上方的位置。您甚至可以同時使用這兩種方法，如以下示範所示。
初始字母螢幕截圖
初始字母示範
::first-letter 擬造元素的 initial-letter 值，觀察其變化。進一步瞭解initial-letter。
text-wrap: balance and pretty
開發人員無法得知標題或段落的最終大小、字型大小，甚至語言。瀏覽器會提供所有變數，讓您有效且美觀地處理文字斷行問題。由於瀏覽器「確實」瞭解字型大小、語言和分配區域等所有因素，因此非常適合處理進階且品質優良的文字版面配置。
這時就需要使用兩種新的文字斷行技巧，分別是 balance 和 pretty。balance 值旨在建立和諧的文字區塊，而 pretty 則旨在防止孤行並確保適當的斷字。這兩項工作過去都是手動完成，現在只要將工作交給瀏覽器，就能讓它處理任何翻譯語言，實在太棒了！
文字換行螢幕側錄
文字包覆功能現場示範
balance 和 pretty 在標題和段落上的效果。試著將示範翻譯成其他語言！進一步瞭解 text-wrap: balance。