本頁面由 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 的支援，這是一個 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

瀏覽器支援

資料來源

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

初始字母螢幕截圖

Initial-letter 示範

變更 ::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` 對標題和段落的效果。試著將示範翻譯成其他語言！

進一步瞭解 Color 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() 現場示範

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

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

:has() 螢幕側錄

:has() 示範

CSS :has() 示範：Dock

進一步瞭解 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 或對話方塊等元素中的動畫非常有用。當您建立元素並想讓元素以動畫方式顯示時，這項功能也相當實用。請參考下列範例，瞭解如何將 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-* 螢幕側錄

:user-* 現場示範

進一步瞭解如何使用 user-* 表單驗證擬造元素。

專屬 Accordion

瀏覽器支援

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

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

專屬摺疊式示範

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

結語

過去幾年，CSS 經歷了復興，特別是在 2023 年。如果您是 CSS 新手，或是想複習基礎知識，歡迎參閱我們的免費 CSS 學習課程，以及 web.dev 提供的其他免費課程。

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

⇾ Chrome UI 開發人員關係團隊敬上

Una Kravets

Bramus

Adam Argyle

包裝 CSS：2023！

CSS 年度總回顧：2023！

範圍示範螢幕截圖

Scope 現場示範

巢狀螢幕側錄

巢狀結構現場示範

子格線螢幕側錄

子格線現場示範

字體排版

初始字母螢幕截圖

Initial-letter 示範

文字換行螢幕側錄

文字包覆功能現場示範

顏色 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-* 螢幕側錄

:user-* 現場示範