Chrome 71 新增了对以下功能的支持:
- 显示相对时间现在是
Intl
API 的一部分。 - 对于垂直流动的文本,指定应在文本的哪一侧显示下划线。
- 在使用语音合成 API 之前需要用户激活。
以及更多功能!
我是 Pete LePage。下面我们就来详细了解一下 Chrome 71 为开发者提供了哪些新功能!
更新日志
此处仅涵盖部分主要亮点,请点击以下链接,了解 Chrome 71 中的其他变化。
使用 Intl.RelativeTimeFormat()
显示相对时间
许多 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
属性现在接受 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 内嵌 Shadow DOM v1 规范,Chrome 71 现在会计算
:host()
和:host-context()
伪类以及::slotted()
参数的特异性。
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