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 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。
- 透過 CSS4 規格,您現在可以使用圓角建立圓形周圍的色彩轉場。Lea Verou 有可使用的 CSS
conic-gradient()
polyfill,其中提供許多非常酷炫的社群提交範例。 - 元素上有一個新的
toggleAttribute()
方法,可切換屬性存在,與classList.toggle()
類似。 - JavaScript 陣列會採用兩種新方法:
flat()
和flatMap()
。這些函式會傳回新的陣列,且所有子陣列元素均已更新至其中。 - 而
OffscreenCanvas
會將工作從主執行緒移出工作站,協助消除效能瓶頸。
彩蛋
你是否找到了影片中的所有彩蛋?
- Chrome 漫畫
- 運動錶帶
- 《Potato Cannon》
- 派特怪物
- CDS 2017 的木製恐龍
在此特別感謝曾協助我們製作 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 的新功能!