Chrome 127 中的新功能

以下是您需要知晓的相关信息:

  • font-size-adjust 可帮助您提高后备字体的易读性。
  • 现在,用户激活数据会在画中画文档及其开启者之间传播
  • 现在,默认情况下滚动容器可在键盘上聚焦。
  • 还有许多其他功能

我是 Adriana Jara。我们来深入了解一下 Chrome 127 中面向开发者的新变化。

CSS font-size-adjust

如果首选字体系列不可用,并且其后备字体的宽高比值存在显著差异,您网站的易读性可能会降低。

下图显示了 Verdana 和 Times 字体之间的差异,尽管文本大小相同。

显示以下内容的文本行:“此文本使用 verdana 字体(14 像素),该字体包含相对大的小写字母”以及“此字体使用 Times 字体(14px),在小尺寸屏幕上很难阅读”

如果您的网站要采用 Times 字体,则会大大难以阅读。

font-size-adjust CSS 属性可帮助您调整后备字体的字体大小,以确保宽高比值(小写字母高度除以字体大小)保持一致,从而确保无论使用何种字体,文字看起来都很相似。

在下图中,使用 font-size-adjust 可保持 Verdana 和 Times 字体之间的易读性。

   font-size-adjust: 0.545;

显示以下内容的文字行:“此文本使用 verdana 字体 (14px),该字体包含相对大的小写字母”“This using Times font (14px)”(此字体在较小的尺寸下难以阅读)和“此文本采用 14px Times 字体调整到与 Verdana 字体相同的纵横比值,因此两种字体对小写字体进行了标准化

随着 Chrome 中 font-size-adjust 的发布,此功能成为 Baseline 新提供。如需了解详情,请参阅 CSS font-size-adjust 现已纳入 Baseline

文档画中画:传播用户激活行为

Document Picture-in-Picture API 现在会在文档画中画窗口及其打开器之间传播用户激活行为。

访问用户手势激活传播演示,了解在检测到用户激活时页面背景颜色的变化。用户手势会在两个上下文中传播,从而更改两个窗口的背景。

这样,文档画中画窗口中的用户激活操作就可以在其打开程序窗口中使用,反之亦然。这项变更使得使用受用户激活控制的 API 更符合人体工程学,因为文档画中画窗口中的事件处理脚本实际上是在打开者的上下文中运行,因此该打开者的上下文需要访问用户手势。

如需了解详情,请参阅适用于任何元素的“画中画”页面,而不仅仅是 <video>

键盘可聚焦滚动容器。

为了让所有用户更方便地访问滚动条和滚动条中的内容,使滚动容器变为可在键盘上聚焦非常重要。

从现在开始,滚动条在默认情况下支持点击聚焦和以编程方式聚焦。在此次变更之前,仅当 tabindex 明确设置为 0 或更大值时,滚动条元素才能聚焦于 Tab 键。

请注意,仅当滚动条没有可聚焦的子项时,才会发生此行为。例如,如果滚动条已包含按钮,则标签页焦点将跳过滚动条,直接聚焦于该按钮。

无障碍功能最佳实践建议所有功能都必须支持键盘使用。默认情况下,键盘可聚焦滚动条可让用户更轻松地使用依序焦点导航来访问滚动条。

如需了解详情,请参阅键盘可聚焦滚动条

等等!

当然还有很多其他功能。

  • 现可在主框架和同源 iframe 中实现并发同文档视图转换。

  • 根据 CSS 内容生成的替代文本现在支持多个参数。

  • DevTools 性能面板现在可捕获 WebSocket 消息事件并在性能跟踪记录中显示这些事件。

阅读完整的版本说明

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 127 中的其他变更。

订阅

要随时掌握最新动态,请订阅 Chrome 开发者 YouTube 频道, ,每当我们发布新视频时,您都会收到电子邮件通知。

亲爱的 Adriana Jara,Chrome 127 一发布,我都会在这里向大家介绍 Chrome 的新变化!