Chrome 108 中的新功能

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

  • 使用新的视口大小单位可以更轻松地创建自适应界面。
  • 彩色矢量字体现在支持可变字体
  • 接口 FileSystemSyncAccessHandle(属于 File System Access API)中的方法现在是同步的。
  • 还有许多其他功能

我是 Adriana Jara。下面,我们来详细了解一下 Chrome 108 中面向开发者的新功能。

新的视口大小单位

借助新的视口单位,您可以更好地控制创建自适应界面。

这些单位会以不同的方式衡量视口区域,因为它们会考虑浏览器中可展开或收起的界面元素。例如,地址栏。

large 单位提供视口大小,假设这些用户代理界面处于收起状态。

另一方面,small 单位提供的视口大小假定界面处于展开状态。

使用 dynamic 单位时,视口大小会根据浏览器界面元素是否显示而自动调整。

该值将是介于大单位(最大值)和小单位(最小值)之间的任意值。

每种类型的视口单位的视口的不同部分。

如需了解详情,请参阅这篇文章。此外,请查看 Android 视口大小调整行为的更改,以便妥善处理视口。

COLRv1 现在支持可变字体。

从 Chrome 98 开始,系统支持 COLRv1 彩色矢量字体,但初始版本仅支持 COLRv1 表的静态功能。

不过,COLRv1 规范还包含 OpenType 变体,这意味着允许通过更改变量轴值来更改字体属性。现在支持此类变体。

此版本还包含 CSS @supportsfont-tech()font-format() 条件扩展。

有了这些条件,开发者可以检测字体功能何时可用,以便为用户提供最新体验,并在没有支持的情况下创建回退方案。

点击此处试用演示,使用可变字体为文字增添感染力。

FileSystemSyncAccessHandle 方法现在是同步的。

源专属文件系统提供对一种针对性能进行了高度优化的特殊文件的访问权限,开发者可以通过调用 createSyncAccessHandle()(一种在 FileSystemFileHandle 对象上公开的方法)来访问此类文件。

此调用会导致出现 FileSystemSyncAccessHandle

该访问句柄中的 truncate(newSize)getSize()flush()close() 方法以前是异步的,但从 Chrome 108 开始,它们是同步的。

这种更改是有充分的理由的,它使 FileSystemSyncAccessHandle 与基于 Wasm 的应用所期望的类似 POSIX 的同步文件 API 相匹配;使该 API 更符合人体工程学,同时显著提升性能。

这项更改可能会破坏现有代码,如果您使用的是上述方法,则任何 Promise.then() 用法都会失效。如果您对之前是异步但现在是同步的任何方法的结果串联 then() 调用,则需要更改代码。

// ⛔️ This will break, and you need to restructure your code:
accessHandle.flush().then(/* Follow-up code */);
// ✅ Correct:
accessHandle.flush();
/* Follow-up code */

如需更详细的说明,请参阅这篇文章

等等!

当然,还有许多其他功能。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 108 中的其他变更,请参阅以下链接。

订阅

如需了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。

我是 Adriana Jara,Chrome 109 发布后,我会立即为您介绍 Chrome 中的新变化!