2023年3月份Web平台新增功能
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 |
