自 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 捲動 Snap 功能也能順利運作！請參閱「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會將工作移出主執行緒，並移至工作站，有助於消除效能瓶頸。
彩蛋
你找到影片中的所有復活節彩蛋了嗎？
- Chrome 漫畫書
- Chromercise 錶帶
- 馬鈴薯大砲
- Pete Monster
- 來自 2017 年 CDS 的木製恐龍遊戲
特別感謝所有協助製作 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 的新功能！