翻譯:瘋狂的技術宅
https://blog.logrocket.com/wh...
本文首發微信公衆號:前端先鋒
歡迎關注,天天都給你推送新鮮的前端技術文章javascript
Chrome 74 已經發布了,雖然從用戶的角度來看並無什麼使人興奮的東西,可是對開發人員來講帶來了一些好處。新版本附帶了新的 Javascript 私有類字段、容許用戶減小動畫的媒體查詢和 Windows 的深色模式等等。css
你可能還記得,Chrome 72 在1月份增長了對 Javascript 公共類字段語法的支持。這是一種簡化語法的新方法,它容許直接在類定義中定義類字段,且不須要構造函數。html
如今在 Chrome 74 中加入私有類字段,它與公有類字段的功能大體相同,可是用 #
來表示它們是私有而不是公共的,固然它們只能在類的內部訪問。前端
先複習一下公共類字段,以下所示:java
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 上你能夠經過使用媒體查詢,來減小動畫中的動做。web
這是如何運做的?假設你有一個動畫按鈕。你可使用 @media (prefers-reduced-motion: reduce)
,以下所示:面試
button { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { button { animation: none; } }
如今當有人在 MacOS 或其餘操做系統中打開減小動做的選項時,他們將看不到動畫。chrome
如今能夠偵聽 CSS 過渡事件,如 transitionrun,transitionstart,transitionend 和 transitioncancel。儘管其餘瀏覽器好久之前就已經支持了,但遲到總比沒有好。若是你想要在過渡運行時跟蹤或更改行爲,那麼偵聽這些事件會頗有用。segmentfault
只須要一點點代碼......
element.addEventListener(‘transitionstart’, () => { console.log(‘Started transitioning’); });
這個能用來作什麼?好吧,也許你的網站上有一個引人注目的動畫。它運行後,用戶們被迷住了,這時你想傳遞一個重要的信息。這時應該怎麼作?固然是用過渡事件(transitionend)!
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 更新。他們更瞭解這些功能,甚至可讓你瞭解將來的版本。