Chrome 108 中的新功能

以下是您有必要知道的信息:

  • 使用新的视口大小单位,更轻松地创建自适应界面。
  • 彩色矢量字体现在支持可变字体
  • FileSystemSyncAccessHandle 接口中的方法(File System Access API 的一部分)现在是同步的。
  • 此外,还有更多

我是 Adriana Jara。我们来深入了解一下 Chrome 108 会为开发者带来哪些新变化。

新的视口尺寸单位

新的视口单元可让您在创建自适应界面时拥有更大的控制权。

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

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

另一方面,small 单元提供视口大小(假设界面处于展开状态)。

而对于 dynamic 单位,视口尺寸会根据浏览器界面元素的显示或未显示而自动调整。

该值可为大单位(最大值)和小单位(最小值)的限制范围内的任何值。

每种视口单元对应的视口的不同部分。

请参阅这篇文章了解详情。另外,请查看 Android 视口大小调整行为方面的变更,以便适当地处理视口。

COLRv1 现在支持可变字体。

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

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

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

有了这些条件,开发者可以检测字体功能何时可用,从而为用户提供最新体验,并在相应支持不可用时创建回退机制。

欢迎点击此处的演示,使用可变字体增强文字的影响力。

FileSystemSyncAccessHandle 方法现在是同步方法。

源私有文件系统支持访问一种经过高度优化的特殊文件,开发者可以通过调用 createSyncAccessHandle()(在 FileSystemFileHandle 对象上公开的方法)访问此类文件。

此调用会导致 FileSystemSyncAccessHandle

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

进行此项更改是有充分理由的,它使 FileSystemSyncAccessHandle 符合基于 POSIX 的应用所期望的同步、类似于 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