Chrome 71 的新功能

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'

使用起来非常简单,只需创建一个新实例并指定语言区域,然后只需使用相对时间调用格式即可。如需了解完整详情,请查看 Mathias 的 Intl.RelativeTimeFormat API 帖子。

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

垂直文本中下划线不一致

当中文或日语文本以垂直流的形式显示时,浏览器与下划线的位置不一致,可能是左侧或右侧。

在 Chrome 71 中,text-underline-position 属性现在接受 leftright 作为 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 中做出的一些改动,当然还有很多其他变化。

Chrome 开发者峰会视频

如果您没有参加 Chrome 开发者峰会,或者您可能参加了,但没有看到所有演讲,请查阅我们的 YouTube 频道上的 2018 年 Chrome 开发者峰会播放列表

使用 Service Worker 构建更快、更弹性的应用中,Eva 和 Phil 探讨了使用 Service Worker 的一些巧妙技巧。

Mariko 和 Jake 谈到他们如何在包含大量 JS 的复杂 Web 应用,避免慢速中构建 Squoosh

Katie 和 Houssein 在速度要素:快速网站的关键技术中介绍了一些可最大限度提升网站性能的实用技巧。

Jake 放下了蛋糕。2018 年 Chrome 开发者峰会播放列表中还有许多其他精彩视频,敬请观看。

订阅

如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。

我叫 Pete LePage