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 藍圖[雙語版]