MDN 文件更新：CSS 選擇器和媒體查詢、WebGPU 和 WebTransport API、漸進式 Web 應用

大家好！隨著各大瀏覽器在開放 Web 技術方面不斷取得飛躍式進展，MDN 團隊與我們的合作伙伴 Open Web Docs 以及貢獻者們，一直在不懈努力，以確保我們的文件對大家來說始終是最新的。

我們很高興地宣佈，MDN 文件有幾項值得關注的更新。本文將重點介紹其中一些重要的新增內容和更新。

CSS `of <selector>` 語法

為了給您提供更多選擇，兩個 CSS 偽類新增了一項功能！它就是新的 of <selector> 語法，可以與 :nth-child() 和 :nth-last-child() 偽類一起使用。

到目前為止，在使用這些偽類時，您可以根據元素在組中的位置來選擇同級元素，例如透過指定 even、odd，或透過指定 An+B 記法。of <selector> 語法可以幫助您進一步縮小元素選擇範圍，然後根據元素的 even、odd 或 An+B 位置來定位元素。目前該語法在 Firefox 和 Safari 中得到支援。以下是使用此新語法的一些預覽：

css

/* using An+B notation in a 10-item list */
li:nth-child(-n + 3) {
  /* styles to apply to the first three list items */
}

/* using An+B notation with `of <selector>` in a 10-item list */
/* assuming 2nd and 5th list items have the class `important` */
li:nth-child(-n + 3 of .important) {
  /* styles to apply to the 2nd and 5th list items */
}

Dave Letorey 為 :nth-child() 和 :nth-last-child() 偽類記錄了此新語法，並添加了一些很酷的示例，演示如何將 of <selector> 與 :nth-child() 和 :nth-last-child() 結合使用，它與 selector :nth-child() 有何不同，以及如何將其用於斑馬條紋表格。

CSS `content` 屬性的 `<image>` 值

對於可以在 content 屬性中指定的 <image> 值，現在瀏覽器更廣泛地支援指定 image-set() 和 <gradient>。

檢視 Dave 新增的新示例，演示如何使用 <image> 資料型別透過 url()、<gradient> 和 image-set() 替換元素的 content。

CSS `:lang()` 偽類中的字串匹配

在 Firefox 中，:lang() 偽類現在可以使用字串匹配語義（包括 * 萬用字元）來匹配語言程式碼，而不是字首匹配語義。此外，現在支援逗號分隔的語言列表，用於匹配多種語言。這難道不棒嗎？

css

/* Matches nl and de */
:lang("nl", "de") {
  color: green;
}

Brian Smith 更新了 :lang() 頁面，包含了所有新的引數詳情，他還添加了一些有趣的示例。

CSS 媒體特性

實驗性的新 CSS 媒體特性 prefers-reduced-transparency 允許您檢測使用者是否在其裝置上啟用了以最小化透明或半透明層效果的設定。此特性目前僅在 Firefox 中可用。感謝 CanadaHonk 為我們添加了這個新的參考頁面。

這是該特性外觀的快速預覽：

css

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Dipika Bhattacharya 更新了 scripting 媒體特性，以反映該特性現已在 Firefox 中完全支援。然而，由於它只在一個瀏覽器中得到支援，因此該特性在很大程度上仍處於實驗階段。您可以使用此媒體查詢根據指令碼（例如 JavaScript）是否可用、僅在初始頁面載入期間可用，或完全不可用，來為您的 CSS 設定樣式。

同樣，另一個媒體特性 inverted-colors 也已新增到 Firefox 中；然而，這個功能是隱藏在標誌（layout.css.inverted-colors.enabled）後面的。您可以使用 inverted-colors 媒體查詢來檢測您的使用者代理或作業系統是否反轉了所有顏色。

CSS `offset-path` 屬性的 `ray()` 值

作為 offset-path 屬性值可以指定的 ray() 函式的語法已在規範中更新。<ray-size> 現在是可選的，並且 <ray-size> 的預設值為 closest-side。

css

ray() = ray( <angle> && <ray-size>? && contain? )
<ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides

Dipika 為 ray() 函式添加了一個新的參考頁面來記錄所有引數詳情。檢視示例，瞭解如何在 offset-path 中使用此函式值來沿著射線路徑為元素設定動畫。ray() 函式的支援在各種瀏覽器中仍處於隱藏狀態。新語法尚未在所有瀏覽器中採用。

好訊息！Firefox 現在還支援在專用和共享 worker 中對 ECMAScript 模組進行靜態（import）和動態（import()）載入。此外，Firefox 還增加了對 service workers 和 worklets 中靜態匯入的支援——此支援目前僅在 Firefox 中可用。您不能在 service workers 和 worklets 中使用動態匯入，因為這會受到規範的禁止。

Hamish Willee 確保更新了受影響的文件。

WebGPU API

得益於 Chris Mills，MDN 上現已提供 WebGPU API 的文件。該 API 透過使用裝置的圖形處理單元 (GPU) 來支援計算和圖形渲染。瞭解不同的介面，包括表示管道以及處理錯誤和查詢的介面。

這是一項仍處於實驗階段的技術，因此在使用前請檢查瀏覽器相容性。

WebTransport API

WebTransport_API 規範最近經過了更新。 Hamish 更新了所有相關文件，以便您可以瞭解這些特性。有新的建構函式選項——allowPooling、requireUnreliable 和 congestionControl。還有幾個新屬性——reliability、draining 和 congestionControl。這些目前僅在 Firefox 中可用。

Compression Streams API

Compression Streams API 提供的介面用於使用 gzip 和 deflate 格式壓縮和解壓資料。 Firefox 現在也支援此 API。

Brian 為 CompressionStream 和 DecompressionStream 物件中使用的壓縮方法——gzip、deflate、deflate-raw——添加了描述。

WebRTC API

Firefox 終於增加了對許多 WebRTC 方法、屬性和字典的支援：RTCRtpSender.getCapabilities()、RTCRtpReceiver.getCapabilities()、RTCRtpSender.setStreams()、RTCSctpTransport、RTCPeerConnection.sctp、RTCPeerConnection.connectionState、RTCPeerConnectionStats 和 RTCAudioSourceStats。這些文件已由 Hamish 進行了整理。

WebRTC 統計 API 近年來取得了顯著的進步。文件和相容性資訊已嚴重過時。作為上述工作的一部分，Hamish 和 Vinyl Da.i'gyu-Kazotetsu 還更新了所有與統計相關的介面和字典的瀏覽器相容性資訊。這是我們記錄反映 Web 功能瀏覽器相容性的字典的持續工作的一部分。如果您有興趣，可以在 RTCStatsReport 統計型別表中跟蹤他們的進度。