Chrome十週年版更新了，你第一次用它是什麼時候？
2008 年 9 月 2 日，Chrome 瀏覽器誕生，今天，Chrome 69 正式釋出，從誕生到佔據瀏覽器的半壁江山，Google 用了 10 年時間。從第一次釋出之日起到現在，Chrome 發生了很多變化，但 Chrome 為現代 Web 應用程式構建堅實基礎的目標卻一直沒有變！
在 Chrome 69 中，UI風格有了比較鮮明的變化，整體更符合Material Design扁平化的設計語言，與 Safari 類似，現在 Chrome 也可以為使用者生成安全密碼，而且還新添加了對以下內容的支援：
更多內容請戳： https://developers.google.com/web/updates/2018/09/nic69#more
CSS Scroll Snap
開發者可以通過 CSS Scroll Snap 來建立流暢平滑的滾動體驗。開發者宣告目標滾動位置，告訴瀏覽器在執行完滾動操作後停在哪個位置。這對於某些場景非常有用，比如在進行影象輪播或分頁時，可以讓使用者滾動到指定位置。
視訊連結： https://developers.google.com/web/updates/images/2018/07/css-scroll-snap/gallery-page.mp4
對於影象輪播，可以為滾動容器新增scroll-snap-type: x mandatory;，同時為每個影象新增snap-align: center;。然後，當用戶進行滾動操作時，每個影象將平滑地滾動到目標位置。
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
相容劉海屏
隨著越來越多的手機使用劉海屏，Chrome 瀏覽器會為頁面騰出一些額外的空間，這樣內容就不會被凹口遮住。
但如果你想要使用凹口空間該怎麼辦？
使用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);
}
Web Locks API
Web Locks API讓開發者可以非同步獲取鎖，在執行任務期間保持鎖，然後釋放它。在保持鎖的同時，origin中的其他指令碼無法獲取相同的鎖，從而有助於協調共享資源的使用。
例如，如果在多個選項卡中執行的Web應用程式想要確保同時只有一個選項卡可以進行網路同步，那麼同步程式碼就需要嘗試獲取一個叫作network_sync_lock的鎖。
navigator.locks.request('network_sync_lock', async lock => {
// 獲取鎖
await do_something();
await do_something_else();
// 鎖將被釋放
});
第一個獲取到鎖的選項卡將開始網路同步。如果另一個選項卡嘗試獲取相同的鎖，它需要排隊。鎖被釋放後，佇列中的下一個請求將獲得鎖。
MDN提供了一個很棒的Web Locks入門教程，進行了更深入的解釋，並提供了大量示例（ https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API ）。
以上這些只是針對開發人員的一些變化，當然還有其他更多特性：
- 根據CSS4規範，現在可以使用圓錐漸變來建立圍繞圓周的顏色過渡。Lea Verou提供了一個CSSconic-gradient() polyfill（ https://leaverou.github.io/conic-gradient/ ），這個主頁上還有一大堆由社群提交的非常酷的示例。
- 為元素新增了一個toggleAttribute()方法，用於切換屬性的存在與否，類似於classList.toggle()。
- JavaScript陣列新增了兩個方法：flat()和flatMap()。它們返回一個新陣列，其中包含了所有子陣列元素。
-
OffscreenCanvas將主執行緒的任務轉移給了worker，以幫助消除效能瓶頸。
檢視英文原文： https://developers.google.com/web/updates/2018/09/nic69
Linux公社的RSS地址： https://www.linuxidc.com/rssFeed.aspx
本文永久更新連結地址： https://www.linuxidc.com/Linux/2018-09/154180.htm