Chrome 57 Beta 新特性

文 | Google 軟體工程師 Xi Han

除非另外註明，否則，下面介紹的更改均適用於最新 Chrome Beta 渠道版（Android、Chrome 作業系統、Linux、Mac 和 Windows）。

CSS 網格佈局

人們使用從大型 LCD 電視到小型錶盤等各種尺寸螢幕訪問網站的情況越來越多。在過去，支援所有這些螢幕尺寸需要複雜的標記和 CSS 組合，讓程式碼變得難以維護。為使開發者能夠更精細地控制元素的縮放以適合當前螢幕尺寸， CSS 網格佈局現已推出。

CSS 網格支援二維基於網格的佈局系統，該系統專門針對自適應使用者介面設計進行了優化。可指定網格內的元素跨多行或多列。還可以給定位在 CSS 網格中的元素命名，這使佈局程式碼更容易理解。

▲ CSS 網格允許開發者將元素置於網格上的任意位置，並可全面控制元素流、尺寸調整行為和自適應性。

改進了 Add to Home Screen

從早期版本的 Chrome（Android 版）起，使用者就可以將網站新增到主螢幕，實現快速而又方便的訪問。該功能利用 Android 快捷方式新增圖示，這意味著網路應用在整個 Android 系統內的呈現方式不同於安裝的本機應用。

從此版本開始，當使用者將一個 Progressive Web App 新增到其主螢幕時，Chrome 將其整合到 Android 中時會大幅提高整合深度。例如，Progressive Web App 現在會出現在啟動器的應用抽屜式導航欄部分以及 Android 設定中，並且可以接收來自其他應用傳入的 intent。長按其通知還會顯示標準 Android 通知管理控制元件而非適用於 Chrome 的通知管理控制元件。

Media Session API

媒體消費是行動網路最常見的用途之一。在 Chrome（Android 版）中，開發者可以利用新的 Media Session API，使用媒體內容自定義鎖定螢幕 UI 和通知。通過向瀏覽器提供有關所播放內容的後設資料，開發者可以建立豐富的鎖定螢幕訊息，在其中加入名稱、音樂人、專輯名稱和封面等資訊。此外，網站現在還可以響應使用者對通知本身執行的操作（例如搜尋或跳過）。

此版本中的其他特性

• 當一段視訊在 Android 裝置上進入全屏模式時，Chrome 現在會自動根據視訊的縱橫比鎖定螢幕方向。

• 現在，如果網站使用連續的 setTimeout()，在使用迴圈來推動檢視外幀動畫時將受到限制，從而可為使用者改善效能。

• Fetch API Response 類現在支援 .redirected 屬性，以幫助網路開發者避免不可信響應以及降低開放重定向器的風險。

• 新增的 padStart 和 padEnd 格式設定工具可實現文字填充，可以簡化調整控制檯輸出或列印固定位數數字之類的任務。

• 服務工作執行緒導航預載現在以來源試用版形式提供，讓開發者能夠並行處理主要資源網路請求與服務工作執行緒啟動。

• Payment Request API 可在 iframe 內提供，通過新增 allowpaymentrequest 屬性來實現。

• PaymentMethodData 現在支援 basic-card，這樣一來，開發者不必使用不同資料型別，只需通過單個方法識別符號便可引用所有卡型別。

• 為簡化從 HTTP 到 HTTPS 的遷移，現在儲存的 HTTP 表單憑據將轉移至 HTTPS 版本的網站，Credential Management API 現在支援從匹配的子域名填充憑據。

• caret-color 屬性讓開發者可以指定文字輸入游標的顏色。

• 為與其他 on<event> 屬性保持一致，ongotpointercapture 和 onlostpointercapture 現已成為 GlobalEventHandlers mixin 的組成部分。

• 現已提供對 text-decoration-skip: ink 的支援，以使下劃線跳過下伸部分，即字母中延伸到文字基線之下的部分。

• 新的 text-decoration 屬性現已推出，讓開發者可以指定線條顏色和線型等視覺效果。

• PresentationRequest 建構函式經修改後可通過 sequence<DOMString> 接受多個網址，這是對只能接受單個網址的現有建構函式的補充。

• 新增的 AudioContext.getOutputTimestamp() 方法讓開發者能夠將 DOMHighResTimeStamp 與 AudioContext.currentTime 的值同步。

• AudioBufferSourceNode、OscillatorNode 和 ConstantSourceNode 現在從 AudioScheduledSourceNode 繼承，從而實現了功能合併。

• 新增的 cancelAndHoldAtTime 函式可以取消未來的 AudioParam 事件，前提是這些事件的時間大於或等於 cancelTime，這樣一來，開發者便可直接保留計劃時間的值。

• 開發者現在可以構建 WebAudio-specific 事件，例如 OfflineAudioCompletionEvent 和 AudioProcessEvent。

• 為提高使用者安全性，Chrome 的 XSS Auditor 現在預設情況下阻止整個可疑頁面，而不是有選擇地濾除頁面上可疑的反射 XSS。

棄用和互操作性的改善

• 已取消對 <keygen> 元素的支援，從而使它不再顯示任何控制元件，也不提交表單元素資料，以便與其他瀏覽器保持一致。

• 正如之前宣佈的那樣，本地可信 SHA-1 證照現在會引發證照錯誤頁面，除非設定了 EnableSha1ForLocalAnchors 企業政策。

• fieldset.elements 現在會返回 HTMLCollection 而非 HTMLFormControlsCollection，以便改善與規範的符合性。

• 移除了 <cursor> 元素，但仍可通過 cursor CSS 屬性設定游標圖示。

• 從 HTMLEmbedElement 和 HTMLObjectElement 中移除了一箇舊版呼叫方，因此現在介面會引發異常，而不是讓系統以函式形式呼叫其例項。

• usemap 屬性現在要求匹配時區分大小寫。

• 所有 -webkit- 字首的 IndexedDB 全域性別名都已移除，這是它們在 M38 中被棄用的後續措施。

• 自定義訊息事件和 client.postMessage(message, transfer) 在服務工作執行緒中建立的事件現在使用 MessageEvent 來替代 ServiceWorkerMessageEvent，以遵循 HTML MessageEvent 規範擴充套件。

• 對 webkitClearResourceTimings()、webkitSetResourceTimingBufferSize() 和 onwebkitresourcetimingbufferfull 的支援已從 Performance 介面中移除，由 clearResourceTimings()、setResourceTimingBufferSize() 和 onresourcetimingbufferfull 取代。

• 下列 -internal CSS 選擇器已棄用：-internal-media-controls-cast-button、-internal-media-controls-overlay-cast-button 以及所有 -internal-media-controls-text-track-list 選擇器。

• 已取消對過時 API webkitCancelRequestAnimationFrame 的支援，由 cancelAnimationFrame 取代。

• 在 Android 上，預設情況下 wordWrap: break-word 和 -webkit-line-break: after-white-space 將不再於 contenteditable 容器上進行設定，以保持瀏覽器之間的一致性。

• webkit 字首已從 AudioContext 和 OfflineAudioContext 中移除。

推薦閱讀：

在iOS上將Chrome開源！

如何在Chrome擴充套件程式中使用Firebase?

Chrome 56 Beta 新特性