- 支援
ResizeObservers
,可在元素的內容矩形大小變更時通知您。 - 模組現在可以使用 import.meta 代管特定中繼資料。
- 彈出式視窗攔截器增強了。
window.alert()
不會再變更焦點。
以及更多更多功能!
我是 Pete LePage。讓我們深入探索 Chrome 64 為開發人員推出的新功能!
想要完整的異動清單嗎?請參閱 Chromium 來源存放區變更清單。
ResizeObserver
追蹤元素大小變更的時機可能會有些許困難。您很可能會將事件監聽器附加至文件的 resize
事件,然後呼叫 getBoundingClientRect
或 getComputedStyle
。但這兩者都會造成版面配置輾轉現象。
如果瀏覽器視窗並未變更大小,卻在文件中加入了新元素,該怎麼辦?還是您為元素新增 display: none
?這兩種方式都可以變更頁面中其他元素的大小。
ResizeObserver
會在元素大小變更時通知您,並提供元素的新高度和寬度,降低版面配置輾轉現象的風險。
與其他觀察器一樣,使用這個程式庫十分簡單,只要建立 ResizeObserver
物件,並將回呼傳遞至建構函式即可。回呼會獲得 ResizeOberverEntries
的陣列,每個觀察到的元素各有一個項目,其中包含元素的新尺寸。
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
請參閱 ResizeObserver
:就像是元素 document.onresize
,瞭解更多詳細資料和實際範例。
改良的彈出式視窗攔截器
我討厭開分頁的而是在網頁開啟彈出式視窗前往某些目的地,「並且」瀏覽網頁。通常是你不需要的廣告或內容
從 Chrome 64 版開始,這些類型的瀏覽將遭到封鎖,且 Chrome 會向使用者顯示部分原生 UI,允許使用者視需要追蹤重新導向。
import.meta
編寫 JavaScript 模組時,您通常會需要存取目前模組的主機專屬中繼資料。Chrome 64 現在支援模組中的 import.meta
屬性,並以 import.meta.url
形式公開模組的網址。
當您想要解析與模組檔案相關的資源 (而非目前的 HTML 文件) 時,這項功能就非常實用。
還有更多獎品等著您!
以上只是 Chrome 64 中對開發人員的一些變更,當然還有許多變更。
- Chrome 現在支援使用規則運算式進行命名擷取和 Unicode 屬性逸出。
<audio>
和<video>
元素的預設preload
值現在是metadata
。這樣就能讓 Chrome 與其他瀏覽器同步,並只載入中繼資料 (而非媒體本身) 以降低頻寬和資源用量。- 您現在可以使用
Request.prototype.cache
查看Request
的快取模式,並判斷要求是否為重新載入要求。 - 現在有了 Focus Management API,您可以使用
preventScroll
屬性聚焦元素,而不必捲動至該元素。
window.alert()
還有一個!雖然這不是「開發人員功能」,但讓我很滿意。window.alert()
不再在前景中帶入背景分頁!相反地,當使用者切換回該分頁時,就會顯示快訊。
系統觸發了 window.alert
,因此不用再隨意切換分頁。
我正在看你舊的 Google 日曆。
別忘了訂閱我們的 YouTube 頻道,每當我們推出新影片時,你都會收到電子郵件通知。
我是 Pete LePage。Chrome 65 推出後,我很樂意告訴大家:Chrome 的新功能!