专栏首页京程一灯Chrome 74 带来的新功能[每日前端夜话0x66]

Chrome 74 带来的新功能[每日前端夜话0x66]

翻译:疯狂的技术宅

来源:logrocket

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

公共类字段,私有类字段

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

现在在 Chrome 74 中加入私有类字段,它与公有类字段的功能大致相同,但是用 # 来表示它们是私有而不是公共的,当然它们只能在类的内部访问。

先复习一下公共类字段,如下所示:

 1class IncreasingCounter {
 2  // Public class field
 3  _publicValue = 0;
 4  get value() {
 5    return this._publicValue;
 6  }
 7  increment() {
 8    this._publicValue++;
 9  }
10}

私有类字段添加了 #

 1class IncreasingCounter {
 2  // Private class field
 3  #privateValue = 0;
 4  get value() {
 5    return this.#privateValue;
 6  }
 7  increment() {
 8    this.#privateValue++;
 9  }
10}

不那么快

事实证明,有些人并不是那么喜欢现代网站上的华丽动画。实际上视差滚动、缩放和跳跃动作效果会使一些动画出问题,这并不好玩。操作系统已添加了减少这类动作的选项,在 Chrome 74 上你可以通过使用媒体查询,来减少动画中的动作。

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

1button {
2  animation: vibrate 0.3s linear infinite both;
3}
4@media (prefers-reduced-motion: reduce) {
5  button {
6    animation: none;
7  }
8}

现在当有人在 MacOS 或其他操作系统中打开减少动作的选项时,他们将看不到动画。

侦听 CSS 过渡事件

现在可以侦听 CSS 过渡事件,如 transitionrun,transitionstart,transitionend 和 transitioncancel。尽管其他浏览器很久以前就已经支持了,但迟到总比没有好。如果你想要在过渡运行时跟踪或更改行为,那么侦听这些事件会很有用。

只需要一点点代码……

1element.addEventListener(‘transitionstart’, () => {
2  console.log(‘Started transitioning’);
3});

这个能用来做什么?好吧,也许你的网站上有一个引人注目的动画。它运行后,用户们被迷住了,这时你想传递一个重要的信息。这时应该怎么做?当然是用过渡事件(transitionend)!

用功能策略API进行控制

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

1HTTP Header: Feature-Policy: geolocation ‘self’
2<iframe … allow=”geolocation self”></iframe>

要深入了解功能政策,请查看 Google 有关此主题的文章(https://developers.google.com/web/updates/2018/06/feature-policy)。

拥抱深色模式

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

还有什么?

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

原文:https://blog.logrocket.com/whats-new-in-chrome-74-6f8b82919c68

本文分享自微信公众号 - 前端先锋(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 由 for...of 深入看 Babel 转码的局限

    ES6 借鉴了其他编程语言的特性,为 JavaScript 带来了 for…of 循环语法,用于遍历数组等数据结构。当然,由于是 ES6 的特性,我们使用 fo...

    逆葵
  • 面试的反杀-你有没有想要问我的

    不知道是不是真的,但是面试结束的时候,面试官通常会问下候选人 你有没有想要问我的,今天结合我自己的面试和被面试的经历聊聊这个话题。

    Android技术干货分享
  • 聊聊spring data jpa的JpaQueryLookupStrategy

    本文主要研究一下spring data jpa的JpaQueryLookupStrategy

    codecraft
  • Spring Boot导致ElasticSearch版本冲突

    因为transport使用的是5.5.3版本,对应的transport-netty3-client也是5.5.3,但是transport-netty4-clie...

    十毛
  • JVM 内存结构

    Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分为若干个不同的数据区域。

    用户3596197
  • 为你的 JavaScript 项目添加智能提示和类型检查

    最近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等...

    逆葵
  • Java 同步处理与异步处理

    heidsoft
  • Java 对象的自我救赎

    JVM 通过可达性分析算法判断一个对象是否可以被回收 ,但并不是一个对象不可达时,就宣告“死刑”的,此时只是暂时处于”缓刑“阶段。要宣告一个对象“死刑”,至少还...

    用户3596197
  • 多线程之 ThreadLocal简析

    ThreadLocal 是一个线程内部的数据存储类,通过它可以在 指定的线程中 存储数据,数据存储以后,只有在指定线程中可以获取到存储的数据,对于其他线程来说则...

    Anymarvel
  • 自己动手实现OkHttp

    在Android、Java开发领域中,相信大家都听过或者在使用Square家大名鼎鼎的网络请求库:OkHttp ,当前多数著名的开源项目如 Fresco、Gli...

    Android技术干货分享

扫码关注云+社区

领取腾讯云代金券