Chrome 69 新功能

Chrome 推出至今已有 10 年。此後許多產品不斷發生變化,但我們的目標是為新型網頁應用程式奠定穩固基礎,這個目標還無法實現!

在 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 捲動貼功能使用 Well-Controlled Scrolling」一文。

螢幕凹口 (又稱凹槽)

手機螢幕凹口
針對具有螢幕凹口的行動裝置,瀏覽器會增添額外邊界,避免內容被凹口覆蓋。

目前顯示的行動裝置數量與日俱增,並且顯示螢幕凹口 (有時稱為「凹口」)。為瞭解決這個問題,瀏覽器會在網頁中多預留一點額外邊界,這樣內容才不會被凹口遮住。

但如果您想使用這個空間呢?

只要使用 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);
}

有一篇關於為 iPhone X 設計網站的 WebKit 網誌文章,或查看說明器瞭解詳情。

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 Lock 入門,並提供更詳盡的說明和許多範例。您也可以進一步瞭解spec

還有更多獎品等著您!

以上只是 Chrome 69 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。

錐狀漸層

彩蛋

你是否找到了影片中的所有彩蛋?

在此特別感謝曾協助我們製作 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 全新內容

我們準備了一部有趣的 blooper 短片,盡情享受吧!看完之後,我學到了幾件事:

  • 每次跳脫我的說法時,我發出了奇怪的噪音。
  • 我會做臉然後吐舌頭
  • 我動動腦,很多事。

訂閱

想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。

我是 Pete LePage,當 Chrome 70 推出後,我會馬上說明 Chrome 的新功能!