Chrome 69 新特性

在不久前，Chrome 69 正式发布，作为 Chrome 的 10 周年版本，带来了许多新变化，比如新的 UI 风格，使其整体更符合 Material Design 的设计，而且还添加了以下内容的支持：

• CSS Scroll Snap，帮助你创建流畅顺滑的滚动体验
• Display cutouts，兼容全面屏、刘海屏
• Web Locks API，通过获取异步锁，在任务执行时保持该锁，等执行完毕后释放该锁

CSS Scroll Snap

CSS Scroll Snap 可以帮助开发者创建流畅顺滑的滚动体验，通过声明滚动位置，告知浏览器在执行滚动之后应该停在哪里。这对于图片轮播或分页时非常有用，可以让用户滚动到指定位置。

对于图片轮播，可以给滚动容器添加 scroll-snap-type: x mandatory;，给每个图片添加 scroll-snap-align: center;，这样，当用户滚动时，每一张图片会平滑的滚动至最合适的位置。

下面用 Vue 写一个示例：

<div id="app">
  <p>
    <label for="spanAlign">scroll-snap-align: </label>
    <select id="spanAlign" v-model="spanAlign">
      <option value="start">Start</option>
      <option value="center">Center</option>
      <option value="end">End</option>
    </select>
  </p>
  <button @click="prev">prev</button>
  <button @click="next">next</button>
  <div class="container" ref="container">
    <div class="item" v-for="n in 10" :style="itemStyle">{{n}}</div>
  </div>
</div>

window.app = new Vue({
  el: '#app',
  data() {
    return {
      spanAlign: 'center',
    };
  },
  computed: {
    itemStyle() {
      return {
        scrollSnapAlign: this.spanAlign,
      };
    },
  },
  methods: {
    prev() {
      const width = this.$refs.container.querySelector('.item').clientWidth;
      this.$refs.container.scrollBy(-width, 0);
    },
    next() {
      const width = this.$refs.container.querySelector('.item').clientWidth;
      this.$refs.container.scrollBy(width, 0);
    },
  },
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#app {
  position: relative;
  width: 500px;
  padding: 0 16px;
}

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  height: 300px;
}

.item {
  scroll-snap-align: center;
  position: relative;
  min-width: 75%;
  min-height: 90%;
  margin: 10px;
  border-radius: 10px;
  background-color: #9fa8da;
  font-size: 40px;
  text-align: center;
  vertical-align: middle;
}

可以看到，图片滚动时，会平滑地滚动到指定的位置。

平滑滚动

Display cutouts (aka notches)

现在有越来越多的手机使用了刘海屏，为了解决这种情况，Chrome 浏览器会为页面添加一些额外的 margin，这样就能保证页面内容不会被刘海遮住。

extra margin

但如果想使用这部分空间的话的话，我们就需要在 meta 标签中添加 viewport-fit 并使用 CSS 变量，比如我们可以先在 viewport meta 中设置 viewport-fit 属性为 cover。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

之后就能使用 CSS 变量 safe-area-inset-* 去布局整个页面

.content {
  margin-left: env(safe-area-inset-left);
  margin-right: env(safe-area-inset-right);
}

下图是不同的 CSS 变量所代表的值

css variables

该特性是 Chrome 69 最新支持的，而 Safari 11 早已支持该特性，相关内容可查看 Designing Websites for iPhone X

Web Locks API

Web Locks API 使得开发者可以获取异步锁，在任务执行时保持，并在任务执行结束后释放。当锁在保持状态时，在同一个 origin 内的脚本无法获取同一个锁，这样有助于协调共享资源的使用。

例如，如果在多个 tab 中运行的 Web 应用中想要保证只有一个 tab 可以进行网络同步，那么就需要尝试获取一个名叫 network_sync_lock 的锁。

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

这样第一个 tab 将会进行网络同步，如果其他的 tab 尝试获取该锁，将会进入队列等待，当该锁被释放，队列中下一个任务则会被准许获取该锁并执行。

And More!

以上内容只是 Chrome 69 中针对开发者的新特性中的一部分，下面介绍更多的新特性：

• 根据 CSS4 的规范，支持圆锥渐变去创建颜色过渡。

示例：

.test {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

最终效果如下：

圆锥渐变

• 支持 Element.toggleAttribute() 方法，用于切换元素属性的存在性，用法类似于 classList.toggle()
• 支持 Array.prototype.flat() 和 Array.prototype.flatMap() 两个方法，它们返回一个新的数组，该数组包含所有子数组的元素。
• OffscreenCanvas 将主线程放至 worker 执行，以帮助消除性能瓶颈。

总结

以上便是 Chrome 69 的新特性，若要查看英文原文，请点击查看