在 Chrome 71 版中,我們新增了針對下列項目的支援:
還有許多功能!
我是 Pete LePage。讓我們深入探索 看看 Chrome 71 版開發人員為開發人員提供了哪些新功能!
變更記錄檔
以上內容僅涵蓋部分重點功能,請查看下方連結,瞭解 Chrome 71 版本的其他異動。
使用 Intl.RelativeTimeFormat()
顯示相對時間
許多網頁應用程式會使用「昨天」、「兩天內」或「1 小時前」等詞組指出事件發生,或是即將發生,而不是顯示完整的日期和時間。
顯示相對時間已變得相當常見,大多數常見的日期/時間程式庫都提供本地化函式來處理這種情況。事實上,幾乎所有我建構的網頁應用程式,Moment JS 就是我為了這個用途而新增的第一個程式庫之一。
Chrome 71 導入了 Intl.RelativeTimeFormat()
,這會將工作轉移至 JavaScript 引擎,並為相對時間啟用本地化格式。這可以大幅提高效能,這表示只有在瀏覽器尚未支援新的 API 時,我們才會使用這些程式庫做為 polyfill。
const rtf = new Intl.RelativeTimeFormat('en');
rtf.format(3.14, 'second');
// → 'in 3.14 seconds'
rtf.format(-15, 'minute');
// → '15 minutes ago'
如要這麼做,請建立新的執行個體並指定語言代碼,然後直接使用相對時間呼叫格式。詳情請參閱 Mathias 的 Intl.RelativeTimeFormat API
貼文。
指定垂直文字的底線位置
在垂直流程中顯示中文或日文時,瀏覽器與底線位置不同,可能位於左側或右側。
在 Chrome 71 版中,text-underline-position
屬性現在接受 left
或 right
做為 CSS3 文字裝飾規格的一部分。CSS3 文字裝飾規格新增了多項屬性,可用於指定要使用的線條、樣式、顏色和位置等等。
.left {
text-underline-position: left;
}
.right {
text-underline-position: right;
}
語音合成功能需要使用者啟動
我們都很驚訝,當我們造訪網站時 網站突然開始與我們聯繫。自動播放政策可防止網站自動播放音訊或含有音訊的影片檔案。有些網站嘗試改用語音合成 API 來解決這個問題。
從 Chrome 71 版開始,語音合成 API 現在需要先在頁面上啟用特定的使用者服務,才能正常運作。這讓這項功能與其他自動播放政策一致。如果您在使用者與網頁互動之前就嘗試使用網頁,則會觸發錯誤。
const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
window.speechSynthesis.speak(utterance);
} catch (ex) {
console.log('speechSynthesis not available', ex);
}
造訪網站時,遇到會讓您感到驚訝的消息 而且同事坐在你身邊,最糟糕的一件事。
還有更多獎品等著您!
以上只是 Chrome 71 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。
- 您現在可以在 Android 上自訂
Element.requestFullscreen()
方法,並選擇要讓導覽列顯示,還是完全沉浸模式,讓系統在執行使用者手勢前不會顯示使用者代理程式控制項。 - 模組指令碼要求的預設憑證模式已從
omit
變更為same-origin
。 - 此外,Chrome 71 也透過 Shadow DOM v1 規格內嵌,以計算
:host()
和:host-context()
虛擬類別以及::slotted()
引數的明確性。
Chrome 開發人員高峰會影片
如果您還沒參加 Chrome 開發人員高峰會,或是您拍攝了很多次的講座,請前往我們的 YouTube 頻道查看 2018 年 Chrome 開發人員高峰會播放清單。
Eva 和 Phil 加入了一些實用技巧,瞭解如何透過服務工作人員建構更快、更靈活的應用程式。
Mariko 和 Jake 在處理大量 JS 的網頁應用程式中,討論如何建構 Squoosh,以避免使用速度緩慢。
Katie 和 Houssein 介紹了「Speed Essentials: Key Techniques for Fast Websites」(快速網站效能基礎技巧) 介紹的一些實用技巧,可協助提升網站效能。
它掉落了蛋糕。Chrome DevSummit 2018 播放清單裡還有許多其他優質影片,歡迎觀看。
訂閱
想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,當 Chrome 72 推出後,我會馬上通知您,也就是 Chrome 的新功能!