- Chrome 62 會提供實際成效指標而非理論結果,讓 network Information API 更實用。
- OpenType 可變字型現已支援。
- 您可以從 HTML 媒體元素擷取媒體串流。
- 我特別提醒你,Chrome 62 中有一項重大異動。
還有更多!
我是 Pete LePage,讓我們一起來看看 Chrome 62 版為開發人員提供哪些新功能!
如需完整的變更清單,請查看 Chromium 原始碼存放區變更清單。
網路品質指標
Network Information API 已在 Chrome 中提供一段時間,但它只會根據使用者的連線提供理論網路速度。假設你使用 Wi-Fi,但連線至僅有 2G 速度的行動熱點,API 會回報 WiFi!
console.log(navigator.connection.type);
> wifi
在 Chrome 62 版中,這個 API 經過擴充,以提供用戶端的實際網路效能指標。您可以利用這些網路品質信號,根據網路調整內容。舉例來說,在連線速度非常慢的情況下,您可以透過放送縮減版來改善網頁載入效能。
為簡化應用程式邏輯,API 會根據與行動網路連線的比較結果,傳回測量到的網路效能。舉例來說,連線至超快速光纖連線時,API 會回報 4G
。
console.log(navigator.connection.effectiveType);
> 4G
這些信號也會以 HTTP 要求標頭的形式提供,並透過 Client Hints 啟用。請查看範例,並進一步瞭解相關規格。
OpenType 變數字型
傳統上,一個字型只包含一個字型系列的單一例項,例如一個粗細或一個延伸。如果您想要使用一般、粗體和斜體字型,就必須加入三種不同的字型,增加網頁的字型重量。
OpenType 可變字型相當於多個個別字型,可在單一字型檔案中以精簡的方式封裝。只要調整 font-variation-settings
CSS 屬性,就能輕鬆調整伸展、樣式、粗細等,提供無限的樣式變化。這三種字型現在可以合併為一個精簡檔案。
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
}
OpenType 變數字型提供我們強大的新工具,可以建立回應式字體排版,並且減少網頁大小。如需更多資訊,請參閱 John Hudson 撰寫的「OpenType 可變字體簡介」。
從 DOM 元素擷取媒體
您現在可以使用 Media Capture from DOM Elements API,直接從 HTMLMediaElements
(例如音訊和影片) 將內容即時擷取至 MediaStream
。
在 HTML 媒體元素上叫用 captureStream()
後,您就可以操控、處理、遠端傳送或錄製串流內容。例如,使用網路音訊建立自己的等化器或 Vocoder。或者,您也可以使用 WebRTC 將內容串流至遠端網站。應用方式幾乎無窮無盡。
部分 HTTP 網頁的「不安全」標籤
如先前宣布,自 Chrome 62 版起,當使用者在 HTTP 頁面上輸入資料時,Chrome 會在網址列中將該網頁標示為「不安全」,並在網址列中輸入標籤。 在無痕模式下,所有 HTTP 頁面都會顯示這個標籤。
還有更多獎品等著您!
當然,這只是 Chrome 62 針對開發人員所做的部分變更,還有更多變更。
- Payment Request API 現已在 iOS 版 Chrome 上推出。
- 您可以透過 WebVR 原生試用版,開始建構實驗的豐富 VR 體驗。
接著訂閱我們的 YouTube 頻道,就能在新影片推出時收到電子郵件通知。
我是 Pete LePage,Chrome 63 一推出,我就會馬上在這裡告訴你 Chrome 的新功能!