Chrome 71 版新功能

彼特.萊奇 (Pete LePage)

在 Chrome 71 版中，我們新增了針對下列項目的支援：

還有許多功能！

我是 Pete LePage。讓我們深入探索 看看 Chrome 71 版開發人員為開發人員提供了哪些新功能！

變更記錄檔

以上內容僅涵蓋部分重點功能，請查看下方連結，瞭解 Chrome 71 版本的其他異動。

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

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

許多網頁應用程式會使用「昨天」、「兩天內」或「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 的新功能！