Chrome 74 带来的新功能
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个方案及实现