本頁面由 Cloud Translation API 翻譯而成。

Chrome 69 新功能

Pete LePage

Chrome 推出至今已十年。自此之後，許多事物都發生了變化，但我們為現代網路應用程式奠定穩固基礎的目標並未改變！

在 Chrome 69 中，我們新增了下列支援功能：

CSS 捲動捕捉可讓您建立流暢、精緻的捲動體驗。
螢幕凹口可讓您使用整個螢幕區域，包括螢幕凹口後方的空間 (有時稱為凹口)。
Web Locks API 可讓您非同步取得鎖定、在執行工作時保留鎖定，然後釋放鎖定。

還有更多！

我是 Pete LePage。讓我們深入瞭解 Chrome 69 為開發人員帶來哪些新功能！

如要查看完整異動清單，請參閱 Chromium 原始碼存放區變更清單。

CSS 捲動貼齊

CSS 捲動捕捉可讓您宣告捲動捕捉位置，告訴瀏覽器每次捲動作業後要停止的位置，藉此建立流暢的捲動體驗。這項功能非常適合用於圖片輪轉介面或分頁區段，讓使用者捲動至特定位置。

如果是圖片輪轉介面，我會在捲動容器中新增 scroll-snap-type: x mandatory;，並在每張圖片中新增 scroll-snap-align: center;。接著，當使用者捲動輪播內容時，每張圖片都會平滑捲動到完美位置。

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

即使捕捉目標的大小不同，或大於捲動器，CSS 捲動捕捉功能也能正常運作！如要瞭解詳情和試用範例，請參閱「使用 CSS 捲動快照功能妥善控制捲動行為」一文。

螢幕凹口

市面上越來越多行動裝置採用螢幕凹口設計，為解決這個問題，瀏覽器會在網頁中加入少許額外邊界，確保內容不會遭到凹口遮蔽。

但如果想使用該空間呢？

現在，您可以使用 CSS 環境變數和 viewport-fit 中繼標記，舉例來說，如要讓瀏覽器擴展至螢幕凹口區域，請將 viewport 中繼標記的 viewport-fit 屬性設為 cover。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

然後使用 safe-area-inset-* CSS 環境變數配置內容。

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

如要瞭解詳情，請參閱 WebKit 網誌上這篇為 iPhone X 設計網站的精彩文章，或是查看說明。

Web Locks API

Web Locks API 可讓您非同步取得鎖定、在執行工作時保留鎖定，然後釋放鎖定。鎖定期間，來源中的其他指令碼無法取得相同鎖定，有助於協調共用資源的使用情形。

舉例來說，如果網頁應用程式在多個分頁中執行，並想確保只有一個分頁會同步處理網路，同步處理程式碼就會嘗試取得名為 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.
});

第一個取得鎖定的分頁會將資料同步到網路。如果其他分頁嘗試取得相同鎖定，就會加入佇列。鎖定解除後，下一個排入佇列的要求就會獲得鎖定並執行。

MDN 有很棒的 Web Locks 基礎知識，其中包含更深入的說明和許多範例。或深入瞭解規格。

還有其他眾多資源！

當然，這只是 Chrome 69 為開發人員帶來的其中幾項變更，還有更多內容值得期待。

錐形漸層

根據 CSS4 規格，您現在可以使用圓錐漸層，在圓周周圍建立顏色轉場效果。Lea Verou 提供 CSS conic-gradient() 填補，您可以使用，該頁面也包含許多由社群提交的酷炫範例。
元素上新增了 toggleAttribute() 方法，可切換屬性是否存在，類似於 classList.toggle()。
JavaScript 陣列新增了兩種方法：flat() 和 flatMap()。這些方法會傳回新陣列，並將所有子陣列元素併入其中。
OffscreenCanvas 則會將工作移出主執行緒，交由背景工作執行，有助於消除效能瓶頸。

彩蛋

你找到影片中的所有彩蛋了嗎？

特別感謝所有協助製作28 集「Chrome 新訊」的人員。這些人全都非常優秀！

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

想瞭解自第一集以來，「Chrome 新功能」的發展歷程嗎？歡迎觀看這部有趣的 30 秒演進歷程影片，瞭解我們從第一部影片到今天的發展歷程！

當然，也感謝你的觀看，以及提供的意見和回饋！我會仔細閱讀所有意見，並虛心接受建議。這些影片因為有你而變得更好！

感謝收看！

Chrome 新功能幕後花絮

我們為你準備了有趣的幕後花絮，歡迎觀賞！看完影片後，我學到幾件事：

我說話結巴時，會發出一些奇怪的聲音。
我會做鬼臉和吐舌頭。
我會扭動身體，而且是很頻繁地扭動。

如要隨時掌握我們的影片動態，請訂閱 Chrome 開發人員 YouTube 頻道，這樣我們發布新影片時，您就會收到電子郵件通知。

我是 Pete LePage，Chrome 70 版一推出，我會立即在此說明新功能！