翻譯:瘋狂的技術宅 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 更新。他們更瞭解這些功能,甚至可以讓你瞭解未來的版本。