Chrome 74 新特性

• 文档说明
  • 做者：西楼听雨
  • 禁止转载
  • 本文同时发布于幕布平台：mubu.com/doc/explore…
• 新特性一：支持私有实例字段（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. 清晰的语法和语义
  • 更多资料
    • 1. 公有实例字段介绍（需越墙）
      developers.google.com/web/updates…​​
    • 2. 实例字段介绍（需越墙）
      developers.google.com/web/updates…
• 新特性二：支持媒体查询选项 “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; }
      • }
  • 更多资料
    • 1. perfers-reduced-motion 媒体查询选项介绍（需越墙）
      developers.google.com/web/updates…
    • 2. 媒体查询规范第5阶段规范文档中关于 prefers-reduced-motion 的描述
      drafts.csswg.org/mediaquerie…
• 新特性三：支持 CSS transition 过程事件
  • CSS Transitions 规范中规定了：
    • 当一个 transition 进入队列、开始、结束、取消时，都必须发出相对应的 transition 事件。
      这些事件在其余浏览器中已经被支持了一段时间了，但在 Chrome 74 以前还没支持
  • 在 Chrome 74 以后，咱们能够监听如下事件：
    • transitionrun ：发生在 transition 进入队列时
    • transitionstart ：发生在 transition 开始执行
    • transitionend：发生在 transition 结束之时
    • transitioncancel：发生在 transition 被取消之时
  • 这些过程性事件带给咱们的意义：
    • 咱们能够借助这些事件来作一些关联性的动做，好比在一个操做按钮 transition 结束前禁用这个操做按钮
  • 了解更多
    • 1. CSS-Transition 规范中对 transition 事件的描述
      www.w3.org/TR/css-tran…
• 新特性四：新增了一些特性政策（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(...)
        
  • 了解更多
    • 1. 特性政策介绍（需越墙）
      developers.google.com/web/updates…
• 新特性五：速度超快的异步键值对存储服务 KV Storage
  编注：该项特性还处于 Origin Trail 阶段，并未开放。Origin Trail 是谷歌的一种新特性试验机制，想要尝试新特性的网站，须要在 Origin Trail 先进行登记。
  • 关于 KV Storage 的介绍（需越墙）
    developers.google.com/web/updates…