新增了 CSS 视口单元、Federated Credential Management API、可变 COLRv1 字体等。
除非另有说明,否则下文所述的更改均适用于最新 Chrome Beta 版(Android、ChromeOS、Linux、macOS 和 Windows)。如要详细了解此处列出的功能,请通过所提供的链接或 ChromeStatus.com 上的列表进行查看。Chrome 108 为 Beta 版,自 2022 年 10 月 27 日起即为 Beta 版。您可以访问 Google.com(桌面版)或 Google Play 商店(Android 版)下载最新版本。
CSS
Chrome 108 包含多项新的 CSS 功能。
针对已替换元素的 CSS Overflow
Chrome 将开始推出一项变更,让开发者可以使用现有的 overflow
属性,替换掉绘制在内容框以外的元素。与 object-view-box
搭配使用,可用于创建应用了自定义光晕或阴影的图片,并具有类似 CSS 阴影的适当墨水溢出行为。
这是一项潜在的破坏性更改,如需了解详情,请参阅对被替换元素溢出的更改。
“小”、“大”、“动态”和“逻辑”视口单位
这增加了对小型(svw
、svh
、svi
、svb
、svmin
、svmax
)、大型(lvw
、lvh
、lvi
、lvb
、lvmin
、lvmax
)、动态(dvw
、dvh
、dvi
、dvb
、dvmin
、dvmax
)和逻辑单位 (vi
) 的支持。vb
CSS break-after
、break-before
和 break-inside
支持
支持在输出时使用 CSS 碎片化属性 break-before
、break-after
和 break-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 (MSE) API 使用,以改进缓冲媒体的性能,以供主窗口上下文中的 HTMLMediaElement 播放。通过在 OptionalWorker 上下文上创建 MediaSource 对象,应用可以从中获取 MediaSourceHandle,并将该句柄传输到主线程,以便附加到 HTMLMediaElement。然后,创建 MediaSource 对象的上下文可能会用它来缓冲媒体。
Sec-CH-Prefers-Reduced-Motion
用户偏好设置媒体功能客户端提示标题
用户偏好设置媒体功能客户端提示标头定义了一组关于用户偏好设置媒体功能(由媒体查询级别 5 定义)的 HTTP 客户端提示标头。如果用作关键客户端提示,则这些标头可让服务器做出有关 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 的库的性能。
这是一项潜在的破坏性更改,如需了解详情,请参阅重大更改:AccessHandle 的同步方法。
WebAuthn 条件界面
Windows 22H2 或更高版本、macOS 以及 Android P 或更高版本均支持 WebAuthn 的条件界面。桌面平台上的 WebAuthn 界面也进行了更新。
可变 COLRv1 字体和字体功能检测
COLRv1 可变字体支持
COLRv1 彩色矢量字体从 Chrome 98 开始便已受支持,但此初始版本仅支持 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
构造时,不需要用户手势,也不会显示任何界面。您可以通过 chrome://flags/#clear-identity-in-can-make-payment
启用开发者试用,以便从“canmakepayment”事件中移除身份字段。启用此标志会将“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.defaultStatus
和 window.defaultstatus
这些 API 是非标准 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()
所取代。Disce() 方法与 transitionwhile() 的行为几乎完全相同,但前者不使用强制性的 Promise 参数,后者接受返回 Promise 的可选处理程序函数。这样,浏览器就可以控制处理程序的执行时间,这比 transitionWhile()
更晚且更直观。
移除 WebRTC mediaConstraint 的 googIPv6
"googIPv6: false"
可用于在 WebRTC 中停用 IPv6 支持,如以下示例所示。
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 已经默认启用多年,我们应该不能停用它。这是规范中不存在的旧版 API。