Chrome 71 的新功能

Pete LePage

在 Chrome 71 中，我们添加了对以下功能的支持：

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 71 中面向开发者的新功能！

更新日志

本文仅涵盖部分主要变化，请访问以下链接，了解 Chrome 71 中的其他变更。

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

Twitter 显示最新帖子的相对时间

许多 Web 应用使用“昨天”“两天后”或“一小时前”等短语来指明事件发生或将要发生的时间，而不是显示完整的日期和时间。

显示相对时间已变得非常普遍，因此大多数常见的日期/时间库都提供了本地化函数来为我们处理此问题。事实上，在构建的几乎每个 Web 应用中，我都会首先添加 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'

使用它很简单，只需创建一个新实例并指定语言区域，然后使用相对时间调用 format 即可。如需了解完整详情，请参阅 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 中面向开发者的变更只是其中一小部分，当然，远不止这些。

  • Element.requestFullscreen() 方法现在可以在 Android 上进行自定义，您可以选择让导航栏可见，也可以选择完全沉浸式模式（在用户执行手势之前不显示任何用户代理控件）。
  • 模块脚本请求的默认凭据模式已从 omit 更改为 same-origin。
  • Chrome 71 现已集成 Shadow DOM v1 规范，可计算 :host() 和 :host-context() 伪类以及 ::slotted() 参数的特异性。

Chrome Dev Summit 视频

如果您错过了 Chrome 开发者峰会，或者您参加了峰会，但没有观看所有演讲，请访问我们的 YouTube 频道，观看 Chrome 开发者峰会 2018 播放列表。

Eva 和 Phil 在使用 Service Worker 构建更快速、更弹性的应用中介绍了一些使用 Service Worker 的实用技巧。

Mariko 和 Jake 在 Complex JS-heavy Web Apps, Avoiding the Slow 中介绍了如何构建 Squoosh。

Katie 和 Houssein 在速度必备知识：提高网站速度的关键技术中介绍了一些非常实用的技巧，可帮助您最大限度提升网站性能。

Jake 丢了蛋糕。Chrome DevSummit 2018 播放列表中还有许多其他精彩视频，欢迎观看。

订阅

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 72 发布后，我会立即为您介绍 Chrome 中的新变化！