在不久前，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 的新特性，若要查看英文原文，請點擊查看