Chrome 57 新功能

  • Chrome 57 開始支援 display: grid,這是新的 CSS 格線版面配置規格。
  • 您現在可以使用新的 Media Session API,自訂及回應螢幕鎖定畫面和通知上的使用者輸入內容。
  • 而且還有許多應用程式!

我是 Pete LePage,深入探索 Chrome 57 為開發人員提供的新功能!

CSS 格線版面配置

Flexbox 是功能強大的版面配置工具。這可以包括許多複雜的版面配置,但只能以單一維度製作版面配置。Chrome 57 版開始支援 display: grid,也就是新的 CSS 格線版面配置規格,新增強大的工具,可用於建立 2D 格線式版面配置系統,並針對回應式使用者介面設計進行最佳化調整。

格線中的元素可以橫跨多個欄或列。您也可以為 CSS 格線中的區域命名,讓版面配置程式碼更容易理解。

Surma 有一篇相關最新消息貼文。準備好深入瞭解時,請前往 Rachel Andrew 網站:GridByExample.com

媒體工作階段 API

網路媒體應用程式缺少的一項功能,就是能夠與行動裝置上的核心媒體體驗深度整合。在 Android 版 Chrome 中,您現在可以使用新的 Media Session API,自訂螢幕鎖定畫面和媒體內容的通知。

透過向瀏覽器提供播放內容的中繼資料,您可以建立豐富的螢幕鎖定畫面訊息,包括標題、演出者、專輯名稱和圖片等資訊。您也可以監聽通知本身採取的動作,例如跳轉或略過。

如要快速上手,您可以閱讀 Francois 的優質更新文章,或在 GitHub 上查看官方的 Chrome 媒體工作階段範例存放區

還有更多獎品等著您!

還有許多其他功能!

  • Payment Request API 有一些 改進項目
  • 您可以使用 caret-color 屬性指定文字輸入遊標的顏色。
  • 您可以使用新的 text-decoration 屬性指定線條顏色和樣式等視覺效果。
  • Fetch API 回應類別現在支援 .redirected 屬性,以避免不可信任的回應,並降低開啟重新導向器的風險。
  • 在 M38 中淘汰 -webkit- 前置字串的 IndexedDB 全域別名後,已移除所有前置字串。
  • 還有一項我很喜歡的新 padStartpadEnd 格式設定方法,可在將主控台輸出內容對齊或以固定位數輸出數字時簡化字串邊框間距。

以上僅列出 Chrome 57 中專為開發人員設計的其中幾項變更,

向伊加利亞致敬

最後,非常感謝 Igalia 的工程師和團隊對 Blink 的卓越表現。而且將全力推出新的 CSS 格線和 caret-color 功能。

掌握最新資訊

如要隨時掌握 Chrome 的最新消息和後續消息,請務必訂閱我們的頻道,或在 Twitter 上追蹤 @ChromiumDev。請務必觀看 Chrome 開發人員高峰會影片,深入瞭解 Chrome 團隊正在進行的精彩活動。

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