Chrome 57 Beta 新特性
除非另外注明,否則,下面介紹的更改均適用于*** 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
屬性保持一致,ongotpointercapture 和 onlostpointercapture 現已成為 GlobalEventHandlers mixin 的組成部分。 - 現已提供對 text-decoration-skip: ink 的支持,以使下劃線跳過下伸部分,即字母中延伸到文本基線之下的部分。
- 新的 text-decoration 屬性現已推出,讓開發者可以指定線條顏色和線型等視覺效果。
- PresentationRequest 構造函數經修改后可通過 sequence
接受多個網址,這是對只能接受單個網址的現有構造函數的補充。 - 新增的 AudioContext.getOutputTimestamp() 方法讓開發者能夠將 DOMHighResTimeStamp 與 AudioContext.currentTime 的值同步。
- AudioBufferSourceNode、OscillatorNode 和 ConstantSourceNode 現在從 AudioScheduledSourceNode 繼承,從而實現了功能合并。
- 新增的 cancelAndHoldAtTime 函數可以取消未來的 AudioParam 事件,前提是這些事件的時間大于或等于 cancelTime,這樣一來,開發者便可直接保留計劃時間的值。
- 開發者現在可以構建 WebAudio-specific 事件,例如 OfflineAudioCompletionEvent 和 AudioProcessEvent。
- 為提高用戶安全性,Chrome 的 XSS Auditor 現在默認情況下阻止整個可疑頁面,而不是有選擇地濾除頁面上可疑的反射 XSS。
棄用和互操作性的改善
- 已取消對
元素的支持,從而使它不再顯示任何控件,也不提交表單元素數據,以便與其他瀏覽器保持一致。 - 正如之前宣布的那樣,本地可信 SHA-1 證書現在會引發證書錯誤頁面,除非設置了 EnableSha1ForLocalAnchors 企業政策。
- fieldset.elements 現在會返回 HTMLCollection 而非 HTMLFormControlsCollection,以便改善與規范的符合性。
- 移除了
元素,但仍可通過 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 中移除。
【本文是51CTO專欄機構“谷歌開發者”的原創稿件,轉載請聯系原作者(微信公眾號:Google_Developers)】