发布时间:2024 年 1 月 15 日
除非另有说明,否则以下变更适用于适用于 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版渠道版本。如需详细了解此处列出的功能,请点击所提供的链接或访问 ChromeStatus.com 上的列表。自 2024 年 1 月 15 日起,Chrome 133 进入 Beta 版阶段。您可以在桌面版 Google.com 或 Android 版 Google Play 商店下载最新版本。
CSS 和界面
此版本新增了 7 项 CSS 和界面功能。
CSS 高级 attr()
函数
实现了 CSS 级别 5 中指定的对 attr()
的增强,除了对伪元素 content
的现有支持之外,还允许使用 <string>
以外的类型并在所有 CSS 属性中使用。
如需了解详情,请参阅 CSS attr()
已升级。
CSS :open
伪类
:open
伪类会在 <dialog>
和 <details>
处于打开状态时与它们匹配,并会在 <select>
和 <input>
处于包含选择器且选择器正在显示的模式时与它们匹配。
CSS 滚动状态容器查询
使用容器查询根据容器的滚动状态为容器的后代设置样式。
查询容器是滚动容器,或者是受滚动容器滚动位置影响的元素。您可以查询以下状态:
stuck
:固定位置的容器会固定在滚动条的某个边缘。snapped
:滚动贴靠对齐的容器目前已水平或垂直贴靠。scrollable
:滚动容器能否在查询的方向滚动。
新的 container-type: scroll-state
支持查询容器。
#sticky {
position: sticky;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
#sticky-child {
font-size: 75%;
}
}
如需了解详情,请参阅 CSS scroll-state()
。
CSS text-box
、text-box-trim
和 text-box-edge
为了实现最佳文本内容平衡,text-box-trim
和 text-box-edge
属性以及 text-box
缩写属性可让您更精细地控制文本的垂直对齐方式。
text-box-trim
属性用于指定要修剪的边(上方或下方),而 text-box-edge
属性用于指定应如何修剪边缘。
借助这些属性,您可以使用字体测量参数精确控制垂直间距。如需了解详情,请参阅 CSS text-box-trim。
popover
属性的 hint
值
Popover API 指定了 popover
属性的两个值(auto
和 manual
)的行为。此特征描述了第三个值 popover=hint
。提示通常与“提示”类型的行为相关联,但行为略有不同。主要区别在于,在打开嵌套的堆叠式弹出式窗口时,hint
是 auto
的子级。因此,您可以在现有 auto
弹出式窗口堆叠保持打开状态时打开不相关的 hint
弹出式窗口。
规范化示例是,<select>
选择器处于打开状态 (popover=auto
),并且显示了悬停触发的提示 (popover=hint
)。该操作不会关闭 <select>
选择器。
改进了弹出式窗口调用程序和锚点定位
添加了一种使用 popover.showPopover({source})
在弹出式窗口之间设置调用方关系的命令式方法。启用调用方关系以创建隐式锚点元素引用。
嵌套在调用方中的弹出式窗口不应重新调用它
在以下示例中,点击按钮会正确激活弹出式窗口,但之后点击弹出式窗口本身不应关闭弹出式窗口。
<button popovertarget=foo>Activate
<div popover id=foo>Clicking me shouldn't close me</div>
</button>
之前之所以会发生这种情况,是因为 popover 点击会气泡到 <button>
并激活调用方,从而关闭 popover。现在,此行为已更改为预期行为。
Web API
Animation.overallProgress
为开发者提供一种便捷且一致的方式,让他们能够了解动画在迭代过程中的进度,而无需考虑时间轴的性质。如果没有 overallProgress
属性,您需要手动计算动画的进度,同时考虑动画的迭代次数以及动画的 currentTime
是总时间的百分比(如滚动驱动型动画)还是绝对时间量(如时间驱动型动画)。
Atomics
对象的 pause()
方法
将 pause()
方法添加到 Atomics
命名空间对象,以提示 CPU 当前代码正在执行自旋锁。
脚本的 CSP 哈希报告
出于安全考虑,复杂的 Web 应用通常需要跟踪其下载的子资源。
特别是,即将推出的业界标准和最佳实践(例如 PCI-DSS v4)要求 Web 应用保留其下载和执行的所有脚本的清单。
此功能基于 CSP 和 Reporting API,用于报告文档加载的所有脚本资源的网址和哈希值(适用于 CORS/同源)。
保留 DOM 状态的移动
添加了 DOM 基元 (Node.prototype.moveBefore
),可让您在 DOM 树中移动元素,而无需重置元素的状态。
移动(而非移除和插入)时,系统会保留以下状态,例如:
<iframe>
元素会保持加载状态。- 活动元素保持聚焦。
- 弹出式窗口、全屏窗口和模态对话框会保持打开状态。
- CSS 过渡和动画会继续。
在 <area>
上公开 attributionsrc
属性
使 <area>
上的 attributionsrc
属性的公开与该属性的现有处理行为保持一致,即使该属性未公开也是如此。
此外,在 <area>
上支持此属性很有意义,因为该元素是一流的导航界面,而 Chrome 已经在 <a>
和 window.open
的其他界面上支持此属性
在元素时间和 LCP 中公开粗略的跨源 renderTime
(无论 Timing-Allow-Origin
如何)
元素时间和 LCP 条目具有 renderTime
属性,与绘制图片或文本的第一个帧对齐。
目前,此属性会通过要求在图片资源上添加 Timing-Allow-Origin
标头来防范跨源图片。不过,此限制很容易规避(例如,在同一框架中显示同源和跨源图片)。
由于这一直是造成混淆的原因,我们计划移除此限制,改为在文档未实现跨源隔离时将所有呈现时间粗略估算为增加 4 毫秒。这似乎足够粗糙,可以避免泄露有关跨源图片的任何有用解码时间信息。
FileSystemObserver
接口
FileSystemObserver
接口会通知网站文件系统的更改。网站会监控用户之前已授予权限的文件和目录在用户的本地设备或存储分区文件系统(也称为来源私有文件系统)中的更改,并会收到更改类型等基本更改信息的通知。
在节能模式下冻结
当“能耗节省器”处于启用状态时,如果“浏览内容组”中的任何同源框架子组的 CPU 使用率超过了阈值,Chrome 会冻结已隐藏且处于静默状态超过 5 分钟的“浏览内容组”,除非:
- 提供音频或视频会议功能(通过识别麦克风、摄像头或屏幕/窗口/标签页截取或具有“打开”RTCDataChannel 或“实时”MediaStreamTrack 的 RTCPeerConnection 进行检测)。
- 控制外部设备(使用 WebUSB、Web Bluetooth、WebHID 或 Web Serial 检测到)。
- 持有 Web 锁或 IndexedDB 连接,该锁会阻止其他连接上的版本更新或事务。
冻结包括暂停执行。它在 Page Lifecycle API 中进行了正式定义。
当“省电模式”处于启用状态时,CPU 使用率阈值将经过校准,以冻结大约 10% 的后台标签页。
多个导入映射
导入映射目前必须在任何 ES 模块之前加载,并且每个文档只能有一个导入映射。这使得它们在实际场景中的使用变得脆弱且可能缓慢:在它们之前加载的任何模块都会破坏整个应用,而在包含许多模块的应用中,它们会成为一个大型阻塞资源,因为需要先加载所有可能模块的整个映射。
此功能可通过一致且确定性的方式合并多个导入映射,从而支持为每份文档创建多个导入映射。
存储空间访问标头
为已验证的嵌入提供另一种选择启用未分区的 Cookie 的方法。这些标头用于指明给定网络请求中是否包含(或是否可以包含)未分区的 Cookie,并允许服务器激活已授予的“存储空间访问权限”。提供激活“storage-access”权限的替代方法,可允许非 iframe 资源使用该权限,并可缩短经过身份验证的嵌入的延迟时间。
支持使用 Promise<DOMString>
创建 ClipboardItem
ClipboardItem
(即异步剪贴板 write()
方法的输入)现在在其构造函数中除了接受 Blob 外,还接受字符串值。ClipboardItemData
可以是 Blob、字符串或解析为 Blob 或字符串的 Promise。
WebAssembly Memory64
memory64 提案增加了对大小大于 2^32 位的线性 WebAssembly 内存的支持。它不提供任何新指令,而是扩展了现有指令,以允许为内存和表使用 64 位索引。
Web Authentication API:PublicKeyCredential getClientCapabilities()
方法
借助 PublicKeyCredential getClientCapabilities()
方法,您可以确定用户的客户端支持哪些 WebAuthn 功能。该方法会返回支持的功能列表,让开发者能够根据客户端的具体功能量身定制身份验证体验和工作流。
WebGPU:1 个组成部分的顶点格式(和 unorm8x4-bgra)
添加了 WebGPU 初始版本中因缺少支持或旧版 macOS(任何浏览器都不支持)而未包含的其他顶点格式。1 个组成部分的顶点格式让应用只请求必要的数据,而以前它们必须为 8 位和 16 位数据类型请求至少两倍的数据。借助 unorm8x4-bgra 格式,您可以更轻松地加载 BGRA 编码的顶点颜色,同时保持相同的着色器。
Web Cryptography API 的 X25519 算法
“X25519”算法提供了使用 [RFC7748] 中指定的 X25519 函数执行密钥协定的工具。在 SubtleCrypto 接口中,可以使用“X25519”算法标识符来访问已实现的操作:generateKey、importKey、exportKey、deriveKey 和 deriveBits。
新的来源试用
在 Chrome 133 中,您可以选择加入以下新的源测试。
选择在节能模式下不冻结屏幕
通过这项“用户选择停用”试用计划,网站可以选择停用 Chrome 133 中推出的“开启能耗节省模式时冻结”行为。
弃用和移除
此版本的 Chrome 引入了下列已废弃和已移除的功能。如需查看计划弃用、当前弃用和之前移除的功能的列表,请访问 ChromeStatus.com。
此版本的 Chrome 弃用了一项功能。
弃用 WebGPU maxInterStageShaderComponents
限制
maxInterStageShaderComponents limit
已因多种因素而被弃用。预计在 Chrome 135 中移除。
- 与
maxInterStageShaderVariables
重复:此限制已经用于类似用途,即控制着着色器阶段之间传递的数据量。 - 细微差异:虽然这两个限制的计算方式略有不同,但这些差异很小,并且可以在
maxInterStageShaderVariables
限制内有效管理。 - 简化:移除
maxInterStageShaderComponents
可简化着色器接口,并降低开发者的复杂性。这样,他们无需管理两个存在细微差异的单独限制,而是可以专注于更恰当命名且更全面的maxInterStageShaderVariables
。
此版本的 Chrome 移除了两项功能。
移除 <link rel=prefetch>
五分钟规则
以前,使用 <link rel=prefetch>
预提取资源时,Chrome 会在五分钟内首次使用时忽略其缓存语义(即 max-age
和 no-cache
),以避免重新提取。现在,Chrome 已移除此特殊情况,并使用正常的 HTTP 缓存语义。
这意味着,Web 开发者需要添加适当的缓存标头(Cache-Control 或 Expires),才能获享 <link rel=prefetch>
带来的好处。
这也会影响非标准 <link rel=prerender>
。
移除了使用初始偏好设置首次运行标签页触发 Chrome 欢迎页
现在,在 initial_preferences
文件的 first_run_tabs
属性中添加 chrome://welcome
将没有任何效果。之所以移除该页面,是因为该页面与在桌面平台上触发的首次运行体验重复。