Chrome 74 帶來的新功能

前端先鋒發表於2019-05-14

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

img

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’
<iframeallow=”geolocation self”></iframe>
複製程式碼

要深入瞭解功能政策,請檢視 Google 有關此主題的文章(developers.google.com/web/updates…

擁抱深色模式

也許你並不想,但關鍵是現在你多了一個選擇。在 Chrome 73 中,為Mac 使用者新增了深色模式,但是並沒有為 Windows 新增。 Chrome 74 也為 Windows 加上了。與Mac版本一樣,Windows 中的深色模式看起來有點像隱身模式,不同的是應用於新標籤、書籤欄等的主題。

還有什麼?

這些只是Chrome 74的一些亮點。如果你正在尋找細節,請檢視chromestatus.com,Google的官方網站適用所有 Chrome 更新。他們更瞭解這些功能,甚至可以讓你瞭解未來的版本。

歡迎關注前端公眾號:前端先鋒,獲取前端工程化實用工具包。

Chrome 74 帶來的新功能

相關文章