[譯] Chrome 71 新特性介紹

西樓聽雨發表於2018-12-12
Chrome

原文：New in Chrome 71
作者： Pete LePage 發表時間：December 4, 2018
譯者：西樓聽雨 發表時間： 2018/12/12(轉載請註明出處)

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

img

Many web apps use phrases like “yesterday”, “in two days”, or “an hour ago” to indicate when something happened – or is going to happen, instead of displaying the full date and time.

許多 Web 應用都會使用諸如“昨天”、“兩天前”、“一小時前”等詞彙來標示某些事情的發生點或者即將發生的點，而不是用完整的日期和時間來展示。

Displaying relative times has become so common that most of the common date/time libraries provide localized functions to handle this for us. In fact, almost every web app I build, Moment JS is one of the first libraries I add, expressly for this purpose.

相對時間的展示是如此的平常，所以大多數常見的日期/時間類庫都會提供一個支援本地化的函式來幫我們處理這個問題。其實，我構建過的幾乎所有的 Web 應用，Moment JS 都是我首先會新增的庫之一，特別是這類需求。

Chrome 71 introduces Intl.RelativeTimeFormat(), which shifts the work to the JavaScript engine, and enables localized formatting of relative times. This gives us a small performance boost, and means we only need those libraries as a polyfill when a browser doesn’t support the new APIs yet.

在 Chrome 71 中，引入了 Intl.RelativeTimeFormat() ，它將這部分工作轉移到了 JavaScript 引擎中，它同時也支援本地化的相對時間格式。這給我們帶來了一點小的效能提升，而且還意味著我們只在瀏覽器不支援這個新的 API 的時候，才會需要用到這些時間庫，把其作為一個墊片。

const rtf = new Intl.RelativeTimeFormat('en');
rtf.format(3.14, 'second');
// → 'in 3.14 seconds'rtf.format(-15, 'minute');
// → '15 minutes ago'複製程式碼

Using it is simple, create a new instance and specify the locale, then just call format with the relative time. Check out Mathias’ The Intl.RelativeTimeFormat API post for full details.

它的使用非常簡單，建立一個例項，在建立時指定一個 locale，然後用相對時間來呼叫它的 format 方法。詳情可以檢視 Mathias 的貼文 The Intl.RelativeTimeFormat API。

指定垂直文字中下劃線的位置

When Chinese or Japanese text is displayed in a vertical flow, browsers are inconsistent with where the underline is placed, it may be on the left, or on the right.

在中文或日文中，文字以豎排展示時，各瀏覽器對於下劃線的放置位置並不統一，有些在左邊，有些在右邊。

In Chrome 71, the text-underline-position property now accepts left or right as part of the CSS3 text decoration spec. The CSS3 text decoration spec adds several new properties that allow use to specify things like what kind of line to use, the style, color, and position.

現在，在 Chrome 71 中，text-underline-position 屬性可以支援 CSS3 文字裝飾規範中定義的值裡的 left 或 right。CSS3 text decoration spec（CSS3 文字裝飾規範）新增了好幾個新屬性，這些屬性可以用來指定如線條的型別、樣式、顏色及位置。

img

合成語音介面的呼叫需要有使用者互動為前提

We’ve all been surprised when we hit a site and it suddenly starts talking to us. Autoplay policies prevent sites from automatically playing playing audio, or video files with audio. Some sites have tried to get around this by using the speech synthesis API instead.

我們都有被在訪問一個網站時它突然就開始跟你”說話“的經歷嚇到過。 Autoplay policies（自動播放政策）可以阻止網站自動播放音訊或者含有音訊的視訊。但某些網站會利用 speech synthesis API（合成語音 API。即人造語音、機器語音播報——譯註）來繞過這個限制。

Starting in Chrome 71, the speech synthesis API now requires some kind of user activation on the page before it’ll work. This brings it in line with other autoplay policies. If you try to use it before the user has interacted with the page, it will fire an error.

從 Chrome 71 開始，speech synthesis API 需要使用者先在頁面中有過某類“活動”才可使用。如果在使用者還沒有與頁面進行過互動之前你就嘗試使用這個 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);

  }複製程式碼

Success: To make sure your code works, I recommend wrapping your speech synthesis call in a try/catch block, so if the page isn’t activated, it won’t break the rest of your app.

為了確保你的程式碼能夠正常工作，我建議將你的語音合成程式碼用 try/catch 程式碼塊包含起來，以便在頁面沒有被啟用的時候，不會破壞應用的其他功能。

There’s nothing worse than going to a site and having it surprise you, and the co-workers sitting around you.

“開啟一個網站，然後被它驚嚇到”沒有比這更糟糕的事了，而且同事們就坐在旁邊。

更多

  • The Element.requestFullscreen() method can now be customized on Android and allows you to choose between making the navigation bar visible versus a completely immersive mode where no user agent controls are shown until a user gesture is performed.

    Element.requestFullscreen() 方法在 Android 上現在支援自定義了，你可以選擇讓導航條可見，也可以選擇進入沒有任何使用者代理控制元件（即沒有任何瀏覽器框框——譯註）的完全沉浸模式，直到使用者做了某個操作 。

  • The default credentials mode for module script requests, has changed from omit to same-origin.

    針對模組式指令碼檔案請求的預設憑據模式從 omit 調整為了 same-origin。

  • And bringing Chrome inline with the Shadow DOM v1 spec, Chrome 71 now calculates the specificity for the :host() and :host-context() pseudo classes as well as for the arguments for ::slotted().

    現在， Chrome 71 會根據 Shadow DOM v1 規範計算 :host() 和 :host-context() 偽類以及 ::slotted() 引數的優先順序權重（specificity，可理解為，能夠匹配同一個元素的不同選擇器之間的匹配優先順序——譯註）。

來源：https://juejin.im/post/5c112efbe51d4518bd1ab513

相關文章