在不久前，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，这样就能保证页面内容不会被刘海遮住。
但如果想使用这部分空间的话的话，我们就需要在 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 变量所代表的值
该特性是 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 的新特性，若要查看英文原文，请点击查看
