[译] Chrome 71 新特性介绍

原文：New in Chrome 71
作者： Pete LePage 发表时间：December 4, 2018
译者：西楼听雨 发表时间： 2018/12/12 (转载请注明出处)

使用 Intl.RelativeTimeFormat() 来展示相对时间

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 文本装饰规范）新增了好几个新属性，这些属性可以用来指定如线条的类型、样式、颜色及位置。

合成语音接口的调用需要有用户交互为前提

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，可理解为，能够匹配同一个元素的不同选择器之间的匹配优先级——译注）。