Chrome 108 Beta 版

新增了 CSS 视口单元、Federated Credential Management API、可变 COLRv1 字体等。

除非另有说明,否则下文所述的更改适用于 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 渠道版本。您可以通过提供的链接或 ChromeStatus.com 上的列表详细了解本文所列的功能。Chrome 108 Beta 版自 2022 年 10 月 27 日起推出。您可以在桌面版 Google.com 或 Android 版 Google Play 商店中下载最新版本。

CSS

Chrome 108 包含多项新的 CSS 功能。

替换元素的 CSS 溢出

Chrome 将开始推行一项变更,允许开发者使用现有的 overflow 属性,其中包含可在内容框外绘制的被替换元素。此方法与 object-view-box 搭配使用,可用于创建应用了自定义光晕或阴影的图片,并实现与 CSS 阴影一样的适当墨水溢出行为。

这是一项可能的破坏性更改,如需了解详情,请参阅对被替换元素溢出的更改

小、大、动态和逻辑视口单元

这增加了对小单元(svwsvhsvisvbsvminsvmax)、大单元(lvwlvhlvilvblvminlvmax)、动态单元(dvwdvhdvidvbdvmindvmax)和逻辑单元 (vivb) 的支持。

CSS break-afterbreak-beforebreak-inside 支持

支持在打印时使用 CSS 碎片化属性 break-beforebreak-afterbreak-inside 的避免值。此值会告知浏览器要避免在其应用到的元素之前、之后或内部发生中断。例如,以下 CSS 可以避免图形在分页符处损坏。

figure {
    break-inside: avoid;
}

由于 Chrome 108 增加了对 LayoutNG 打印的支持,因此系统添加了此功能。

上次基准项对齐方式

借助此功能,开发者可以按最后的基线(而不是第一条)对齐 Flex 或网格布局中的项。这是通过以下属性实现的:

  • align-items: last baseline;
  • justify-items: last baseline;
  • align-self: last baseline;
  • justify-self: last baseline;

ContentVisibilityAutoStateChanged 个事件

当元素的呈现状态因使元素与用户相关的任何属性而发生变化时,针对具有 content-visibility: auto 的元素触发的事件。

其应用场景可让开发者更好地控制何时停止或开始呈现,以响应用户代理停止或开始呈现内容可见性子树的情况。例如,开发者可能需要停止用户代理未呈现的子树中的 React 更新。同样,开发者可能需要在用户代理未呈现元素时停止其他任何脚本更新(例如,画布更新)。

Web API

联合凭据管理(原为 WebID)

借助 Federated Credential Management API,用户能够以兼容浏览器隐私保护的方式将用户联合身份登录网站。

工作器中的 Media Source Extensions

允许从 SpecificWorker 上下文使用 Media Source Extensions (MSE) API,以改进缓冲媒体的性能,以便 HTMLMediaElement 在主窗口上下文中播放。通过在 SpecificWorker 上下文中创建 MediaSource 对象,应用可以从中获取 MediaSourceHandle,并将该句柄传送到主线程,以便附加到 HTMLMediaElement。然后,创建 MediaSource 对象的上下文可以使用该对象来缓冲媒体。

Sec-CH-Prefers-Reduced-Motion 用户偏好设置媒体功能客户端提示标头

用户偏好设置媒体功能客户端提示标头围绕用户偏好设置媒体功能定义了一组 HTTP 客户端提示标头(如媒体查询级别 5 所定义)。如果用作关键客户端提示,这些标头可让服务器在 CSS 内嵌等方面做出明智的选择。Sec-CH-Prefers-Reduced-Motion 反映了用户的 prefers-reduced-motion 偏好设置。

WebTransport BYOB 读取器

支持 WebTransport 的 BYOB(自带缓冲区)读取器,以允许读取开发者提供的缓冲区。BYOB 读取器可以最大限度地减少缓冲区副本,并减少内存分配。

权限政策来源中的通配符

权限政策规范定义了一种机制,可让开发者有选择地启用和停用各种浏览器功能和 API。此机制的一项功能仅允许在显式枚举的源(例如 https://foo.com/)上启用相应功能。对于一些 CDN 的设计而言,这种机制不够灵活,因为 CDN 通过可能托管在数百个可能子网域中的一个子网域上分发内容。

因此,此功能在结构类似于 SCHEME://*.HOST:PORT 的权限政策(例如 https://*.foo.com/)中添加了对通配符的支持,在这种情况下,可以通过 SCHEME://HOST:PORT(例如 https://foo.com/)构造有效的源。这要求 HOST 是可注册网域。这意味着 https://*.bar.foo.com/ 可以正常运行,但 https://*.com/ 无法运行(如果您希望允许所有网域使用该功能,则只需委托给 * 即可)。

File System Access API 中 AccessHandle 的同步方法

将 File System Access API 的 FileSystemSyncAccessHandle 中的异步方法 flush()getSize()truncate() 更新为同步方法。 FileSystemSyncAccessHandle 目前混合使用同步和异步方法,这降低了性能和易用性,尤其是对于将 C/C++ 移植到 Wasm 的应用。此更新将使 API 使用保持一致,并提升基于 Wasm 的库的性能。

这是一项潜在的破坏性更改,如需了解详情,请参阅重大更改:AccessHandles 的同步方法

WebAuthn 条件界面

Windows 22H2 或更高版本、macOS 和 Android P 或更高版本均支持为 WebAuthn 启用条件界面。桌面设备平台上的 WebAuthn 界面也已焕然一新。

可变 COLRv1 字体和字体功能检测

COLRv1 可变字体支持

从 Chrome 98 开始便支持 COLRv1 颜色矢量字体,但此初始版本仅支持 COLRv1 表的静态功能。COLRv1 规范定义了与 OpenType 变体的集成,允许通过更改变量轴参数来修改渐变和转换的字体属性。此第二步为 COLRv1 带来了对此类变体的支持。

对 CSS @supports 的 font-tech()font-format() 条件扩展

font-tech()font-format() 与 CSS @supports 结合使用,可检测字体技术和格式支持情况,并逐步增强内容。以下示例测试是否支持 COLRv1 字体

@supports font-tech(color-COLRv1) {

}

@font-face src: 描述符中的 tech() 函数支持

CSS 字体级别 4 提供了其他选择或过滤字体资源的方法。引入了 tech() 函数,该函数允许传入相应字体 blob 正常运行所需的字体技术列表。用户代理会据此选择第一个合适的资源。

Android 上的 Chrome

Android OSK 现在会默认调整视觉视口的大小

Android 屏幕键盘会默认调整视觉视口的大小,而不是初始包含区块。作者可以使用新的 interactive-widget 元视口键选择停用此设置。

源试用

此版本的 Chrome 有两个新的源试用

canmakepayment 事件中的商家身份

canmakepayment Service Worker 事件可让商家了解用户是否在已安装的付款应用中设置了记录卡。它会以静默方式将商家的来源和任意数据从付款应用来源传递给 Service Worker。这种跨域通信在 JavaScript 中构建 PaymentRequest 时发生,不需要用户手势,也不会显示任何界面。针对从“canmakepayment”中移除身份字段的开发者试用事件可通过 chrome://flags/#clear-identity-in-can-make-payment 启用。启用此标记将清空“canmakepayment”中的身份字段事件(以及 Android IS_READY_TO_PAY Intent)。

如需了解详情,请参阅 Payment Handler API 的 CanMakePayment 事件行为更新

往返缓存 NotRestoredReason API

NotRestoredReason API 将通过 PerformanceNavigationTiming API 报告未从框架树结构中的 BFcache 提供页面的原因列表。

网页被 BFcache 屏蔽的原因有很多,例如规范要求的原因和浏览器实现特有的原因。开发者可以使用 pageshow 处理程序持久化参数和 PerformanceNavigationTiming.type(back-forward) 收集其网站上的 BFCache 命中率。借助此 API,网站可以收集关于历史记录导航中未使用 BFCache 的原因的信息,以便网站针对每种原因采取相应措施,使自己的网页与 BFCache 兼容。

弃用和移除

此版本的 Chrome 引入了下列弃用和移除功能。请访问 ChromeStatus.com,查看计划内弃用、当前弃用和先前移除的列表。

弃用

此版本的 Chrome 弃用了一项功能。

弃用并移除 window.defaultStatuswindow.defaultstatus

这些是非标准 API,并非所有浏览器都会实现,并且对浏览器行为没有影响。这会清理这些密钥,并移除潜在的数字“指纹”收集信号。

它们最初用于修改/控制“状态栏”文本。不过,它们对 Chrome 的状态栏没有任何实际影响,也并非标准化属性。Gecko 自 23 版起就不支持这些属性;WebKit 仍支持这些属性。相关的 window.status 属性标准化,但也绝不能对窗口状态栏产生影响

移除

此版本的 Chrome 移除了四项功能。

移除“ImageDecoderInit.premultiplyAlpha

该功能在主要用例中没有可观察到的影响,但可能会以不理想的方式限制实现。有关详细说明,请参阅此问题。WebCodecs 规范编辑者共识,且用量不足(M106 中每次使用计数器的页面加载次数为 0.000000339% - 0.00000687%)。

移除“navigateEvent.restoreScroll()

restoreScroll() 将被 navigateEvent.scroll() 取代。scroll() 的工作原理相同,只是它允许开发者控制非遍历导航的滚动时间(scroll() 在滚动并非恢复时有效,因此名称会随着行为变更而改变)。

移除“navigateEvent.transitionWhile()

由于开发者报告了一些设计缺陷,transitionWhile() 将由 navigateEvent.intercept() 取代。section() 的运行方式与 transitionwhile() 几乎完全相同,但它并非接受强制性的 Promise 参数,而是接受一个会返回 Promise 的可选处理程序函数。这样,浏览器就可以控制处理程序的执行时间,这比 transitionWhile() 更晚且更直观。

移除 WebRTC mediaConstraint 的 googIPv6

"googIPv6: false" 可用于在 WebRTC 中停用 IPv6 支持,如以下示例所示。

new RTCPeerConnection({}, {mandatory:{googIPv6:false}});

IPv6 默认启用多年,现在我们应该无法将其停用。这是本规范中不存在的旧版 API。