全文概覽：

• 基礎(chǔ)功能

• 三角函數(shù)
• 復(fù)雜的nth-*選擇器
• @scope
• 嵌套
• 子網(wǎng)格

• 排版
• Initial-letter
• text-wrap
• 顏色
• 高級(jí)色彩空間
• color-mix 函數(shù)
• 相對(duì)顏色語法
• 響應(yīng)式設(shè)計(jì)
• 容器大小查詢
• 容器樣式查詢
• :has() 選擇器
• 更新媒體查詢
• 腳本媒體查詢
• 交互
• 視圖轉(zhuǎn)換
• 線性緩動(dòng)函數(shù)
• 滾動(dòng)結(jié)束
• 滾動(dòng)驅(qū)動(dòng)動(dòng)畫
• timeline-scope
• 離散屬性動(dòng)畫
• @starting-style
• overlay
• 組件
• Popover
• 選擇框中的分隔線
• :user-valid 和 :user-invalid
• 獨(dú)占式手風(fēng)琴

基礎(chǔ)功能

首先來了解一下核心 CSS 語言和功能的更新。

三角函數(shù)

Chrome 111 增加了對(duì)三角函數(shù) sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其適用于所有主流引擎。這些函數(shù)對(duì)于動(dòng)畫和布局來說非常有用。例如，現(xiàn)在可以更輕松地在以所選中心為中心的圓圈上布置元素。

瀏覽器支持：

復(fù)雜的nth-*選擇器

借助:nth-child()偽類選擇器，可以按索引選擇 DOM 中的元素?？梢允褂?nbsp;An+B 微語法精確控制要選擇哪些元素。

默認(rèn)情況下，:nth-*()偽類會(huì)考慮所有子元素。從 Chrome 111 開始，可以選擇將選擇器列表傳遞給:nth-child()和:nth-last-child()。這樣就可以在 An+B 執(zhí)行操作之前預(yù)先過濾子項(xiàng)列表。

在下面的演示中，通過使用 of .small 對(duì)小玩偶進(jìn)行預(yù)過濾，3n+1 邏輯僅應(yīng)用于它們。使用下拉菜單可動(dòng)態(tài)更改所使用的選擇器。

瀏覽器支持：

@scope

Chrome 118 增加了對(duì) @scope 的支持，它可以將選擇器的范圍限定為文檔的特定子樹。借助作用域樣式，可以非常具體地選擇元素，而無需編寫過于具體的選擇器或?qū)⑺鼈兣c DOM 結(jié)構(gòu)緊密耦合。

限定作用域的子樹由作用域根和可選的作用域限制定義。

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

放置在作用域塊內(nèi)的樣式規(guī)則僅針對(duì)劃分出的子樹中的元素。例如，以下作用域樣式規(guī)則僅針對(duì)位于.card元素和由[data-component]選擇器匹配的任何嵌套組件之間的<img>元素。

@scope (.card) to ([data-component]) {
  img { … }
}

瀏覽器支持：

嵌套

在 CSS 原生支持嵌套之前，每個(gè)選擇器都需要單獨(dú)顯式地聲明。這會(huì)導(dǎo)致重復(fù)、樣式表龐大和分散的作者體驗(yàn)?，F(xiàn)在，選擇器可以繼續(xù)并將相關(guān)的樣式規(guī)則分組在一起。

dl {
  /* dt */
  
  dt {
    /* dl dt */
  }

  dd {
    /* dl dd */
  }
}

dt {
  /* dt */
}

dl dt {
  /* dl dt */
}

dl dd {
  /* dl dd */
}

嵌套可以減少樣式表的大小，減少重復(fù)選擇器的開銷，并集中組件樣式。最初發(fā)布的語法有一個(gè)限制，需要在各個(gè)地方使用 &，但自那時(shí)起，隨著嵌套語法的放寬更新，這一限制已經(jīng)被解除。

瀏覽器支持：

子網(wǎng)格

借助 CSS subgrid 可以創(chuàng)建更復(fù)雜的網(wǎng)格，并在子布局之間實(shí)現(xiàn)更好的對(duì)齊。它允許內(nèi)部網(wǎng)格采用外部網(wǎng)格的行和列作為自己的行和列，通過在網(wǎng)格行或列中使用subgrid作為值。

子網(wǎng)格特別適用于將兄弟元素對(duì)齊到彼此的動(dòng)態(tài)內(nèi)容。

瀏覽器支持：

排版

2023 年，網(wǎng)頁排版取得了一些重要更新。其中一個(gè)特別好的漸進(jìn)增強(qiáng)是text-wrap屬性，該屬性可以在瀏覽器中進(jìn)行排版布局調(diào)整，而無需額外的腳本。告別尷尬的行長(zhǎng)度，體驗(yàn)更具可預(yù)測(cè)性的排版！

Initial-letter

在 2023 年初的 Chrome 110 中引入的initial-letter屬性是一個(gè)小而強(qiáng)大的CSS功能，它用于設(shè)置首字母的排版樣式?？梢詫⒆帜阜胖迷谙鲁粱蛱Ц叩臓顟B(tài)下。該屬性接受兩個(gè)參數(shù)：第一個(gè)參數(shù)用于控制字母下沉到相應(yīng)段落的深度，第二個(gè)參數(shù)用于將字母抬高多少，可以同時(shí)使用這兩個(gè)參數(shù)。

p {
  font-size: 2rem;
  max-width: 36ch;
  color: var(--tangerine);
  background: white;

  &::first-letter {
    initial-letter: 3 2;
    font-weight: 800;
    padding-right: 1rem;
    background: linear-gradient(
      to right,
      var(--razzmatazz),
      var(--goldenyellow)
    );
    color: transparent;
    -webkit-background-clip: text;
  }
}

效果如下：

瀏覽器支持：

text-wrap

作為開發(fā)人員，我們可能無法確定標(biāo)題或段落的最終大小、字體大小，甚至語言。瀏覽器提供了所有文本換行所需的變量，這些變量對(duì)于有效和美觀的文本處理非常重要。由于瀏覽器了解所有因素，比如字體大小、語言和分配的區(qū)域，它成為處理高級(jí)和高質(zhì)量文本布局的絕佳選擇。

這就是兩種全新的文本換行技術(shù)發(fā)揮作用的時(shí)刻，它們被命名為balance和pretty。balance值的目的是創(chuàng)建和諧的文本塊，而pretty則致力于防止孤立的字符并確保連字符的健康使用。在過去，這兩項(xiàng)任務(wù)通常需要手動(dòng)完成，但現(xiàn)在可以將它們交給瀏覽器來處理，并使其適應(yīng)任何翻譯語言。

顏色

2023 年是 Web 平臺(tái)的色彩革新之年。借助全新的色彩空間和功能，實(shí)現(xiàn)了動(dòng)態(tài)色彩主題，可以為用戶打造更生動(dòng)、豐富的主題，并且還可以實(shí)現(xiàn)個(gè)性化定制！

高級(jí)色彩空間

在 2023 年，我們擁有了全新的顏色、更多的顏色、新的色彩空間、色彩函數(shù)和新的功能。

現(xiàn)在，CSS 和顏色可以做到以下事情：

• 檢查用戶屏幕硬件是否支持廣色域HDR顏色。
• 檢查用戶的瀏覽器是否理解如Oklch或Display P3等顏色語法。
• 在Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ等多種格式中指定HDR顏色。
• 創(chuàng)建具有HDR顏色的漸變。
• 在可選顏色空間中插值漸變。
• 使用color-mix()混合顏色。
• 利用相對(duì)顏色語法創(chuàng)建顏色變體。

color-mix 函數(shù)

通過 color-mix 函數(shù)僅可以混合白色或黑色到一種顏色，還可以混合透明度，并且可以在選擇的任何顏色空間中完成所有這些操作，它同時(shí)具有基本顏色特性和高級(jí)顏色特性。

可以將color-mix()視為漸變過程中的一個(gè)時(shí)間點(diǎn)，該漸變展示了從藍(lán)色到白色的所有中間步驟，而color-mix()僅展示了其中的一個(gè)步驟。

瀏覽器支持：

相對(duì)顏色語法

相對(duì)顏色語法是與color-mix()相輔相成的一種方法，用于創(chuàng)建顏色變體。它比color-mix()更強(qiáng)大，但也是一種不同于傳統(tǒng)顏色處理的策略。color-mix()可以混入白色以減輕顏色的深淺程度，而相對(duì)顏色語法則提供了對(duì)亮度通道的精確訪問，并可以利用calc()函數(shù)以編程方式降低或增加亮度。

相對(duì)顏色語法允許對(duì)顏色進(jìn)行相對(duì)和絕對(duì)的操作。相對(duì)變化是指使用calc()函數(shù)對(duì)飽和度或亮度的當(dāng)前值進(jìn)行修改。絕對(duì)變化是指將通道值替換為全新的值，例如將不透明度設(shè)置為50%。這種語法為各種主題和實(shí)時(shí)變體提供了實(shí)用的工具。

響應(yīng)式設(shè)計(jì)

2023 年，響應(yīng)式設(shè)計(jì)邁向了新的高度。這一具有里程碑意義的年份帶來了創(chuàng)新的功能，顛覆了傳統(tǒng)的構(gòu)建響應(yīng)式網(wǎng)頁體驗(yàn)的方式，并引領(lǐng)了基于組件的響應(yīng)式設(shè)計(jì)模型的新潮流。容器查詢和:has()的完美結(jié)合，使得組件能夠根據(jù)其父元素的大小以及任何子元素的存在或狀態(tài)，靈活地適應(yīng)并展現(xiàn)出相應(yīng)的樣式。這意味著我們現(xiàn)在可以將頁面級(jí)的布局與組件級(jí)的布局分離開來，并且只需編寫一次邏輯，便可以在任何地方重復(fù)使用組件！

容器大小查詢

與使用視口的全局大小信息來應(yīng)用CSS樣式不同，容器查詢支持在頁面內(nèi)查詢父元素。這意味著組件可以以動(dòng)態(tài)方式在多個(gè)布局和多個(gè)視圖中進(jìn)行樣式設(shè)置。2月14日，所有現(xiàn)代瀏覽器都穩(wěn)定支持了容器大小查詢。

要使用此功能，首先在要查詢的元素上設(shè)置容器，然后類似于媒體查詢，使用@container和大小參數(shù)來應(yīng)用樣式。除了容器查詢，還可以獲得容器查詢的大小。在以下示例中，容器查詢大小cqi（表示內(nèi)聯(lián)容器的大?。┯糜谡{(diào)整卡片標(biāo)題的大小。

瀏覽器支持：

容器樣式查詢

在 Chrome 111 中，樣式查詢以部分實(shí)現(xiàn)的形式出現(xiàn)。借助樣式查詢功能，可以在使用@container style()時(shí)查詢父元素上自定義屬性的值。例如，檢查自定義屬性是否存在，或者是否被設(shè)置為特定值，如@container style(--rain: true)。

盡管樣式查詢?cè)谀撤N程度上與在CSS中使用類名相似，但樣式查詢具有其獨(dú)特的優(yōu)勢(shì)。首先，使用樣式查詢，可以在CSS中根據(jù)需要更新偽狀態(tài)的值。此外，未來的版本將支持查詢數(shù)值范圍來確定應(yīng)用的樣式，例如style(60 <= --weather <= 70)，并且可以基于屬性-值對(duì)設(shè)置樣式，例如style(font-style: italic)。

瀏覽器支持：

:has() 選擇器

在過去的20年里，開發(fā)者們一直期待在CSS中加入“父選擇器”。隨著在 Chrome 105 中引入:has()選擇器，這一愿望終于得以實(shí)現(xiàn)。例如，使用.card:has(img.hero)將選擇那些包含英雄圖像子元素的.card元素。

.card:has(.card__media) {
  grid-template-areas:
    "title"
    "blurb"
    "author"
    "media";
  padding-bottom: 0;
  --color: #6300ff;
}

由于:has()接受一個(gè)相對(duì)選擇器列表作為參數(shù)，因此可以選擇多個(gè)元素，不僅可以沿著DOM樹向上選擇，還可以進(jìn)行橫向選擇。例如，li:has(+ li:hover)將選擇當(dāng)前鼠標(biāo)懸停的<li>元素之前的<li>元素。

瀏覽器支持：

更新媒體查詢

更新媒體查詢提供了一種根據(jù)設(shè)備刷新率來調(diào)整用戶界面的方法。這個(gè)功能可以報(bào)告設(shè)備的刷新率是快速、慢速還是根本沒有刷新率，這與不同設(shè)備的能力密切相關(guān)。

大部分設(shè)備可能都具備較快的刷新率，包括臺(tái)式機(jī)和大多數(shù)的移動(dòng)設(shè)備。然而，一些設(shè)備如電子閱讀器和低功耗支付系統(tǒng)等可能具備較慢的刷新率。了解到設(shè)備無法處理動(dòng)畫或頻繁更新的情況，意味著可以更加合理地使用電池，或者避免因?yàn)轭l繁的視圖更新而導(dǎo)致的故障。

腳本媒體查詢

媒體查詢腳本可以用于檢查JavaScript是否可用，這對(duì)漸進(jìn)增強(qiáng)非常有用。在引入這個(gè)媒體查詢之前，檢測(cè)JavaScript是否可用的策略是在HTML中放置一個(gè)nojs類，并使用JavaScript將其移除?，F(xiàn)在，由于CSS有了一種檢測(cè)JavaScript并相應(yīng)調(diào)整的方式，因此可以移除這些腳本。

通過使用腳本媒體查詢，可以在沒有JavaScript可用的情況下，根據(jù)系統(tǒng)偏好進(jìn)行網(wǎng)站主題的切換。此外，還可以考慮一個(gè)切換組件，當(dāng)JavaScript可用時(shí)，該組件可以使用手勢(shì)滑動(dòng)進(jìn)行切換，而不僅僅是簡(jiǎn)單地切換開關(guān)的狀態(tài)。這樣，在腳本可用的情況下，可以提供更優(yōu)化的用戶體驗(yàn)；而在腳本禁用的情況下，仍然能夠提供基本而有意義的體驗(yàn)。

交互

今年，有許多令人振奮的交互功能陸續(xù)問世，這些功能使得交互的構(gòu)建和實(shí)施變得更加簡(jiǎn)單，從而促進(jìn)了流暢的用戶體驗(yàn)和更加精致的網(wǎng)絡(luò)體驗(yàn)。

視圖轉(zhuǎn)換

通過使用視圖轉(zhuǎn)換API，可以在單頁應(yīng)用的兩個(gè)頁面狀態(tài)之間創(chuàng)建視覺轉(zhuǎn)換。這些轉(zhuǎn)換可以是全頁面轉(zhuǎn)換，也可以是頁面上的小元素，例如添加或刪除列表中的新項(xiàng)目。

視圖轉(zhuǎn)換API的核心是document.startViewTranstion函數(shù)。只需傳遞一個(gè)更新DOM到新狀態(tài)的函數(shù)，API就會(huì)處理所有細(xì)節(jié)。它通過獲取先前和后續(xù)快照，然后在兩者之間進(jìn)行過渡來實(shí)現(xiàn)這一點(diǎn)?？梢允褂肅SS來控制要捕獲的內(nèi)容，并可選擇自定義這些快照的動(dòng)畫方式。

瀏覽器支持：

線性緩動(dòng)函數(shù)

線性緩動(dòng)函數(shù)是用于動(dòng)畫效果的一種函數(shù)，它并非真正的“線性”（linear）函數(shù)，而是一種簡(jiǎn)化的緩動(dòng)函數(shù)，可以模擬更復(fù)雜的動(dòng)畫效果。盡管這種函數(shù)的精度可能略有降低，但它的實(shí)現(xiàn)方式簡(jiǎn)單直觀，可以方便地應(yīng)用于各種動(dòng)畫效果。

在 Chrome 113 版本之前，CSS中確實(shí)無法直接創(chuàng)建反彈或彈簧等復(fù)雜的動(dòng)畫效果。然而，通過使用linear()函數(shù)，開發(fā)者可以將這些復(fù)雜的緩動(dòng)效果簡(jiǎn)化為一系列的點(diǎn)，然后在這這些點(diǎn)之間進(jìn)行線性插值，從而得到一種近似的緩動(dòng)效果。

原始的藍(lán)色反彈曲線被簡(jiǎn)化為一組綠色關(guān)鍵點(diǎn)，linear()函數(shù)使用這些關(guān)鍵點(diǎn)，并在它們之間進(jìn)行線性插值。

瀏覽器支持：

滾動(dòng)結(jié)束

許多界面都包含滾動(dòng)交互，有時(shí)界面需要同步與當(dāng)前滾動(dòng)位置相關(guān)的信息，或者根據(jù)當(dāng)前狀態(tài)獲取數(shù)據(jù)。在scrollend事件之前，開發(fā)者們通常采用設(shè)置超時(shí)的方式來嘗試捕捉滾動(dòng)動(dòng)作的結(jié)束。這種做法并不準(zhǔn)確，因?yàn)槌瑫r(shí)可能會(huì)在用戶手指仍然觸摸屏幕時(shí)被觸發(fā)。這可能導(dǎo)致用戶體驗(yàn)的不連貫，或者獲取到不準(zhǔn)確的數(shù)據(jù)。

現(xiàn)在，有了scrollend事件，開發(fā)者可以獲得一個(gè)更加精準(zhǔn)定時(shí)的方式。scrollend事件能夠在用戶滾動(dòng)動(dòng)作結(jié)束時(shí)立即觸發(fā)，從而判斷用戶是否仍處于手勢(shì)的中間狀態(tài)。

瀏覽器支持：

滾動(dòng)驅(qū)動(dòng)動(dòng)畫

從 Chrome 115 版本開始，滾動(dòng)驅(qū)動(dòng)的動(dòng)畫成為了一項(xiàng)令人振奮的功能。這項(xiàng)功能可以將現(xiàn)有的CSS動(dòng)畫或使用Web動(dòng)畫API構(gòu)建的動(dòng)畫與滾動(dòng)容器的滾動(dòng)偏移量相結(jié)合。當(dāng)上下滾動(dòng)（或在水平滾動(dòng)容器中左右滾動(dòng)）時(shí)，鏈接的動(dòng)畫會(huì)直接響應(yīng)地前后播放。

通過使用ScrollTimeline，可以跟蹤滾動(dòng)容器的總體進(jìn)度。例如，下面的演示顯示了當(dāng)滾動(dòng)到頁面末尾時(shí)，文本逐個(gè)字符地顯示出來。這一優(yōu)化確保了流暢、連貫的用戶體驗(yàn)，同時(shí)允許開發(fā)者利用瀏覽器的內(nèi)置功能來實(shí)現(xiàn)復(fù)雜的效果。

使用 ViewTimeline 可以跟蹤一個(gè)元素在滾動(dòng)視口中的位置。這類似于IntersectionObserver跟蹤一個(gè)元素的方式。在下面的演示中，每個(gè)圖像從進(jìn)入滾動(dòng)視口開始逐漸顯示，直到位于中心位置。

滾動(dòng)驅(qū)動(dòng)的動(dòng)畫與CSS動(dòng)畫和Web動(dòng)畫API的結(jié)合，可以使開發(fā)者受益于這些API帶來的所有優(yōu)勢(shì)。其中最顯著的優(yōu)勢(shì)之一是能夠在主線程之外運(yùn)行動(dòng)畫。通過添加幾行額外的代碼，開發(fā)者可以讓由滾動(dòng)驅(qū)動(dòng)的動(dòng)畫在主線程之外順暢運(yùn)行，從而避免阻塞主線程，提高應(yīng)用的響應(yīng)性和性能。

瀏覽器支持：

timeline-scope

在通過CSS應(yīng)用滾動(dòng)驅(qū)動(dòng)的動(dòng)畫時(shí)，查找控制滾動(dòng)的機(jī)制總是沿著DOM樹向上查找，這使得它僅限于滾動(dòng)祖先。然而，很多時(shí)候，需要?jiǎng)赢嫷脑夭⒉皇菨L動(dòng)容器的子元素，而是位于完全不同的子樹中的元素。

為了使動(dòng)畫元素能夠找到非祖先元素的命名滾動(dòng)時(shí)間線，可以在共享父元素上使用timeline-scope屬性。這將允許具有該名稱的定義的scroll-timeline 或 view-timeline附加到該元素，使其具有更廣泛的范圍。有了這個(gè)功能，任何共享父元素的子元素都可以使用具有該名稱的時(shí)間線。

在共享父元素上聲明timeline-scope后，滾動(dòng)容器上聲明的滾動(dòng)時(shí)間線可以被使用它作為其動(dòng)畫時(shí)間線的元素找到。

瀏覽器支持：

離散屬性動(dòng)畫

2023年的另一個(gè)新功能是對(duì)離散動(dòng)畫進(jìn)行動(dòng)畫處理的能力。離散動(dòng)畫是指屬性值在兩個(gè)或更多離散值之間變化的動(dòng)畫，例如從display: none到可見狀態(tài)的動(dòng)畫。從Chrome 116開始，可以在關(guān)鍵幀規(guī)則中使用display和content-visibility屬性，并在動(dòng)畫的50%位置而不是0%位置過渡任何離散屬性。

這個(gè)優(yōu)化方法通過使用transition-behavior屬性中的allow-discrete關(guān)鍵字或在transition屬性中作為簡(jiǎn)寫來實(shí)現(xiàn)。這使得開發(fā)者可以更靈活地控制離散屬性的動(dòng)畫過渡，并在需要時(shí)實(shí)現(xiàn)更平滑的過渡效果。

瀏覽器支持：

@starting-style

通過使用@starting-style CSS規(guī)則，可以對(duì)display: none進(jìn)行動(dòng)畫處理。該規(guī)則提供了一種在元素打開之前，瀏覽器可以查找的“打開前”樣式的方式。這對(duì)于創(chuàng)建入場(chǎng)動(dòng)畫以及顯示諸如彈出框或?qū)υ捒虻仍胤浅Ｓ杏?。同時(shí)，它還可以用于在創(chuàng)建新元素并希望為其添加動(dòng)畫效果時(shí)。

下面的例子將一個(gè)彈出框平滑地從視口外部動(dòng)畫顯示到頂層：

@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

瀏覽器支持：

overlay

通過使用新的 CSS overlay 屬性，可以添加過渡效果，使具有頂層樣式的元素（例如彈出框、對(duì)話框等）能夠平滑地從頂層動(dòng)畫移出。如果沒有使用過渡到overlay，元素將立即回到被裁剪、變形和覆蓋的狀態(tài)，導(dǎo)致看不到轉(zhuǎn)換發(fā)生的過程。類似地，當(dāng)在頂層元素上添加overlay屬性時(shí)，它可以使得::backdrop元素能夠平滑地動(dòng)畫移出。

瀏覽器支持：

組件

2023年對(duì)于樣式和HTML組件來說是重要的一年，其中引入了彈出框功能，并對(duì)錨點(diǎn)定位和下拉菜單樣式進(jìn)行了大量的改進(jìn)。這些組件使得構(gòu)建常見的UI模式更加容易，無需依賴額外的庫或每次都從頭開始構(gòu)建自己的狀態(tài)管理系統(tǒng)。

Popover

Popover API 可以幫助開發(fā)者構(gòu)建覆蓋在頁面上方的元素，這些元素可能包括菜單、選擇和工具提示。通過為彈出的元素添加popover屬性和id，并將其id屬性與觸發(fā)按鈕連接起來，使用popovertarget="my-popover"可以創(chuàng)建一個(gè)簡(jiǎn)單的彈出框。Popover API 具有以下優(yōu)點(diǎn)：

• 提升到頂層：彈出框?qū)@示在頁面其余部分的上方，因此無需修改z-index。
• 輕松關(guān)閉功能：?jiǎn)螕魪棾隹騾^(qū)域之外會(huì)關(guān)閉彈出框并返回焦點(diǎn)。
• 默認(rèn)焦點(diǎn)管理：打開彈出框會(huì)使下一個(gè)tab停留在彈出框內(nèi)。
• 可訪問的鍵綁定：按下esc鍵或雙倍切換將關(guān)閉彈出框并返回焦點(diǎn)。
• 可訪問的組件綁定：將彈出框元素與彈出框觸發(fā)器語義化地連接。

<div popover role="menu" id="menu">
  <button class="close-btn" popovertarget="menu" popovertargetaction="hide">
    <span>?</span>
    <span class="sr-only">Close</span>
  </button>
  <ul>
    <li><a href="#">Typography</a></li>
    <li><a href="#">Foundations</a></li>
    <li><a href="#">Color</a></li>
    <li><a href="#">Interactions</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">Responsive</a></li>
  </ul>
</div>

瀏覽器支持：

選擇框中的分隔線

今年在Chrome和Safari中引入的另一個(gè)HTML的小改變是，現(xiàn)在可以在<select>元素中添加水平線元素（<hr>標(biāo)簽），以幫助視覺上分隔內(nèi)容。以前，在<select>中放置<hr>標(biāo)簽不會(huì)被渲染。但今年，Safari和Chrome都支持此功能，可以更好地在<select>元素中分隔內(nèi)容。

<select name="majors" id="major-select">
  <option value="">Select a favorite feature</option>
  <hr>
  <optgroup label="Foundations">
    <option value="trig">Trigonometric functions</option>
    <option value="nth">Complex nth-* selection</option>
    <option value="nesting">Nesting</option>
    <option value="subgrid">Subgrid</option>
    <option value="mq-ranges">Media query range syntax</option>
  </optgroup>
  <optgroup label="Typography">
    <option value="initial-letter">Initial-letter</option>
    <option value="text-wrap-b-p">Text-wrap: balance / pretty</option>
  </optgroup>
  <optgroup label="Color">
    <option value="color-4">CSS Color level 4</option>
    <option value="color-mix">Color-mix function</option>
    <option value="rcs">Relative color syntax</option>
  </optgroup>
  <optgroup label="Responsive Design">
    <option value="cq">Size container queries</option>
    <option value="sq">Style container queries</option>
    <option value="has">:has() selector</option>
  </optgroup>
</select>

:user-valid 和 :user-invalid

今年所有瀏覽器均穩(wěn)定支持 :user-valid 和 :user-invalid 偽類，它們的行為類似于 :valid 和 :invalid 偽類，但只有在用戶與輸入進(jìn)行了重要交互之后，才匹配表單控件。即使用戶尚未開始與頁面進(jìn)行交互，必填但是空的表單控件將匹配 :invalid。只有當(dāng)用戶更改輸入并將其保留在無效狀態(tài)時(shí)，該控件才會(huì)匹配 :user-invalid。

有了這些新的選擇器，就不再需要編寫有狀態(tài)的代碼來跟蹤用戶已更改的輸入。

input:user-valid,
select:user-valid,
textarea:user-valid {
  --state-color: green;
  --bg: linear-gradient(45deg in oklch, lime, #02c3ff);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  --state-color: red;
  --bg: linear-gradient(15deg in oklch, #ea00ff, #ffb472);
}

瀏覽器支持：

獨(dú)占式手風(fēng)琴

Web上常見的UI模式之一是手風(fēng)琴組件。要實(shí)現(xiàn)此模式，通常需要將幾個(gè)<details>元素組合在一起，通過視覺分組來表明它們之間的聯(lián)系。

在 Chrome 120 中，引入了一項(xiàng)新功能，即在<details>元素上支持name屬性。使用這個(gè)屬性時(shí)，具有相同名稱值的多個(gè)<details>元素會(huì)形成一個(gè)語義組合。該組合中最多只能打開一個(gè)元素：當(dāng)打開該組合中的一個(gè)**<details>**元素時(shí)，之前打開的一個(gè)將自動(dòng)關(guān)閉，這種手風(fēng)琴稱為獨(dú)占式手風(fēng)琴。

<details name="my-accordion">
  <summary>Summary 1</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>

<details name="my-accordion" open>
  <summary>Summary 2</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>

<details name="my-accordion">
  <summary>Summary 3</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>

作為獨(dú)占式手風(fēng)琴的一部分的<details>元素不一定需要是兄弟元素，它們可以散布在文檔任意位置。