MDN 文档更新：CSS 选择器和媒体查询、WebGPU 和 WebTransport API、渐进式 Web 应用

两个 CSS 伪类中添加了一项新功能，为您提供更多选项！这是新的 of <selector> 语法，可与 :nth-child() 和 :nth-last-child() 伪类一起使用。

到目前为止，在使用这些伪类时，您可以根据元素在组中的位置选择兄弟元素，例如通过指定 even、odd 或通过指定表示法 An+B。of <selector> 语法允许您进一步缩小元素的选择范围，然后根据其 even、odd 或 An+B 位置定位元素。此语法的支持目前在 Firefox 和 Safari 中可用。以下是您可以使用此新语法的示例

/* 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()，它与选择器 :nth-child() 的区别，以及 如何在带条纹的表格中使用它。

对于可以使用 content 属性指定的 <image> 值，浏览器之间现在有更广泛的支持，还可以指定 image-set() 和 <gradient>。

查看 Dave 添加的新示例，这些示例展示了如何使用 <image> 数据类型替换元素的内容，使用 url()、<gradient> 和 image-set()。

在 Firefox 中，:lang() 伪类现在可以使用字符串匹配语义（包括 * 通配符）来匹配语言代码，而不是前缀匹配语义。此外，现在支持用逗号分隔的语言列表来匹配多种语言。这难道不棒吗？

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

Brian Smith 已使用所有新的参数详细信息更新了 :lang() 页面，他还添加了一些有趣的 示例。

实验性的新 CSS 媒体特性 prefers-reduced-transparency 允许您检测用户是否已在其设备上启用设置以最大程度地减少透明或半透明图层效果的数量。此功能目前仅在 Firefox 中可用。感谢 CanadaHonk 为我们添加了这个新的参考页面。

以下是此功能的快速概览

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

Dipika Bhattacharya 更新了 scripting 媒体特性，以反映它现在在 Firefox 中已完全支持。但是，由于仅在一个浏览器中受支持，因此该功能仍然非常实验性。您可以使用此媒体查询根据脚本（如 JavaScript）在当前文档中是否可用、仅在初始页面加载期间可用或完全不可用，来设置 CSS 样式。

类似地，Firefox 已添加了对另一个媒体特性 inverted-colors 的支持；但是，此特性在后台使用一个标志（layout.css.inverted-colors.enabled）。您可以使用 inverted-colors 媒体查询检测用户代理或操作系统是否已反转所有颜色。

可以作为 offset-path 属性的值指定的 ray() 函数的语法已在规范中更新。<ray-size> 现在是可选的，<ray-size> 的默认值为 closest-side。

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

Dipika 已为 ray() 函数添加了一个新的参考页面，以记录所有参数详细信息。查看示例以了解如何在 offset-path 中使用此函数值来 沿射线路径为元素设置动画。对 ray() 函数的支持在各个浏览器中仍然在后台使用标志。新语法也尚未在所有浏览器中采用。

好消息！Firefox 现在还支持在专用和共享工作线程中静态 (import) 和动态 (import()) 加载 ECMAScript 模块。此外，Firefox 已添加对服务工作线程和工作线程中静态导入的支持 - 此支持目前仅在 Firefox 中可用。您无法在服务工作线程和工作线程中使用动态导入，因为规范禁止这样做。

Hamish Willee 确保已更新受影响的文档。

感谢 Chris Mills，现在可以在 MDN 上获得 WebGPU API 的文档。此 API 通过使用设备的图形处理单元 (GPU) 提供对执行计算和图形渲染的支持。了解不同的 接口，包括用于表示管道以及处理错误和查询的接口。

这仍然是一项实验性技术，因此在使用之前请查看 浏览器兼容性。

WebTransport API 规范最近进行了更新。Hamish 已更新所有相关文档，以便您可以了解这些功能。有 新的构造函数选项 - allowPooling、requireUnreliable 和 congestionControl。还有一些新的属性 - reliability、draining 和 congestionControl。这些目前仅在 Firefox 中可用。

压缩流 API 提供的接口用于使用 gzip 和 deflate 格式压缩和解压缩数据。Firefox 现在也支持此 API。

Brian 已为 CompressionStream 和 DecompressionStream 对象中使用的压缩方法 - gzip、deflate、deflate-raw - 添加了说明。

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

MDN 的各个角落都在进行大量激动人心的工作。您已经可以在网站上看到这些项目的某些部分。

MDN 上正在进行大量改进 渐进式 Web 应用 文档的工作。

虽然项目仍在进行中，但我们已经取得了很大进展，创建了新的操作指南、安装指南和最佳实践指南以及参考页面。感谢Estelle Weyl、Patrick Brosset和Will Bamberg使这些文档重焕生机。您很快就可以访问完整的文档集。

Estelle一直在 MDN 的 CSS 区域的模块着陆页上制作引人入胜的“实际操作”示例。查看其中一些示例，您也会感到高兴 - 动画实战、颜色实战和滤镜效果实战。

添加这些示例是改进 CSS 模块着陆页更大项目的一部分。这个想法是让着陆页在查看 CSS 模块中定义的一组属性时帮助连接所有点。该项目仍在进行中，应该在未来几个月内完成。

我希望这些更新对您有所帮助，并让您深入了解网络上正在发生的事情以及 MDN 员工、我们的合作伙伴和贡献者都在忙些什么。请留意未来几周内发布的更多此类更新（小声说：CSS 嵌套）。

如果您对本文有任何反馈或疑问，请告诉我们。欢迎加入 MDN Web Docs 的Discord 服务器参与讨论，或在 MDN 的GitHub 讨论区留下评论。