Chrome 74 带来的新功能

翻译：疯狂的技术宅 blog.logrocket.com/whats-new-i…

Chrome 74 已经发布了，虽然从用户的角度来看并无什么使人兴奋的东西，可是对开发人员来讲带来了一些好处。新版本附带了新的 Javascript 私有类字段、容许用户减小动画的媒体查询和 Windows 的深色模式等等。

公共类字段，私有类字段

你可能还记得，Chrome 72 在1月份增长了对 Javascript 公共类字段语法的支持。这是一种简化语法的新方法，它容许直接在类定义中定义类字段，且不须要构造函数。

如今在 Chrome 74 中加入私有类字段，它与公有类字段的功能大体相同，可是用 # 来表示它们是私有而不是公共的，固然它们只能在类的内部访问。

先复习一下公共类字段，以下所示：

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

私有类字段添加了 #：

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

不那么快

事实证实，有些人并非那么喜欢现代网站上的华丽动画。实际上视差滚动、缩放和跳跃动做效果会使一些动画出问题，这并很差玩。操做系统已添加了减小这类动做的选项，在 Chrome 74 上你能够经过使用媒体查询，来减小动画中的动做。

这是如何运做的？假设你有一个动画按钮。你可使用 @media (prefers-reduced-motion: reduce)，以下所示：

button {
  animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}
复制代码

如今当有人在 MacOS 或其余操做系统中打开减小动做的选项时，他们将看不到动画。

侦听 CSS 过渡事件

如今能够侦听 CSS 过渡事件，如 transitionrun，transitionstart，transitionend 和 transitioncancel。尽管其余浏览器好久之前就已经支持了，但迟到总比没有好。若是你想要在过渡运行时跟踪或更改行为，那么侦听这些事件会颇有用。

只须要一点点代码......

element.addEventListener(‘transitionstart’, () => {
  console.log(‘Started transitioning’);
});
复制代码

这个能用来作什么？好吧，也许你的网站上有一个引人注目的动画。它运行后，用户们被迷住了，这时你想传递一个重要的信息。这时应该怎么作？固然是用过渡事件（transitionend）！

用功能策略API进行控制

Chrome的新功能策略能够轻松的启用、禁用或修改 API 和其余网站功能的行为。经过它们你能够执行诸如容许iframe 使用全屏 API 或着修改第三方视频上的自动播放的默认行为等操做。你可使用 Feature-Policy 标头或iframe 的 allow 属性来使用这个新功能：

HTTP Header: Feature-Policy: geolocation ‘self’
<iframe … allow=”geolocation self”></iframe>
复制代码

要深刻了解功能政策，请查看 Google 有关此主题的文章（developers.google.com/web/updates…

拥抱深色模式

也许你并不想，但关键是如今你多了一个选择。在 Chrome 73 中，为Mac 用户添加了深色模式，可是并无为 Windows 添加。 Chrome 74 也为 Windows 加上了。与Mac版本同样，Windows 中的深色模式看起来有点像隐身模式，不一样的是应用于新标签、书签栏等的主题。

还有什么？

这些只是Chrome 74的一些亮点。若是你正在寻找细节，请查看chromestatus.com，Google的官方网站适用全部 Chrome 更新。他们更了解这些功能，甚至可让你了解将来的版本。

欢迎关注前端公众号：前端先锋，获取前端工程化实用工具包。