New to the web platform in March

Web 平台 3 月新功能

Global HTML attributes

Firefox 111 添加了对一些有用的全局 HTML 属性的支持.autocapitalize属性控制用户在虚拟键盘上输入时是否可以自动大写文本.

Chrome	Firefox	Edge	Safari
43	111	79	❌

translate属性指示在本地化页面时是否应翻译元素.

Chrome	Firefox	Edge	Safari
19	111	79	6

Origin Private File System (OPFS)

Firefox 在使用文件系统访问 API 时添加了对Origin Private File System (OPFS)的支持.了解更多关于 OPFS 的信息.

The View Transitions API

Chrome 111 添加了View Transitions API,通过快照视图并允许 DOM 在状态之间没有任何重叠的情况下更改,使得在单页应用程序(SPA)中创建精美的过渡更加简单.

在 Chrome 111 中,了解更多关于 SPA 视图转换的信息.

Chrome	Firefox	Edge	Safari
111	❌	111	❌

New CSS color spaces and functions

Chrome 111 还包括一整套新的在 Web 上使用颜色的方法.Chrome 现在支持访问 RGB 色域之外的颜色的颜色空间,以及color()和color-mix()函数.在我们的高清 CSS 颜色指南和关于color-mix()的博客文章中了解更多信息.

Chrome	Firefox	Edge	Safari
111	113	111	16.2

Chrome 版本还包括新的 DevTools,以帮助您使用这种新的颜色功能.

您还可以在 Firefox 111 中测试新的颜色函数color(),lab(),lch(),oklab()和oklch(),目前在首选项layout.css.more_color_4.enabled后面.

More control over :nth-child() selections

Chrome 111 添加了将选择器列表传递到:nth-child()和nth-last-child()的功能.在带有 S 语法的更多控制的:nth-child()选择中了解更多信息和示例.

Chrome	Firefox	Edge	Safari
111	113	111	9

Support for previous and next slide in the Media Session API

最后在 Chrome 111 的这个列表中添加的是媒体会话API 的演示幻灯片操作——"previousslide"和"nextslide".

Chrome	Firefox	Edge	Safari
111	❌	111	❌

Pseudo-class support in Safari

Safari 16.4 是一个令人惊叹的 Web 平台版本.本文不会涵盖所有的添加,所以请查看Safari 16.4 发布说明中的所有功能列表.

在这个版本中,有一堆额外的 CSS 伪类::user-invalid,:user-valid,:dir(),:modal和:fullscreen.

New range syntax for media queries

这个 Safari 版本使得媒体查询的范围语法在所有三个引擎中都更加优雅和有用.在这篇文章中,我们将在 Chrome 中发布这个语法的时候看到这个语法的例子.

Chrome	Firefox	Edge	Safari
104	102	104	16.4

CSS Properties and Values

Safari 16.4 添加了对@property的支持,使得可以在样式表中直接注册 CSS 自定义属性.在@property:给 CSS 变量赋予超能力中了解更多信息.

Chrome	Firefox	Edge	Safari
85	❌	85	16.4

CSS API support

CSS 的伟大补充不断涌现,支持CSS Typed OM.这个 API 将 CSS 值暴露为类型化的 JavaScript 对象,而不是字符串.它使得从 JavaScript 中使用 CSS 更容易,并且比现有的方法更有效.

Chrome	Firefox	Edge	Safari
66	❌	79	16.4

还有对CSSStyleSheet()的支持.这使得样式表可以在文档和其阴影 DOM 子树之间共享.在这个版本的 Safari 中,构造样式表现在所有三个引擎中都得到了支持.

Chrome	Firefox	Edge	Safari
73	101	79	16.4

Web Push and the Badging API

Safari 现在支持 Web Push,以及Badging API,这对应用程序开发人员来说是一个好消息.特别是,这个版本意味着所有主要引擎都支持推送通知.

Chrome	Firefox	Edge	Safari
42	44	17	16

Import maps

另一个增加的功能是 JavaScript Import maps,使得导入 ES 模块变得更加容易.

Chrome	Firefox	Edge	Safari
89	108	89	16.4