Chrome 71 版新功能

Pete LePage

在 Chrome 71 中，我們新增了以下支援功能：

還有更多！

我是 Pete LePage讓我們深入瞭解 Chrome 71 版為開發人員提供的新功能！

變更記錄檔

這篇文章僅涵蓋部分重點，如要瞭解 Chrome 71 的其他異動，請參閱下方連結。

使用 Intl.RelativeTimeFormat() 顯示相對時間

Twitter 顯示最新貼文的相對時間

許多網頁應用程式會使用「昨天」、「兩天後」或「一小時前」等詞組來表示發生或即將發生的事件，而不是顯示完整的日期和時間。

顯示相對時間已成為常見的做法，因此大多數常見的日期/時間資料庫都會提供經過本地化的函式，為我們處理這項作業。事實上，我建立的幾乎所有網頁應用程式，我都會先加入 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 與 Shadow DOM 第 1 版規格保持一致，Chrome 71 現已計算 :host() 和 :host-context() 擬類別的特殊性，以及 ::slotted() 的引數。

Chrome 開發人員大會影片

如果你沒有參加 Chrome 開發人員高峰會，或是參加了但沒有觀看所有演講，請前往我們的 YouTube 頻道，查看 Chrome 開發人員高峰會 2018 播放清單。

Eva 和 Phil 在「使用服務工作者建構更快速、更有彈性的應用程式」一文中，介紹了一些在服務工作者中使用服務工作者的實用技巧。

Mariko 和 Jake 在「Complex JS-heavy Web Apps, Avoiding the Slow」一文中，討論了如何建構 Squoosh。

Katie 和 Houssein 在「Speed Essentials: Key Techniques for Fast Websites」(速度必知：讓網站快速載入的關鍵技巧) 一文中介紹了一些實用技巧，可讓您盡可能提升網站效能。

Jake 掉落蛋糕。Chrome DevSummit 2018 播放清單中還有許多精彩影片，歡迎前往觀看。

訂閱

如要隨時掌握最新影片，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，Chrome 72 版一推出，我就會馬上在這裡告訴你 Chrome 的新功能！