Chrome 74 帶來的新功能
What’s new in Chrome 74
翻譯：瘋狂的技術宅
https://blog.logrocket.com/wh...本文首發微信公眾號：前端先鋒
歡迎關注，每天都給你推送新鮮的前端技術文章
Chrome 74 已經發布了，雖然從使用者的角度來看並沒有什麼令人興奮的東西，但是對開發人員來說帶來了一些好處。新版本附帶了新的 Javascript 私有類欄位、允許使用者減少動畫的媒體查詢和 Windows 的深色模式等等。
公共類欄位，私有類欄位
你可能還記得，Chrome 72 在1月份增加了對 Javascript 公共類欄位語法的支援。這是一種簡化語法的新方法，它允許直接在類定義中定義類欄位，且不需要建構函式。
現在在 Chrome 74 中加入私有類欄位，它與公有類欄位的功能大致相同，但是用 # 來表示它們是私有而不是公共的，當然它們只能在類的內部訪問。
先複習一下公共類欄位，如下所示：
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
私有類欄位添加了 # ：
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
不那麼快
事實證明，有些人並不是那麼喜歡現代網站上的華麗動畫。實際上視差滾動、縮放和跳躍動作效果會使一些動畫出問題，這並不好玩。作業系統已添加了減少這類動作的選項，在 Chrome 74 上你可以通過使用媒體查詢，來減少動畫中的動作。
這是如何運作的？假設你有一個動畫按鈕。你可以使用 @media (prefers-reduced-motion: reduce) ，如下所示：
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
現在當有人在 MacOS 或其他作業系統中開啟減少動作的選項時，他們將看不到動畫。
偵聽 CSS 過渡事件
現在可以偵聽 CSS 過渡事件，如 transitionrun，transitionstart，transitionend 和 transitioncancel。儘管其他瀏覽器很久以前就已經支援了，但遲到總比沒有好。如果你想要在過渡執行時跟蹤或更改行為，那麼偵聽這些事件會很有用。
只需要一點點程式碼......
element.addEventListener(‘transitionstart’, () => {
console.log(‘Started transitioning’);
});
這個能用來做什麼？好吧，也許你的網站上有一個引人注目的動畫。它執行後，使用者們被迷住了，這時你想傳遞一個重要的資訊。這時應該怎麼做？當然是用過渡事件（transitionend）！
用功能策略API進行控制
Chrome的新功能策略可以輕鬆的啟用、禁用或修改 API 和其他網站功能的行為。通過它們你可以執行諸如允許iframe 使用全屏 API 或著修改第三方視訊上的自動播放的預設行為等操作。你可以使用 Feature-Policy 標頭或iframe 的 allow 屬性來使用這個新功能：
HTTP Header: Feature-Policy: geolocation ‘self’ <iframe … allow=”geolocation self”></iframe>
要深入瞭解功能政策，請檢視 Google 有關此主題的文章（ https://developers.google.com... ）。
擁抱深色模式
也許你並不想，但關鍵是現在你多了一個選擇。在 Chrome 73 中，為Mac 使用者添加了深色模式，但是並沒有為 Windows 新增。 Chrome 74 也為 Windows 加上了。與Mac版本一樣，Windows 中的深色模式看起來有點像隱身模式，不同的是應用於新標籤、書籤欄等的主題。
還有什麼？
這些只是Chrome 74的一些亮點。如果你正在尋找細節，請檢視 chromestatus.com ，Google的官方網站適用所有 Chrome 更新。他們更瞭解這些功能，甚至可以讓你瞭解未來的版本。
本文首發微信公眾號：前端先鋒
歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章
