阅读 542

Chrome 74 新特性

  • 新特性一:支持私有实例字段(private class filed)
    • Chrome 72 发布时,对公有实例字段(pulibc class field)已经实现了支持;这次,Chrome 74 的发布,则实现了对私有实例字段的支持。他的语法类似于公有实例字段,只需在字段名称前加上“#”符号即可(你可以把它当成是字段名称的一部分)
      • 示例
        • class IncreasingCounter {
          • // Private class field
          • #privateValue= 0;
          • get value() {
            • return this.#privateValue;
          • }
          • increment() {
            • this.#privateValue++;
          • }
        • }
    • 实例字段语法可以带来的好处:
      • 1. 可以省去需在 constructor 函数中初始化实例字段的麻烦
      • 2. 清晰的语法和语义
    • 更多资料
  • 新特性二:支持媒体查询选项 “prefers-reduced-motion”
    • 背景介绍
      • 我们都知道界面动效会消耗一定的性能,如果设备本身性能不佳,或者设备当前性能不足时,动效就会给用户带来卡顿的感觉,反而会降低体验;所以许多操作系统都提供了缓解或取消动效的选项。prefers-reduced-motion (媒体查询选项之一)就是这样一项可以用来检测这类选项是否已开启的媒体查询项。
        • 操作系统中的减少或取消动效的选项示例
    • @media (prefers-reduced-motion: reduce)
    • 使用示例
      • 假设我们现在有一个登录按钮,它上面设置了一个动画,其代码如下:
        • button { animation: vibrate 0.3s linear infinite both; }
      • 如果我们想在用户开启了减轻动画选项时禁用这个按钮的动画,我们可以这样做:
        • @media(prefers-reduced-motion: reduce) {
          • button { animation: none; }
        • }
    • 更多资料
  • 新特性三:支持 CSS transition 过程事件
    • CSS Transitions 规范中规定了:
      • 当一个 transition 进入队列、开始、结束、取消时,都必须发出相对应的 transition 事件。
        这些事件在其他浏览器中已经被支持了一段时间了,但在 Chrome 74 之前还没支持
    • 在 Chrome 74 之后,我们可以监听以下事件:
      • transitionrun :发生在 transition 进入队列时
      • transitionstart :发生在 transition 开始执行
      • transitionend:发生在 transition 结束之时
      • transitioncancel:发生在 transition 被取消之时
    • 这些过程性事件带给我们的意义:
      • 我们可以借助这些事件来做一些关联性的动作,比如在一个操作按钮 transition 结束前禁用这个操作按钮
    • 了解更多
  • 新特性四:新增了一些特性政策(Feature Policy)API
    • 特性政策简介
      • 特性政策可以用来选择性地允许、禁用某些特性或修改特性的行为。它可以通过两种方式来设置:
        • 两种方式的示例:
          • HTTP 响应头:Feature-Policy: geolocation 'self'
            • 通过<meta> 标签的 http-equiv 属性来设置的方式与此等价
          • allow 属性:<iframe ... allow="geolocation self"></iframe>
    • 新增的 API
      • 1. 获取不受禁止的所有特性
        • document.featurePolicy.allowedFeatures()
      • 2. 查询某项特性是否不受禁止
        • document.featurePolicy.allowsFeature(...)
      • 3. 查询某项特性在当前页面上不受禁止的所有域名
        • document.fetaturePolicy.getAllowlistForFeature(...)
    • 了解更多
  • 新特性五:速度超快的异步键值对存储服务 KV Storage
    编注:该项特性还处于 Origin Trail 阶段,并未开放。Origin Trail 是谷歌的一种新特性试验机制,想要尝试新特性的网站,需要在 Origin Trail 先进行登记。
  • 关联文档
  • 其他说明
    • 本文同时发布与于
    • 作者:洛水惊鸿
      我就是21世纪最伟大的发明​​
    • 打赏:你的一枚硬币,培养的却可能是下一代比尔·盖茨
    • 联系 & 交流 & 聘用


关注下面的标签,发现更多相似文章
评论