包裝 CSS：2023！

CSS 包裝標頭

CSS 總結：2023 年！

直接前往內容：

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

從 #Interop2023 到 CSS 和 UI 空間中的許多新到達目的地，讓開發人員在網路平台上看似不可能。現在，每一個新式瀏覽器都支援容器查詢、子格線、:has() 選取器，以及各式各樣的新的色域和函式。Chrome 支援僅支援 CSS 的捲動式動畫，並透過畫面轉場在網頁檢視畫面之間流暢播放動畫。更棒的是，CSS 巢狀結構和範圍樣式等許多新的基本功能，已帶給開發人員更好的體驗。

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

架構基礎

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

三角函式

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：108。
  • Safari：15.4。

資料來源

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

三角函數示範

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

複雜第 N-* 個選項

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：9.

使用 :nth-child() 虛擬類別選取器，就能按照索引選取 DOM 中的元素。使用 An+B 微語法，您可以精確控制要選取的元素。

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

在以下示範中，3n+1 邏輯只能透過 of .small 預先篩選小型玩偶，再套用至小型玩偶。使用下拉式選單，以動態方式變更所用的選取器。

複雜第 N-* 個選項示範

進一步瞭解複雜 n-* 選項。

範圍

瀏覽器支援

  • Chrome：118。
  • Edge：118。
  • Firefox：位於旗幟後方。
  • Safari：17.4。

資料來源

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 示範的螢幕截圖

範圍即時示範

CSS @scope 示範

如要進一步瞭解 @scope，請參閱「如何使用 @scope 限制選取器的觸及率」一文。在本文中，您將瞭解 :scope 選取器、系統如何處理明確性、無先驗範圍，以及排列方式受 @scope 的影響。

巢狀結構

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：117。
  • Safari：17.2。

資料來源

在建立巢狀結構之前，每個選取器都需要明確宣告。這會導致重複、大量使用樣式表，以及零碎編寫體驗。現在，只要相關樣式規則已分組，即可繼續使用選取器。

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 */
}

巢狀螢幕側錄

巢狀現場示範

變更寬鬆的巢狀結構選取器來決定比賽的勝出組合

巢狀可以減少樣式表的權重、減輕重複選取器的負擔，以及集中元件樣式。這種語法最初發布時設有以下限制：在多個位置使用 &，但隨著巢狀寬鬆語法更新已放寬。

進一步瞭解巢狀結構。

子類別

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：71。
  • Safari：16.

資料來源

CSS subgrid 可讓您建立更複雜的格線，並更妥善地對齊子項版面配置。它允許位於其他格狀空間中的格線，透過將 subgrid 做為格線列或欄的值，自表採用外部格線的列和欄。

子格螢幕側錄

Subrid 現場示範

頁首、內文和頁尾會與同級項目的動態大小保持一致。

子網格特別適合用來將同層級與其之間的動態內容對齊。讓文案撰寫人員、使用者體驗撰稿人和譯者不必構思合適的專案文案版面配置。使用子格線時，您可配合內容調整版面配置。

進一步瞭解子類別。

字體排版

2023 年，網頁字體排版出現幾項重大更新。text-wrap 屬性特別適合使用漸進式增強。這個屬性可讓您調整字體排版版面配置，這類調整都是在瀏覽器中編寫，而且不需另外編寫指令碼。再也不怕迷人的線條長度，還有更可預測的字體排版！

初始字母

瀏覽器支援

  • Chrome：110。
  • Edge：110，
  • Firefox：不支援。
  • Safari：9.

資料來源

今年初，Chrome 110 開始採用 initial-letter 屬性，這是一項強大而強大的 CSS 功能，可設定初始字母位置的樣式。您可以將字母設為已捨棄或凸起的狀態。此屬性接受兩個引數：第一個是指定字母在對應段落中的深度，第二個則是表示字母上字母的高度。您甚至可以合併這兩種方法，如下方的示範所示。

初始字母的螢幕截圖

初始字母示範的螢幕截圖

初始字母示範

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

進一步瞭解初始字母。

文字換行：平衡兼顧

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

這就是採用兩種新的文字包裝技術，分別名為 balance 和 pretty。balance 值會試圖建立協調的文字區塊，而 pretty 會尋求預防孤島，並確保連字號良好。這兩種工作通常都是手動完成，而且能夠在瀏覽器上運作，並且支援任何翻譯語言，真的太棒了。

文字自動換行

文字換行即時示範

在以下示範中，您可以拖曳滑桿，以及 balance 和 pretty 對標題和段落的影響。建議你將示範內容翻譯成其他語言！

進一步瞭解文字換行：餘額。

顏色

2023 年是網路平台的崛起，有了新的色彩空間和功能，可以支援動態色彩主題，您就可以輕鬆打造生動活潑、吸睛的主題，或是打造可自訂的主題！

HD 高畫質色彩空間 (顏色等級 4)

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

從硬體到軟體，CSS 和閃爍的燈號；因此，我們的電腦可能需要花費大量功夫，設法讓色彩和人類眼睛一樣恰到好處。我們在 2023 年加入了更多顏色、更多顏色、新的色彩空間、色彩功能及全新功能。

CSS 和顏色現在可以： - 檢查使用者的螢幕硬體是否支援廣角 HDR 色彩。 - 檢查使用者的瀏覽器是否瞭解色彩語法，例如 Oklch 或 Display P3。 - 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等介面中指定 HDR 色彩。 - 使用 HDR 色彩創造漸層效果。 - 在替代色彩空間中插入漸層。 - 使用 color-mix() 混合色彩。 - 使用相對顏色語法建立顏色子類。

顏色 4 螢幕側錄

顏色 4 示範

在以下示範中，您可以拖曳滑桿，以及對標題和段落中的 `balance` 和 `till` 效果。建議你將示範內容翻譯成其他語言！

進一步瞭解顏色 4 和色域。

色混功能

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：16.2。

資料來源

混合顏色是一項經典工作，而在 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() 之後，即可支援根據父項大小，以及任何子項是否存在/狀態，擁有回應式和邏輯樣式的元件。也就是說，您終於可以將頁面層級版面配置與元件層級版面配置分開，並編寫一次邏輯，在所有位置使用元件！

大小容器查詢

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：110。
  • Safari：16.

資料來源

容器查詢不必使用可視區域的全域大小資訊來套用 CSS 樣式，而是支援網頁內父項元素的查詢。這表示，您可以對多個版面配置和多個檢視畫面，以動態方式設定元件的樣式。今年 (2 月 14 日) 在所有新式瀏覽器中，大小容器查詢都變得穩定可靠。

如要使用這項功能，請先為要查詢的元素設定包含範圍，接著使用與媒體查詢類似的方式，使用 @container 搭配「size」參數來套用樣式。連同容器查詢，您可以取得容器查詢大小。在以下示範中，容器查詢大小 cqi (代表內嵌容器的大小) 會用來調整資訊卡標頭的大小。

@container 螢幕側錄

@container 示範

進一步瞭解如何使用容器查詢。

設定容器查詢樣式

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：不支援。
  • Safari：18。

資料來源

在 Chrome 111 中實作部分樣式查詢。您目前可以透過樣式查詢，在使用 @container style() 時查詢父項元素的自訂屬性值。例如，查詢是否有自訂屬性值，或設為特定值，如 @container style(--rain: true)。

樣式查詢螢幕截圖

示範螢幕截圖：設定容器查詢天氣資訊卡樣式

樣式查詢示範

變更顏色及變更場景。每種元素都會使用相對顏色語法，根據基本顏色建立子類。

雖然這聽起來類似於在 CSS 中使用類別名稱，但樣式查詢仍有一些優點。第一種是使用樣式查詢，您可以視需要更新 CSS 中的值，以便因應虛擬狀態。此外，在日後的實作版本中，您將能查詢值範圍以確定套用的樣式，例如 style(60 <= --weather <= 70)，以及根據 style(font-style: italic) 等屬性值組合的樣式。

進一步瞭解如何使用樣式查詢。

:has() 選取器

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：121。
  • Safari：15.4。

資料來源

將近 20 年來，開發人員要求使用「家長選取器」。只要使用 Chrome 105 隨附的 :has() 選取器，即可進行設定。舉例來說，使用 .card:has(img.hero) 會選取含有主頁橫幅做為子項的 .card 元素。

:has() 示範螢幕截圖

:has() 示範的參考螢幕截圖

:has() 現場示範

CSS :has() 示範：沒有圖片的卡片

由於 :has() 接受相對選取器清單做為引數，因此您選取的範圍可以超過父項元素。使用各種 CSS 組合器不僅可上移 DOM 樹狀結構，還能進行側邊選取。舉例來說，li:has(+ li:hover) 會選取位於目前懸停 <li> 元素前方的 <li> 元素。

:has() 螢幕側錄

:has() 示範

CSS :has() 示範：固定

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

更新媒體查詢

瀏覽器支援

  • Chrome：113。
  • Edge：113。
  • Firefox：102。
  • Safari：17。

資料來源

update 媒體查詢可讓您根據裝置的刷新率調整使用者介面。這項功能可以回報 fast、slow 或 none 的值，後者和不同裝置的功能相關。

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

更新螢幕側錄

更新示範

模擬 (選擇無線電選項) 更新速度值，以及 看看這對鴨子有什麼影響

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

編寫媒體查詢指令碼

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：113。
  • Safari：17。

資料來源

您可以透過指令碼媒體查詢，檢查是否可使用 JavaScript。這對漸進式增強效果來說非常好。在此媒體查詢開始前，一項用於偵測 JavaScript 是否可使用 JavaScript 的策略，都是在 HTML 中加入 nojs 類別，並使用 JavaScript 將其移除。這些指令碼現在可以移除，因為 CSS 現在可以偵測 JavaScript 並做出相應調整。

瞭解如何透過 Chrome 開發人員工具在網頁中啟用及停用用於測試的 JavaScript。

編寫螢幕側錄指令碼

指令碼示範

考慮在網站上執行主題切換時，使用指令碼的媒體查詢可以根據系統偏好設定進行切換，因為沒有 JavaScript 可用。或者考慮切換元件，如果可使用 JavaScript，使用者可透過手勢滑動切換元件，不必只是開啟或關閉這項功能。如果指令碼功能可以使用，同時提供有意義的基礎體驗，那麼若指令碼功能已停用，就帶來許多改善使用者體驗的大好機會。

進一步瞭解指令碼。

降低資訊透明度媒體查詢

瀏覽器支援

  • Chrome：118。
  • Edge：118。
  • Firefox：位於旗幟後方。
  • Safari：不支援。

資料來源

非不透明的介面可能會導致頭痛，或造成視覺上的阻礙，造成各種視覺障礙。因此，Windows、macOS 和 iOS 有系統偏好設定，可讓使用者降低或移除使用者介面的透明度。這項「prefers-reduced-transparency」媒體查詢適合搭配其他慣用的媒體查詢，您可以發揮創意，同時針對使用者進行調整。

減少透明螢幕側錄

透明度簡化示範

在某些情況下，您可以提供沒有內容重疊其他內容的替代版面配置。在其他情況下，您可以將色彩的不透明度調整為不透明或幾乎不透明。以下網誌文章提供更具啟發性的示範內容，讓您根據使用者的偏好加以調整，如果您想瞭解這些媒體查詢何時可產生價值，不妨參考這些文章。

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

互動

互動是數位體驗的基礎，使用者可以取得意見回饋，瞭解使用者點選的內容，以及他們在虛擬空間中的位置。今年有許多令人期待的功能到達網頁，使得撰寫和實作互動變得更加容易，進而為使用者提供流暢的體驗，並提供更優異的網路體驗。

查看轉場效果

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：不支援。
  • Safari：18。

資料來源

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

View Transitions API 的核心是 document.startViewTranstion 函式。傳入可將 DOM 更新為新狀態的函式，API 會為您完成所有工作。做法是擷取前後對照快照，然後在兩者間切換。透過 CSS，您可以控制要擷取的內容，並視需要自訂快照的動畫方式。

VT 螢幕側錄

VT 示範

觀看轉場效果示範

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

線性加/減速函式

瀏覽器支援

  • Chrome：113。
  • Edge：113。
  • Firefox：112。
  • Safari：17.2。

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

在 linear() 之前為 Chrome 113 推出，在 CSS 中無法產生彈跳或彈簧效果。有了 linear()，就能把加/減速簡化為一系列的點，然後在這些點之間進行線性內插，藉以達到約略值。

跳出曲線的減速曲線圖表，在曲線中加入多個點
藍色的跳出曲線以綠色顯示的一組關鍵點簡化。linear() 函式會使用這些點，以線性方式在這兩個點之間進行內插。

線性調節螢幕側錄

線性加/減速示範

CSS linear() 示範。

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

捲動結束

瀏覽器支援

  • Chrome：114。
  • Edge：114。
  • Firefox：109。
  • Safari：不支援。

資料來源

許多介面都包括捲動互動，有時介面需要同步處理與目前捲動位置相關的資訊，或根據目前狀態擷取資料。在 scrollend 事件之前，您必須使用不正確的逾時方法，這個方法可能會在使用者的手指仍停留在螢幕上時觸發。scrollend 事件可讓您有一個完美的定時捲動事件，瞭解使用者是否仍在手勢中。

捲動式螢幕側錄

捲動示範

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

進一步瞭解捲動功能。

捲動導向動畫

瀏覽器支援

  • Chrome：115。
  • Edge：115，
  • Firefox：位於旗幟後方。
  • Safari：不支援。

資料來源

捲動式動畫是 Chrome 第 115 版推出的全新功能。這類動畫可讓您使用現有的 CSS 動畫或透過 Web Animations API 建構的動畫，並搭配使用捲軸的捲動位移。當您在水平捲軸上上下捲動，或左右捲動，連結動畫都會向前或向後向後滑動。

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

SDA 螢幕側錄

SDA 示範

CSS 捲動導向動畫示範：捲動時間軸

透過 ViewTimeline，您可以追蹤跨捲動處的元素。這個方式與 IntersectionObserver 追蹤元素的運作方式類似。在以下示範中，每張圖片從進入捲軸的那一刻開始顯示，直到圖片位於中央為止。

SDA 示範螢幕側錄

SDA 現場示範

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

由於捲動式動畫可搭配 CSS 動畫和 Web Animations API 使用，因此您可以充分運用這些 API 帶來的所有優勢。包括能夠在主執行緒外執行這些動畫。您現在只需加入幾行額外程式碼，就能以捲動方式驅動的流暢動畫，並在主要執行緒中執行，這還有什麼好處？

如要進一步瞭解捲動式動畫，請參閱這篇文章包含所有詳細資訊，或造訪含有許多示範的捲動至捲動式動畫.style。

附上延遲時間軸附件

瀏覽器支援

  • Chrome：116。
  • Edge：116。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

透過 CSS 套用捲動導向動畫時，尋找控制項捲軸的查詢機制一律會逐步引導 DOM 樹狀結構，限制其僅限於捲動祖系。然而，需要動畫的元素並非捲軸的子項，而是完全位於不同子樹狀結構中的元素。

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

DOM 子樹狀結構的視覺化呈現，共用父項使用時間軸範圍
在共用父項上宣告 timeline-scope 後，使用捲軸做為 animation-timeline 的元素可以找到捲動器上宣告的 scroll-timeline

示範螢幕側錄

現場示範

CSS 捲動導向動畫示範：延遲時間軸附件

進一步瞭解 timeline-scope。

離散屬性動畫

2023 年的另一項新功能是為獨立動畫加入動畫功能，例如為 display: none 加上動畫效果。在 Chrome 116 中，您可以在主要畫面格規則中使用 display 和 content-visibility。您也可以轉換 50% 點的位置，而不要在 0% 點轉換任何獨立屬性。方法是使用 allow-discrete 關鍵字或在 transition 屬性中，以簡寫在 transition-behavior 屬性中完成此操作。

離散式動畫。螢幕側錄

離散式動畫。示範

進一步瞭解如何轉換獨立動畫。

@starting-style

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：129。
  • Safari：17.5。

資料來源

@starting-style CSS 規則是以新的網路功能為基礎，用於與 display: none 之間的動畫效果。這項規則可讓元素「開啟前」。這對於輸入動畫或元素中的動畫效果來說非常實用，例如彈出式視窗或對話方塊。想要隨時建立元素時，也可以啟用動畫效果。下例使用動畫，將 popover 屬性 (請參閱下一節) 動畫放到檢視畫面中，從可視區域外流暢進入頂層圖層。

@starting-style 螢幕側錄

@starting-style 示範

進一步瞭解 @starting-style 和其他項目動畫。

重疊元素

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

您可以在轉場效果中加入新的 CSS overlay 屬性，讓採用頂層樣式的元素 (例如 popover 和 dialog) 順暢地為頂層圖層加上動畫效果。如未轉換重疊元素，元素會立即回到裁剪、轉換及遮蓋的狀態，因此你也不會看到轉場效果。同樣地，overlay 可讓 ::backdrop在頂層元素中加入動畫效果流暢的動畫效果。

重疊螢幕側錄

重疊即時示範

進一步瞭解重疊和其他離開動畫。

元件

2023 年是樣式和 HTML 元件交集的重要一年，除了 popover 到達網頁，也有許多人針對錨點位置和樣式下拉式選單推出許多工作。這些元件可讓您更輕鬆地建構常用的 UI 模式，無需依賴額外的程式庫或每次都從頭開始建構自己的狀態管理系統。

彈出式視窗

瀏覽器支援

  • Chrome：114。
  • Edge：114。
  • Firefox：125。
  • Safari：17。

資料來源

Popover API 可協助您建立元素，這些元素會疊放在網頁的其他部分。包括選單、選項和工具提示。如要建立簡易彈出式視窗，您可以在彈出的元素中加入 popover 屬性和 id，然後使用 popovertarget="my-popover" 將其 id 屬性連結至叫用按鈕。Popover API 支援：

  • 升級為頂層圖層。彈出式視窗會顯示在網頁其他部分上方的獨立圖層上，讓您無須再玩一次 Z-index。
  • 光源關閉功能。點擊彈出式視窗區域以外的地方，會關閉彈出式視窗並返回焦點。
  • 預設的焦點管理：開啟彈出式視窗後，系統會停止在彈出式視窗中顯示下一個分頁。
  • 無障礙鍵盤繫結。按 esc 鍵或雙鍵切換鈕會關閉彈出式視窗並返回焦點。
  • 無障礙元件繫結。以語意方式將彈出式視窗元素連結至彈出式視窗觸發條件。

彈出式視窗螢幕側錄

彈出式視窗即時示範

選取範圍中的水平規則

今年，我們在 Chrome 和 Safari 中對 HTML 做出一項小幅調整，那就是你可以在 <select> 元素中加入水平規則元素 (<hr> 標記)，藉此將內容分門別類。過去，將 <hr> 標記放在選取項目中並不會顯示，不過今年，Safari 和 Chrome 都支援這項功能，方便使用者進一步區隔 <select> 元素中的內容。

選取螢幕截圖

以淺色和深色主題選取 Chrome 的小時螢幕截圖

選取現場示範

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

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

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：88。
  • Safari：16.5。

資料來源

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

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

:使用者* 螢幕側錄

:使用者* 現場示範

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

獨家配音員

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：130。
  • Safari：17.2。

網路上的常見的 UI 模式是摺疊元件。如要實作這個模式，請結合多個 <details> 元素 (通常以視覺化方式將元素分組)，以便呈現這些元素屬於同一群組。

Chrome 120 的新功能支援使用 <details> 元素的 name 屬性。使用這項屬性時，多個具有相同 name 值的 <details> 元素就會形成語意群組。群組最多只能同時開啟一個元素：當您從群組中開啟其中一個 <details> 元素時，先前開啟的元素會自動關閉。這類手術稱為「獨家配方」。

專屬摺疊式裝置示範

專屬指令中的 <details> 元素不一定需要同層級。也可以散佈在文件中。

結語

CSS 在過去幾年內進行瞭如此大的改革，在 2023 年更是如此。如果您是 CSS 新手，或只是想複習基本概念，請參考我們免費提供的「學習 CSS」課程及 web.dev 提供的其他免費課程。

祝一切順心！

⇾ Chrome UI 開發人員團隊，

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub