网站平台将于 3 月推出

探索 2023 年 3 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。

Rachel Andrew

浏览器稳定版

2023 年 3 月，Firefox 111、Chrome 111 和 Safari 16.4 成为稳定版。我们来看看这对网络平台意味着什么。

全局 HTML 属性

Firefox 111 增加了对几个有用的全局 HTML 属性的支持。autocapitalize 属性用于控制用户在使用虚拟键盘输入内容时是否自动大写文本。

浏览器支持

  • 43
  • 79
  • 111
  • x

来源

translate 属性用于指明在网页本地化时是否应翻译某个元素。

浏览器支持

  • 19
  • 79
  • 111
  • 6

来源

源私有文件系统 (OPFS)

在使用 File System Access API 时，Firefox 添加了对源专用文件系统 (OPFS) 的支持。详细了解 OPFS。

View Transitions API

Chrome 111 添加了 View Transitions API，通过拍摄视图快照并允许 DOM 更改且状态之间不会发生重叠，简化了单页应用 (SPA) 中的精美转场效果。

如需了解详情，请参阅发布博文 Chrome 111 中的 SPA 视图过渡功能。

浏览器支持

  • 111
  • 111
  • x
  • x

来源

新的 CSS 颜色空间和函数

Chrome 111 中还包含一组全新的网页色彩使用方式。Chrome 现在支持访问 RGB 色域之外的颜色的颜色空间，以及 color() 和 color-mix() 函数。有关详情，请参阅我们的高清 CSS 颜色指南和有关 color-mix() 的博文。

浏览器支持

  • 111
  • 111
  • 113
  • 16.2

来源

Chrome 版本还包含新的开发者工具，可帮助您使用这项新的颜色功能。

进一步控制 :nth-child() 所选项

Chrome 111 添加了将选择器列表传递到 :nth-child() 和 nth-last-child() 的功能。如需了解详情，并查看示例，请参阅使用 S 语法更好地控制 :nth-child() 选择一文。

浏览器支持

  • 111
  • 111
  • 113
  • 9

在 Media Session API 中支持上一张幻灯片和下一张幻灯片

在 Chrome 111 中，最后是媒体会话 API "previousslide" 和 "nextslide" 的演示幻灯片操作。

浏览器支持

  • 111
  • 111
  • x
  • x

Safari 中的伪类支持

Safari 16.4 是适用于网络平台的卓越版本。本文并未涵盖所有新增内容，因此，请查看 Safari 16.4 版本说明中的完整功能列表。

此版本还支持许多其他 CSS 伪类：:user-invalid、:user-valid、:dir()、:modal 和 :fullscreen。

媒体查询的新范围语法

此 Safari 版本使媒体查询的范围语法更加优雅和实用，在这三个引擎之间实现互操作性。如需查看该语法的示例，请参阅这篇博文（在 Chrome 中推出相应语法时发布）。

浏览器支持

  • 104
  • 104
  • 102
  • 16.4

来源

CSS 属性和值

Safari 16.4 增加了对 @property 的支持，使 CSS 自定义属性可以直接在样式表中注册。如需了解详情，请参阅 @property：为 CSS 变量赋予超能力。

浏览器支持

  • 85
  • 85
  • 16.4

来源

CSS API 支持

随着对 CSS 类型化 OM 的支持，我们将不断为 CSS 添加出色的新增功能。此 API 以类型化 JavaScript 对象（而非字符串）的形式公开 CSS 值。与现有方法相比，通过 JavaScript 使用 CSS 变得更轻松，并且性能更高。

浏览器支持

  • 66
  • 79
  • x
  • 16.4

来源

此外，还支持使用 CSSStyleSheet() 构造的样式表。这可实现在文档及其 shadow DOM 子树之间共享样式表。现在，在此版本的 Safari 中，所有三种引擎均支持可构造的样式表。

浏览器支持

  • 73
  • 79
  • 101
  • 16.4

来源

Web Push 和 Badging API

Safari 现在支持 Web Push 和 Badging API，这对应用开发者来说是个好消息。具体来说，此版本意味着所有主要引擎都支持推送通知。

浏览器支持

  • 42
  • 17
  • 44
  • 16

来源

导入地图

另一个增加了可互操作状态的功能是添加了 JavaScript Import maps，从而简化了 ES 模块的导入。

浏览器支持

  • 89
  • 89
  • 108
  • 16.4

Beta 版浏览器版本

通过 Beta 版浏览器，您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除，这些新功能或内容可能会在全球发布之前对您的网站产生影响。新的 Beta 版产品包括 Firefox 112、Safari 16.5 和 Chrome 112。这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明，以下是一些亮点。

Firefox 112 增加了对 inert 属性的支持，以使此实用属性可用于所有引擎。如需详细了解 inert，请参阅 inert 简介。Firefox 还将启用对 linear() 加/减速功能的支持。

Chrome 112 和 Safari 16.5 均增加了对 CSS 嵌套的支持，这是许多开发者备受期待的功能。

Chrome 112 还支持 animation-composition。如需了解此属性的工作方式，请参阅指定如何使用 Animation-composition 指定多个动画效果的合成方式。

如果您使用 Chrome 的无头模式（例如使用 Puppeteer），那么 112 会带来全新的无头模式。如需了解详情，请参阅 Chrome 的无头模式已升级。

“网络新体验”系列视频的一部分