网站平台将于 3 月推出

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

Rachel Andrew

稳定版浏览器

2023 年 3 月，Firefox 111、Chrome 111 和 Safari 16.4 进入稳定状态。我们来看看这对 Web 平台意味着什么。

全局 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，可让您更轻松地在单页应用 (SPA) 中制作美观的转场效果，只需截取视图快照，并允许 DOM 进行更改，同时状态之间没有任何重叠即可。

如需了解详情，请参阅 Chrome 111 中的 SPA 视图过渡功能发布后的“SPA 视图转换”功能。

浏览器支持

  • 111
  • 111
  • x
  • 18

来源

新的 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 是 Web 平台的一个出色版本。本文不会涵盖所有新增内容，因此，请查看 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
  • 128
  • 16.4

来源

CSS API 支持

随着对 CSS 类型化 OM 的支持，我们不断为 CSS 增添更多精彩功能。此 API 将 CSS 值作为类型化 JavaScript 对象（而不是字符串）公开。与现有方法相比，该方法可让您更轻松地通过 JavaScript 使用 CSS，并且性能更高。

浏览器支持

  • 66
  • 79
  • x
  • 16.4

来源

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

浏览器支持

  • 73
  • 79
  • 101
  • 16.4

来源

Web 推送和 Badging API

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

浏览器支持

  • 42
  • 17
  • 44
  • 16

来源

导入地图

另一个为互操作状态引入了一项功能是新增了 JavaScript Import maps，使导入 ES 模块变得更轻松。

浏览器支持

  • 89
  • 89
  • 108
  • 16.4

浏览器测试版

测试版浏览器可让您预览下一个稳定版中所包含的内容。在面向所有用户发布新版本之前，测试可能会对您的网站产生影响的新功能（或内容移除情况），这无疑是一个好时机。新的 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 的无头模式升级中了解详情。

网络新书系列