本頁面由 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 Scroll Snap 提供精細控制的捲動功能」一文，瞭解詳情和可試用的範例！

螢幕凹口 (又稱為「瀏海」)

手機螢幕有缺口 — 瀏覽器會在有螢幕缺口的行動裝置上增加一些額外的邊界，避免內容遭到缺口遮蓋。

越來越多行動裝置會在螢幕上開孔，有時也稱為「瀏海」。為解決這個問題，瀏覽器會在網頁上加入一點額外的邊界，避免內容遭到缺口遮蔽。

但如果您想使用該空間呢？

您現在可以使用 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() polyfill，該頁面還包含社群提交的許多精彩範例。
元素上有新的 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 Bloopers 的新功能

我們為你準備了有趣的幕後花絮，希望你會喜歡！觀看影片後，我學到幾件事：

當我說話結結巴巴時，我會發出一些奇怪的聲音。
我會做鬼臉和吐舌頭。
我會扭動，而且扭動幅度很大。

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

我是 Pete LePage，Chrome 70 版一推出，我就會馬上在這裡告訴你 Chrome 的新功能！