乐趣区

Chrome-74-带来的新功能

jiezi

What’s new in Chrome 74

翻译：疯狂的技术宅
https://blog.logrocket.com/wh…

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

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 有关此主题的文章（https://developers.google.com…）。

拥抱深色模式

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

还有什么？

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

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

  • 12 个令人惊叹的 CSS 实验项目
  • 必须要会的 50 个 React 面试题
  • 世界顶级公司的前端面试都问些什么
  • 11 个最好的 JavaScript 动态效果库
  • CSS Flexbox 可视化手册
  • 从设计者的角度看 React
  • 过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
  • CSS 粘性定位是怎样工作的
  • 一步步教你用 HTML5 SVG 实现动画效果
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩展插件
  • Node.js 多线程完全指南
  • 把 HTML 转成 PDF 的 4 个方案及实现
退出移动版