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 统计类型表中跟踪他们的进度。