本頁面由 Cloud Translation API 翻譯而成。

包裝 CSS：2023！

CSS 年度總回顧：2023！

直接前往內容：

太棒了！2023 年是 CSS 大受歡迎的一年！

從 #Interop2023 到 CSS 和 UI 空間中的許多新登陸頁面，這些功能讓開發人員可以實現原本認為無法在網路平台上執行的功能。如今，每個新式瀏覽器都支援容器查詢、子格線、:has() 選取器，以及大量新色彩空間和函式。Chrome 支援僅採用 CSS 的捲動導向動畫，並透過檢視畫面轉場在網頁檢視畫面之間流暢播放動畫。更棒的是，CSS 巢狀結構和範圍樣式等許多新的基本功能，已帶給開發人員更好的體驗。

回顧精彩的一年！為了達成這個目標，我們決定結束今年的里程碑，為瀏覽器開發人員和網路社群貢獻一己之力，共同表彰這一切的努力。

架構基礎

首先，我們來談談核心 CSS 語言和功能的更新。這些功能將奠定良好基礎，協助您撰寫及整理樣式，並為開發人員提供強大功能。

三角函數

瀏覽器支援

資料來源

Chrome 111 新增對三角函式 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支援，讓這些函式可在所有主要引擎中使用。這些函式非常適合用於動畫和版面配置。舉例來說，現在您可以更輕鬆地在圓形上以所選中心為基準排列元素。

三角函式示範

進一步瞭解 CSS 中的三角函式。

複雜的 nth-* 選取作業

瀏覽器支援

使用:nth-child() 擬群組類別選取器，即可根據索引選取 DOM 中的元素。使用 An+B 微語法，您可以精確控制要選取的元素。

根據預設，:nth-*() 擬物會考量所有子項。在 Chrome 111 中，您可以視需要將選取器清單傳遞至 :nth-child() 和 :nth-last-child()。這樣一來，您就能在 An+B 執行操作前，預先篩選子項清單。

在以下示範中，3n+1 邏輯只會套用至小娃娃，因為我們使用 of .small 預先篩除大娃娃。使用下拉式選單動態變更所使用的選取器。

複雜的 nth-* 選取示範

進一步瞭解複雜的 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 現場示範

CSS @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 屬性是 Chrome 110 年初推出的一項 CSS 功能，雖然小巧，但功能強大，可設定初始字母的放置樣式。您可以將字母設為已捨棄或凸起的狀態。這個屬性會接受兩個引數：第一個引數用於指定字母在對應段落中的位置，第二個引數則用於指定字母在段落上方的位置。您甚至可以同時使用這兩種方法，如以下示範所示。

初始字母的螢幕截圖

初始字母示範

變更 ::first-letter 虛擬元素的 initial-letter 值，觀察此情況的位移。

進一步瞭解initial-letter。

text-wrap: balance and pretty

開發人員無法得知標題或段落的最終大小、字型大小，甚至是語言。瀏覽器支援所有必要的變數，才能以美觀的方式處理文字換行。由於瀏覽器「確實」瞭解字型大小、語言和分配區域等所有因素，因此非常適合處理進階且品質優良的文字版面配置。

這時就需要使用兩種新的文字斷行技巧，分別是 balance 和 pretty。balance 值旨在建立和諧的文字區塊，而 pretty 則旨在防止孤行並確保適當的斷字。這兩種工作通常都是手動完成，而且能夠在瀏覽器上運作，並且支援任何翻譯語言，真的太棒了。

文字換行螢幕側錄

文字包覆功能現場示範

在以下示範中，您可以拖曳滑桿，比較 balance 和 pretty 對標題和段落的效果。試著將示範翻譯成其他語言！

進一步瞭解 text-wrap: balance。

顏色

2023 年是網路平台的崛起，有了可啟用動態色彩主題設定的新色彩空間和函式，您就能打造使用者喜愛的鮮豔主題，並讓他們自行調整主題！

HD 色彩空間 (色彩等級 4)

瀏覽器支援

資料來源

瀏覽器支援

資料來源

從硬體到軟體、從 CSS 到閃爍的燈光，電腦必須花費大量心力，才能盡可能呈現與人眼所見的色彩。2023 年，我們將推出更多新色彩、新色彩空間、色彩函式和新功能。

CSS 和色彩現在可執行以下操作： - 檢查使用者的螢幕硬體是否支援廣色域 HDR 色彩。- 檢查使用者的瀏覽器是否支援 Oklch 或 Display P3 等色彩語法。- 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等格式中指定 HDR 色彩。- 使用 HDR 顏色建立漸層。 - 在其他色彩空間內插漸層。- 使用 color-mix() 混合顏色。- 使用相對顏色語法建立顏色變化版本。

顏色 4 螢幕側錄

顏色 4 示範

在以下示範中，您可以拖曳滑桿，比較 `balance` 和 `pretty` 對標題和段落的效果。試著將示範翻譯成其他語言！

進一步瞭解顏色 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 年有所演進。這個突破性的一年，我們推出了全新功能，徹底改變了回應式網頁體驗的建構方式，並引進了以元件為基礎的回應式設計新模型。容器查詢和 :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() 現場示範

CSS :has() 示範：不含/含圖片的資訊卡

由於 :has() 會將相對選取器清單做為其引數，因此您可以選取的項目遠不只父項元素。使用各種 CSS 組合器不僅可上移 DOM 樹狀結構，還能進行側邊選取。舉例來說，li:has(+ li:hover) 會選取目前游標所在 <li> 元素之前的 <li> 元素。

:has() 螢幕側錄

:has() 示範

CSS :has() 示範：座架

進一步瞭解 CSS :has() 選取器。

更新媒體查詢

瀏覽器支援

資料來源

update 媒體查詢可讓您將 UI 調整為裝置的刷新率。這項功能可回報 fast、slow 或 none 的值，與不同裝置的功能有關。

您設計的大多數裝置可能都具有快速的刷新率。這包括電腦和大多數行動裝置。電子書閱讀器和低耗電支付系統等裝置的螢幕刷新率可能較慢。如果裝置無法處理動畫或頻繁更新，那麼可以節省電池用量，或顯示錯誤的更新。

更新螢幕側錄

更新示範

選擇圓形按鈕選項，模擬更新速度值，並查看對鴨子的影響。

進一步瞭解 @media (更新)。

媒體查詢指令碼

瀏覽器支援

資料來源

指令碼媒體查詢可用於檢查是否可使用 JavaScript。這對於漸進式改善來說非常實用。在使用這項媒體查詢之前，偵測 JavaScript 可用性的策略是將 nojs 類別放在 HTML 中，然後使用 JavaScript 將其移除。由於 CSS 現已提供偵測 JavaScript 並進行相應調整的方法，因此可以移除這些指令碼。

請參閱這篇文章，瞭解如何透過 Chrome 開發人員工具，在頁面上啟用及停用 JavaScript 以進行測試。

編寫螢幕側錄指令碼

指令碼示範

以網站上的主題切換為例，由於沒有 JavaScript，因此指令碼媒體查詢可協助讓切換功能與系統偏好設定搭配運作。或者，您也可以考慮使用切換元件。如果 JavaScript 可用，則切換鈕可以透過手勢滑動，而非只切換開啟和關閉。如果可用指令碼，您可以利用許多絕佳機會升級使用者體驗，並在停用指令碼時提供實用的基礎體驗。

進一步瞭解指令碼。

降低資訊透明度媒體查詢

瀏覽器支援

資料來源

非不透明的介面可能會導致頭痛，或造成視覺上的阻礙，造成各種視覺障礙。因此，Windows、macOS 和 iOS 都提供系統偏好設定，可減少或移除 UI 的透明度。prefers-reduced-transparency 的這個媒體查詢與其他偏好設定媒體查詢相容，讓您在發揮創意時也能調整使用者體驗。

減少透明度螢幕側錄

減少透明度示範

在某些情況下，您可以提供其他版面配置，不含重疊其他內容的內容。在其他情況下，您可以調整顏色的不透明度，使其呈現不透明或幾乎不透明的效果。以下網誌文章提供更具啟發性的示範內容，讓您根據使用者的偏好加以調整，如果您想知道這項媒體查詢在哪些時段有價值，不妨參考這些文章。

進一步瞭解 @media (prefers-reduced-transparency)。

互動

互動是數位體驗的基礎，使用者可以取得意見回饋，瞭解使用者點選的內容，以及他們在虛擬空間中的位置。今年推出了許多令人期待的功能，讓您更輕鬆地編寫及實作互動內容，提供順暢的使用者歷程和更精緻的網頁體驗。

查看轉場效果

瀏覽器支援

資料來源

檢視轉場對網頁使用者體驗影響甚鉅。利用 View Transitions API，您可以在單頁應用程式的兩個頁面狀態之間建立視覺轉場效果。這些轉場效果可以是整頁轉場，也可以是頁面上的較小動作，例如在清單中新增或移除新項目。

View Transitions API 的核心是 document.startViewTranstion 函式。傳入可將 DOM 更新為新狀態的函式，API 就會為您處理所有事物。這項功能會先擷取前後的快照，然後在兩者之間進行轉場。您可以使用 CSS 控制要擷取的內容，並視需要自訂這些快照的動畫效果。

VT 螢幕側錄

VT 示範

View Transitions 示範影片

單頁應用程式的 View Transitions API 已在 Chrome 111 中推出。進一步瞭解檢視畫面轉場效果。

線性緩衝函式

瀏覽器支援

請不要被這個函式的名稱誤導。linear() 函式 (不要與 linear關鍵字混淆) 可讓您以簡單的方式建立複雜的加/減速函式，但也會失去部分精確度。

在 linear() 之前為 Chrome 113 推出，在 CSS 中無法產生彈跳或彈簧效果。有了 linear()，您可以將這些淡出效果簡化為一系列點，然後在這些點之間以線性方式內插，以便近似重現這些淡出效果。

包含多個點的彈跳緩和曲線圖表 — 原始的彈跳曲線 (藍色) 已簡化為一組綠色關鍵點。`linear()` 函式會使用這些點，以線性方式在這兩個點之間進行內插。

線性淡出螢幕側錄

線性緩和示範

CSS linear() 示範。

進一步瞭解 linear()。如要建立 linear() 曲線，請使用線性加/減速產生器。

結束捲動

瀏覽器支援

資料來源

許多介面都包含捲動互動，有時介面需要同步處理與目前捲動位置相關的資訊，或根據目前狀態擷取資料。在 scrollend 事件之前，您必須使用不準確的逾時方法，才能在使用者手指仍在螢幕上時觸發事件。使用 scrollend 事件，您就能在適當的時機觸發捲動結束事件，瞭解使用者是否仍在進行手勢操作。

捲動螢幕側錄

捲動示範

瀏覽器必須扮演舉足輕重的角色，因為 JavaScript 無法在捲動過程中追蹤畫面上的手指移動情形，因此無法取得相關資訊。您現在可以刪除不準確的捲動結束嘗試程式碼，並替換為瀏覽器擁有的高精確度事件。

進一步瞭解 scrollend。

捲動驅動動畫

瀏覽器支援

資料來源

捲動驅動動畫是 Chrome 第 115 版推出的令人興奮的功能。您可以使用這些屬性，將現有的 CSS 動畫或使用 Web Animations API 建立的動畫，與捲軸的捲動偏移量配對。當您上下捲動 (或在水平捲軸中左右捲動) 時，連結的動畫會直接前後掃描。

您可以使用 ScrollTimeline 追蹤捲軸的整體進度，如以下示範所示。您捲動至頁面底部時，系統會逐字元顯示文字內容。

賣方定義目標對象 (SDA) 螢幕側錄

SDA 示範

CSS 捲動驅動動畫示範：捲動時間軸

您可以使用 ViewTimeline 追蹤元素在捲動區中移動的情形。這與 IntersectionObserver 追蹤元素的方式相似。在以下示範中，每張圖片都會在進入捲動區域後顯示，直到位於畫面中央為止。

SDA 示範螢幕側錄

SDA 現場示範

CSS 捲動驅動動畫示範：檢視時間軸

由於捲動驅動動畫可搭配 CSS 動畫和 Web Animations API 使用，因此您可以享有這些 API 帶來的所有優點。包括能夠在主執行緒外執行這些動畫。您現在只需加入幾行額外的程式碼，即可透過捲動操作執行主執行緒，並呈現流暢的動畫，這不是很棒嗎？

如要進一步瞭解捲動驅動動畫，請參閱這篇文章，瞭解所有詳細資訊，或是前往 scroll-driven-animations.style，其中包含許多範例。

附加時間軸附件

瀏覽器支援

資料來源

透過 CSS 套用捲動驅動動畫時，用於尋找控制捲動的查詢機制一律會向上瀏覽 DOM 樹狀結構，因此只能捲動上層元素。不過，需要加入動畫的元素通常不是捲軸的子項，而是位於完全不同的子樹中的元素。

如要讓動畫元素找出非祖系的已命名捲動時間軸，請在共用父項上使用 timeline-scope 屬性。如此一來，即可附加使用該名稱的已定義的 scroll-timeline 或 view-timeline，範圍擴大範圍。完成設定後，該共用父項的任何子項都能使用該名稱的時間軸。

在共用父項上使用時間軸範圍，以圖表呈現 DOM 子樹 — 在共用父項上宣告 `timeline-scope` 後，使用 `scroll-timeline` 做為 `animation-timeline` 的元素就能找到在捲軸上宣告的 `scroll-timeline`

操作示範螢幕側錄

現場示範

CSS 捲動驅動動畫示範：延遲時間表附件

進一步瞭解 timeline-scope。

離散屬性動畫

2023 年推出的另一項新功能，是能夠為個別動畫設定動畫效果，例如從 display: none 和到 display: none 的動畫效果。自 Chrome 116 起，您可以在關鍵影格規則中使用 display 和 content-visibility。您也可以在 50% 點，而非 0% 點，轉換任何離散屬性。您可以使用 transition-behavior 屬性搭配 allow-discrete 關鍵字，或在 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> 元素中的內容。

選取「螢幕截圖」

選取「現場示範」

進一步瞭解如何在選取時使用 hr

:使用者有效和無效的虛擬類別

瀏覽器支援

資料來源

:user-valid 和 :user-invalid 今年在所有瀏覽器中都已穩定運作，其行為與 :valid 和 :invalid 擬似類別相似，但只有在使用者與輸入內容進行大量互動後，才會比對表單控制項。即使使用者尚未開始與網頁互動，只要表單控制項為必填且空白，就會與 :invalid 相符。除非使用者變更輸入內容，使其處於無效狀態，否則相同控制項不會比對 :user-invalid。

有了這些新的選取器，您就不需要編寫具狀態的程式碼，追蹤使用者變更的輸入內容。

:user-* 螢幕側錄

:使用者* 現場示範

進一步瞭解如何使用使用者*表單驗證虛擬元素。

獨家配音員

瀏覽器支援

網頁上常見的 UI 模式是摺疊式元件。如要實作這個模式，您可以結合幾個 <details> 元素，並且通常以視覺方式將這些元素分組，以表示它們屬於同一組。

Chrome 120 新增支援 <details> 元素上的 name 屬性。使用這項屬性時，具有相同 name 值的多個 <details> 元素會形成語義群組。群組中最多只能同時開啟一個元素：當您開啟群組中的其中一個 <details> 元素時，先前開啟的元素會自動關閉。這種 Accordion 稱為專屬 Accordion。

獨家 Accordion 示範

專屬指令中的 <details> 元素不一定需要同層級。這些圖片可能散布在文件中。

結語

CSS 在過去幾年內進行瞭如此大的改革，在 2023 年更是如此。如果您是 CSS 新手，或是想複習基礎知識，歡迎參閱我們的免費 CSS 學習課程，以及 web.dev 提供的其他免費課程。

祝您度過愉快的假期，也希望您能盡快將這些出色的新 CSS 和 UI 功能納入您的工作中！

⇾ Chrome UI DevRel 團隊敬上，

Una Kravets

Bramus

Adam Argyle

包裝 CSS：2023！

CSS 年度總回顧：2023！

範圍示範螢幕截圖

Scope 現場示範

巢狀螢幕側錄

巢狀結構現場示範

子格線螢幕側錄

子格線現場示範

字體排版

初始字母的螢幕截圖

初始字母示範

文字換行螢幕側錄

文字包覆功能現場示範

顏色 4 螢幕側錄

顏色 4 示範

color-mix() 螢幕側錄

color-mix() 示範

RCS 螢幕側錄

RCS 現場示範

@container 螢幕側錄

@container 示範

樣式查詢螢幕截圖

樣式查詢示範

:has() 示範螢幕截圖

:has() 現場示範

:has() 螢幕側錄

:has() 示範

更新螢幕側錄

更新示範

編寫螢幕側錄指令碼

指令碼示範

減少透明度螢幕側錄

減少透明度示範

VT 螢幕側錄

VT 示範

線性淡出螢幕側錄

線性緩和示範

捲動螢幕側錄

捲動示範

賣方定義目標對象 (SDA) 螢幕側錄

SDA 示範

SDA 示範螢幕側錄

SDA 現場示範

操作示範螢幕側錄

現場示範

離散動畫螢幕側錄

離散動畫示範

@starting-style 螢幕側錄

@starting-style 示範

重疊螢幕側錄

重疊式現場示範

彈出式視窗螢幕側錄

彈出式視窗現場示範

選取「螢幕截圖」

選取「現場示範」

:user-* 螢幕側錄

:使用者* 現場示範