Chrome 71 新特性[雙語+視訊]

丁香園F2E發表於2018-12-14
Chrome
在 Chrome 71, 我們增加支援了:

而且還有更多!

我是 Pete Lepage, 來讓我們深入理解 Chrome 71 對於開發者的新特性.

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)

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()
Chrome 71 新特性[雙語+視訊]
在 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
Chrome 71 新特性[雙語+視訊]
不一致下劃線的垂直文字
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.

訂閱
Subscribe
想要及時瞭解我們的視訊, 訂閱 我們的 Chrome Developers YouTuBe channel, 並且一旦我們釋出了一個新視訊, 你將獲得一封郵件提醒, 或者是新增我們的 RSS feed 到你的 feed 閱讀器.
Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you’ll get an email notification whenever we launch a new video, or add our RSS feed to your feed reader.
我是 Pete LePage, 一旦 Chrome 72 釋出, 我將會在這裡告訴你 -- Chrome 的新特性.
I’m Pete LePage, and as soon as Chrome 72 is released, I’ll be right here to tell you -- what’s new in Chrome!

譯者注:

譯者在翻譯的時候保留了英語原文, 希望給你一個原滋原味的閱讀體驗並且能熟悉一些常見的英文.

希望有讀者可以指出我的翻譯錯誤, 感激不盡.

譯文轉載請註明出處, 文中所有資源 LISENCE 均跟隨源資源.

其他雙語譯文:

翻譯本文時用到的一些工具:

相關文章