Chrome 74 帶來的新功能

翻譯：瘋狂的技術宅 blog.logrocket.com/whats-new-i…

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 有關此主題的文章（developers.google.com/web/updates…

擁抱深色模式

也許你並不想，但關鍵是如今你多了一個選擇。在 Chrome 73 中，爲Mac 用戶添加了深色模式，可是並無爲 Windows 添加。 Chrome 74 也爲 Windows 加上了。與Mac版本同樣，Windows 中的深色模式看起來有點像隱身模式，不一樣的是應用於新標籤、書籤欄等的主題。

還有什麼？

這些只是Chrome 74的一些亮點。若是你正在尋找細節，請查看chromestatus.com，Google的官方網站適用全部 Chrome 更新。他們更瞭解這些功能，甚至可讓你瞭解將來的版本。

歡迎關注前端公衆號：前端先鋒，獲取前端工程化實用工具包。