Chrome 71 新特性[双语+视频]

时间 2019-11-16

原文原文链接

本文来源: developers.google.com/web/updates…

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

文章 LISENCE: creativecommons.org/licenses/by…

文章中的代码 LISENCE: www.apache.org/licenses/LI…

视频来源: www.youtube.com/watch?v=SkI…

视频 LISENCE: support.google.com/youtube/ans…

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

在 Chrome 71, 咱们增长支持了:

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

并且还有更多!css

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

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) git

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()) 的参数的权重. (译者注: 关于这一点的改动能够见 github.com/w3c/csswg-d…, github.com/w3c/csswg-d…, github.com/w3c/csswg-d…, www.chromestatus.com/feature/517…)

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.

译者注:github

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

但愿有读者能够指出个人翻译错误, 感激涕零.chrome

译文转载请注明出处, 文中全部资源 LISENCE 均跟随源资源.数据库

其余双语译文:express

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

React 16.x 蓝图[双语版]

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

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

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

双语字母稿: github.com/Jiang-Xuan/…