包裝 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 值,觀察此情況的位移。

進一步瞭解初始字母

文字換行:平衡兼顧

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

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

文字自動換行

文字換行即時示範

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

進一步瞭解文字換行:餘額

顏色

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 媒體查詢可讓您根據裝置的刷新率調整使用者介面。這項功能可以回報 fastslownone 的值,後者和不同裝置的功能相關。

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

更新螢幕側錄

更新示範

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

進一步瞭解 @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-timelineview-timeline,範圍擴大範圍。完成之後,該上層發布商的任何子項都能使用該名稱的時間軸。

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

示範螢幕側錄

現場示範

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

進一步瞭解 timeline-scope

離散屬性動畫

2023 年的另一項新功能是為獨立動畫加入動畫功能,例如為 display: none 加上動畫效果。在 Chrome 116 中,您可以在主要畫面格規則中使用 displaycontent-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 屬性,讓採用頂層樣式的元素 (例如 popoverdialog) 順暢地為頂層圖層加上動畫效果。如未轉換重疊元素,元素會立即回到裁剪、轉換及遮蓋的狀態,因此你也不會看到轉場效果。同樣地,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 開發人員團隊,