Chrome 74 中的新功能

Pete LePage

在 Chrome 74 中，我们添加了对以下内容的支持：

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 74 中面向开发者的新功能！

更新日志

本文仅介绍了一些主要亮点，如需了解 Chrome 74 中的其他变更，请访问以下链接。

私有类字段

类字段可简化类语法，因为您无需仅为了定义实例属性而使用构造函数。在 Chrome 72 中，我们添加了对公共类字段的支持。

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

我说过，私有类字段正在开发中。很高兴地通知您，私有类字段已在 Chrome 74 中推出。新的私有字段语法与公共字段类似，只不过您需要使用 #（井号）将字段标记为私有。将 # 视为字段名称的一部分。

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

请注意，private 字段就是私有字段。它们在类内可用，但在类正文之外不可用。

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

如需详细了解公共类和私有类，请参阅 Mathias 关于类字段的文章。

prefers-reduced-motion

部分用户报告在查看视差滚动、缩放和其他动画效果时会感到头晕。为解决此问题，许多操作系统都提供了一个选项，可尽可能减少动作。

Chrome 现在提供媒体查询 prefers-reduced-motion（属于媒体查询第 5 级规范），可让您检测何时开启此选项。


@media (prefers-reduced-motion: reduce)

假设我有一个注册按钮，它会通过轻微的动作吸引用户的注意力。借助新查询，我可以仅为按钮关闭动作感应。

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

请参阅 Tom 撰写的文章 Move Ya! 或者，如果用户选择了“减少动画”，则不执行此操作！了解详情。

CSS transition 事件

CSS 转换规范要求在转换加入队列、开始、结束或取消时发送转换事件。其他浏览器已经支持这些事件一段时间了…

但直到现在，Chrome 都不支持这些功能。在 Chrome 74 中，您现在可以监听以下事件：

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

通过监听这些事件，您可以跟踪或更改运行转换时的行为。

Feature Policy API 更新

借助功能政策，您可以有选择地启用、停用和修改 API 和其他 Web 功能的行为。这可以通过 Feature-Policy 标头或 iframe 上的 allow 属性来实现。

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 引入了一组新的 API，用于检查启用了哪些功能：

  • 您可以获取 document.featurePolicy.allowedFeatures() 允许使用的功能列表。
  • 您可以使用 document.featurePolicy.allowsFeature(...) 检查是否允许使用特定功能。
  • 此外，您还可以使用 document.featurePolicy.getAllowlistForFeature() 获取当前网页上允许使用指定功能的网域列表。

如需了解详情，请参阅“功能政策简介”博文。

等等！

当然，这只是 Chrome 74 中面向开发者的部分变更，还有许多其他变更。我个人非常期待 KV Storage，这是一种超快的异步键值对存储服务，目前可作为源代码试用版提供。

Google I/O 大会即将开幕！

别忘了，Google I/O 大会（5 月 7 日至 9 日）即将开幕，届时我们将为您带来许多精彩的新内容。如果您无法参会，我们会对所有会议进行直播，并在之后将其发布到 Chrome Developers YouTube 频道。

订阅

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 75 发布后，我会立即为您介绍 Chrome 中的新变化！