本文来源: https://developers.google.com/web/updates/2018/12/nic71

本文作者: Pete LePage Google's Developer Advocate

文章 LISENCE: https://creativecommons.org/licenses/by/3.0/

文章中的代码 LISENCE: https://www.apache.org/licenses/LICENSE-2.0

视频来源: https://www.youtube.com/watch?v=SkIgtVvAR6w

视频 LISENCE: https://support.google.com/youtube/answer/2797468

译者: 蒋璇, 就职于丁香园, 任职 Insight 医药数据库前端开发. 开源社区热爱者

在 Chrome 71, 我们增加支持了:

显示相对时间现在已经是 Intl API 的一部分.
在垂直排版下, 指定文本的下划线应该出现在文本的哪一侧
在使用 speech synthesis API 之前, 需要用户激活

而且还有更多!

我是 Pete Lepage, 来让我们深入理解 Chrome 71 对于开发者的新特性.

In Chrome 71, we've added support for:

Displaying relative times is now part of the Intl API.
Specifying which side of the text the underline should appear on for text that flows vertically.
Requiring user activation before using the speech synthesis API.

And there’s plenty more!

I’m Pete LePage. Let’s dive in and see what’s new for developers in Chrome 71!

(译者注: 你可以选择先看下视频版 32.682MB)

Change log

这仅包含了一些关键亮点, 请查看以下链接, 了解 Chrome 71 的其它改变.

This covers only some of the key highlights, check the links below for additional changes in Chrome 71.

Chromium source repository change list
ChromeStatus.com updates for Chrome 71
Chrome 71 deprecations & removals

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

Display relative times with Intl.RelativeTimeFormat()

在 Twitter 上面, 最新的推文显示相对时间

Twitter showing relative time for latest post

许多 web app 使用诸如 "yesterday", "in two days", 或者 "an hour ago" 的短语来表明某些事情发生了 - 或即将发生, 而不是显示全部的日期和时间.

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 app, Moment JS 都是我添加的第一个库, 专门为此.

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.

Chrome 71 引入了 Intl.RelativeTimeFormat(), 它将工作转移给了 JavaScript 引擎, 并启用相对时间的本地化格式.这给我们带来一个小的性能提升, 并且我们只需要将这些库作为 polyfill, 当浏览器还没有支持这些新的 API.

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.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

使用它很简单, 创建一个新的实例并指定语言环境, 然后只要使用相对时间格式调用 format .查看 Mathias' 的 Intl.RelativeTimeFormat API 文章来了解完整详情.

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.

指定垂直文本的下划线位置

Specifying underline location for vertical text

不一致下划线的垂直文本

Vertical text with inconsistent underlines

当中文或者是日文被显示在一个垂直布局下, 浏览器对于下划线应该放置在哪里是不一致的, 这有可能在左边, 或者是右边,

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.

在 Chrome 71 中, text-underline-position 现在接受 left 或者是 right, 根据 CSS3 text decoration 规范的这部分. CSS3 text decoration 规范添加了一些新的属性, 其允许你指定像使用的线的类型, 风格, 颜色和位置的东西.

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.

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Speech synthesis 需要用户激活

Speech synthesis requires user activation

我们都感到很惊讶, 当我们访问某个网站, 其突然开始和我们说话. AutoPlay 策略阻止网站自动的开始播放音频, 或者是带有音频的视频. 一些站点已经尝试绕过这个策略, 通过使用 speech synthesis(译者注: 语音合成) API 替代.

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.

从 Chrome 71 开始, speech synthesis API 现在需要一些用户在页面上的一些活动来让其工作. 这使得它和其他的 AutoPlay 策略对齐. 如果你在用户和页面交互之前尝试使用该 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.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

提示: 为了确保你的代码工作, 我建议你将你的 speech synthesis 调用放到 try/catch 代码块中, 所以如果你的页面不是被激活的, 这将不会破坏你的 app 的其他部分.

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.

没有什么比前往一个网站,其让你和你周围的同事感到意外更糟糕的事情了.

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

还有更多

And more!

这些只是 Chrome 71 对于开发者的一些变化.当然, 还有更多.

These are just a few of the changes in Chrome 71 for developers, of course, there’s plenty more.

Element.requestFullscreen() 方法现在已经可以在 Android 上面定制化, 其允许你选择导航条可见和没有用户代理控制面板显示的一个完全的沉浸式模式. 用户执行手势操作的时候才会显示用户代理控制面板.

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.
模块脚本请求的默认凭证模式已经从 omit 改为 same-origin.

The default credentials mode for module script requests, has changed from omit to same-origin.
使 Chrome 符合 Shadow DOM V1 规范,Chrome 71 现在计算 :host()(译者注: MDN :host), :host-context()(译者注: MDN :host-context()),和 ::slotted()(译者注: MDN ::slotted()) 的参数的权重. (译者注: 关于这一点的改动可以见 https://github.com/w3c/csswg-drafts/issues/1915, https://github.com/w3c/csswg-drafts/issues/1915#issuecomment-424790398, https://github.com/w3c/csswg-drafts/issues/2271, https://www.chromestatus.com/feature/5177305701810176)

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 开发者峰会视频

Chrome DevSummit Videos

如果你没有参加 Chrome Dev Summit, 或者是也许你参与了但是你没有看到所有的演讲,查看 Chrome Dev Summit 2018 播放列表在我们的 YouTube 频道.

If you didn’t make it to Chrome Dev Summit, or maybe you did, but didn’t see all the talks, check out the Chrome Dev Summit 2018 playlist on our YouTube channel.

Ewa and Phil 研究使用 service worker 构建更快, 更有适应力的 App 的一些巧妙技巧.

Eva and Phil went into some neat techniques for using service workers in Building Faster, More Resilient Apps with Service Workers.

Mariko and Jake 讨论他们是如何构建的 Squoosh, 一个复杂的重 js web app, 并且避免缓慢.

Mariko and Jake talked about how they build Squoosh in Complex JS-heavy Web Apps, Avoiding the Slow.

Katie and Houssein 讲述一些优秀的技术来最大化你的站点的性能. 在 Speed Essentials: Key Techniques for Fast Websites.

Katie and Houssein covered some great techniques to maximize the performance of your site in Speed Essentials: Key Techniques for Fast Websites.

Jake dropped the cake(译者注: 这个视频算是一个彩蛋视频). 而且在 Chrome 2018 开发者峰会播放列表还有很多很棒的视频, 所以查看它们.

Jake dropped the cake. And there are plenty of other great videos in the Chrome DevSummit 2018 playlist, so check them out.

订阅

Subscribe

想要及时了解我们的视频, 订阅我们的 Chrome Developers YouTuBe channel, 并且一旦我们发布了一个新视频, 你将获得一封邮件提醒, 或者是添加我们的 RSS feed 到你的 feed 阅读器.

Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you’ll get an email notification whenever we launch a new video, or add our RSS feed to your feed reader.

我是 Pete LePage, 一旦 Chrome 72 发布, 我将会在这里告诉你 -- Chrome 的新特性.

I’m Pete LePage, and as soon as Chrome 72 is released, I’ll be right here to tell you -- what’s new in Chrome!

译者注:

译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.

希望有读者可以指出我的翻译错误, 感激不尽.

译文转载请注明出处, 文中所有资源 LISENCE 均跟随源资源.

其他双语译文:

开发者工具的新特性 (Chrome 71) [双语+视频]

React 16.x 蓝图[双语版]

翻译本文时用到的一些工具:

视频下载工具: https://www.clipconverter.cc

双语字幕制作工具: http://arctime.org/index.html

双语字母稿: https://github.com/Jiang-Xuan/double-language-transitions/blob/master/New in Chrome 71.ass