Firefox 75: 四月新氣象

即使在這段隔離的時期,我們的工程團隊也已經調整好步調,保持專注並努力工作,並獻上令人興奮的新版Firefox。在開發人員工具方面,你可以在網頁主控台中使用即時求值、WebSockets事件斷點以及許多其他功能。在網頁平台方面,新增的功能包括HTML延遲載入圖片、CSS min()max()clamp()函數、公開靜態類別屬性以及支援網頁動畫API附加功能等。

與往常一樣,請點擊下方閱讀重點,或在下文瀏覽所有新增功能的完整列表:

新增開發人員工具

讓我們先來看看Firefox 75中最有趣的開發人員新工具。

即時測試控制台表達式

螢幕截圖為網頁控制台進行表達式的即時測試

控制台中測試表達式是了解應用程序狀態、查詢DOM或試用JavaScript API非常便捷的方法。現在,利用Firefox控制台的多行模式使編寫較長的代碼更為容易,在使用上更為友善,且更貼近整合開發環境。

新的即時測試可以在輸入時預覽當前表達式的結果,有點類似Quokka.js編輯器。只要在Web控制台中鍵入的表達式沒有副作用,在輸入時便可以直接預覽結果。

為了使預覽盡可能無縫,需要花費很大的功夫。以當前的成果來說,DOM節點的元素表現出色,而代碼內自動完成功能也會根據結果類型推薦方法和屬性。此外,更可以預覽錯誤以快速地修復表達式。

更佳的檢查和測量方法

現在可以調整測量面積大小

螢幕截圖顯示DevTools中的面積測量工具,可以在頁面上快速繪製矩形以測量特定區域的高度、寬度和對角線長度。

使用DevTools中的選用面積測量工具可以在頁面上快速繪製矩形以測量特定區域的高度、寬度和對角線長度。在「可用的工具箱按鈕」的設置中可以啟用該工具。感謝Sebastian Zartner [:sebo],這些矩形現在具有調整大小的句柄,因此可以精準地進行調整。

利用Xpath查詢DOM元素

Xpath查詢通常用於自動化工具中,以告知軟件要定位與互動的元素。再次感謝Sebo,現在可以利用HTML的頁面檢測器搜索以XPath來查詢DOM元素。這使得在網站上實際測試表達式和修改變得更加容易。

WebSockets的事件斷點

在每個最新的DevTools版本中,WebSocket檢查功能都持續進步。這次,天資聰穎的Chujun Lu在除錯方面做出了很大的貢獻。

在執行WebSocket事件處理程序時,你可以利用除錯器中新的事件監聽器斷點(Event Listener Breakpoints)暫停或是記錄。選擇紀錄選項後,事件數據和已執行的處理程序會被記錄下來,但是不會暫停執行。

在WebSocket Inspector中,由於Outvi V長期的貢獻,消息過濾器現在可以支援一般的表達式。

網路新增功能

Firefox 75在網絡介面的質量和性能方面有大幅的進步。這個版本的渲染效能立下了新的里程碑,可以快速渲染同時發動的請求,又不增加CPU的負擔。

在介面方面,貢獻者Florens Verschelde提出了在列之間添加邊框以提升可讀性的建議和設計。這個設計使DevTools整體的外觀更加一致。貢獻者Vitalii在改善狀態之間的對比度後,篩選按鈕也變得更清晰。

阻斷請求面板可協助測試匹配請求失敗時網站的彈性。現在,它允許包含“ *”的萬用字源。感謝Duncan Dean的貢獻。

開發者版本中搶先體驗DevTools功能

開發者版本是Firefox的預發布渠道,可以提早體驗編程和平台功能。默認情況中,瀏覽器的設定提供開發人員了更多功能。我們希望盡快在開發者版本中加入新功能,並收集不同的反饋,包括以下重點。

除錯器和控制台的異步堆棧跟踪追蹤

現代的JavaScript編碼很大程度上取決於在其他異步作業(例如:event、promise和timeout)之上堆疊async/await。在與JavaScript引擎整合優化之後,現在異步作業得以提供更完整的服務。

利用除錯器中的異步堆棧可以逐步了解所執行的event、timeout和基於promise的函數調用。在控制台中,透過異步堆棧使查找錯誤的根本原因變得更加容易。

網頁平台更新

讓我們看看Firefox 75網頁平台方面的更新。

HTML延遲載入圖片

延遲加載是用來提升性能常用的一個策略。透過將資源標記為非阻塞(非關鍵)資源,並在需要時才加載,而不是立即加載所有資源。Web App中延遲加載的最常見的資源之一為圖片。

為了讓延遲載入圖片時在使用上更為簡便,我們提供支援HTML <img>元素的load屬性。只要將之設定為lazy,就可以使瀏覽器延遲載入尚未出現在畫面中的圖片,直到使用者快瀏覽到圖片時才加以載入。另一個屬性則是eager,也就是一般預設的屬性。

<img src="image.jpg" loading="lazy" alt="..." />

你可以透過檢查布林 complete屬性的值來確定圖片是否已完成加載。

注意:當網頁一次載入所有內容時,將觸發load事件。這時,畫面中可能尚未載入延遲加載的圖片。

注意:Chrome目前正在測試延遲加載<iframe>內容,但這尚未正式發行。

CSS min()max()clamp()

這個月增加了一些令人興奮的CSS新功能!我們開始支援三個非常實用的CSS函數,這些CSS函數彼此密切相關,但目的卻不同:

  • min() —接受一個或多個可能的值或運算以選擇,並確保在所有情況下使用的值都是最小可能的值。實作上,這提供響應式設計一系列的值以及最大允許值。
  • max() — 接受一個或多個可能的值或運算以選擇,並確保在所有情況下使用的值都是最大可能的值。實作上,這提供響應式設計一系列的值以及最小允許值。
  • clamp() — 接受三個值或運算:最小值,首選值和最大值。如果計算值低於最小值,則將使用最小值。如果計算值大於最大值,則將使用最大值。如果計算值介於兩者之間,則將使用首選值。這使屬性值適應所分配的元素或頁面中的變更,同時保持在最小值和最大值之間。

這些功能對於響應式設計來說非常實用,可以節省大量時間和代碼。先前可能需要同時運用min-widthwidth還有max-width,或是多媒體查詢,甚至JavaScript才能完成同樣的事情。

CSS min()max()clamp()實例

讓我們看看下方的例子:

html {
  font-family: sans-serif;
}
 
body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}
 
h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem)
}
 
p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

我們這裡將body寬度設為min(1000px, calc(70% + 100px)),也就是說在較寬的視區中,body為1000px。在較窄的視區中,body為視區的70%,再加上100px(直到這個運算結果達到1000px以上)!

頂部標題的字體大小設置為clamp(1.8rem, 2.5vw, 2.8rem),所以最小值為1.8rem,最大值為2.8rem。在這個範圍區間,最適合的值為2.5vw。你可以看到標題會放大或縮小,因為2.5vw大於1.8rem,且小於2.8rem

段落的字體大小設置為max(1.2rem, 1.2vw),所以最小值為1.2rem。但是當1.2vw的值大於1.2rem的值時,字體則會開始放大。

你可以參閱此處min()max()clamp()簡易的實作

JavaScript功能

Firefox 75中新增了一些有趣的JavaScript功能。

首先,我們現在有公共靜態字段。如果你希望一個字段在每個類別中僅存在一次,而不存在於你所創建的每個類別的實例中時,這時就很有幫助。對於緩存,固定配置或不需要跨實例複製的其他資料很有用。基本語法如下:

class ClassWithStaticField {
  static staticField = 'static field'
}
 
console.log(ClassWithStaticField.staticField)
// expected output: "static field"​

接下來,我們透過加入Intl.Locale提升國際化(i18n)功能。Intl.Locale為標準的內置屬性,它代表Unicode語言環境標識符。你可以參考以下範例創建一個韓文語言環境對象:

const korean = new Intl.Locale('ko', {
  script: 'Kore', region: 'KR', hourCycle: 'h24', calendar: 'gregory'
});

然後依照預期返回對象的屬性:

console.log(korean.hourCycle, japanese.hourCycle);
// expected output: "h24" "h12"

表單元素功能

在Firefox 75中,我們添加了一些可用於表單API的實用功能:

  • HTMLFormElement介面有一個新的方法requestSubmit()。目前舊有的submit()方法仍可使用,不同的是requestSubmit()運作的方式就像點擊了指定的提交按鈕一樣,而不僅僅是將表單數據發送給收件人。因此,submit事件被提交了,而表單的有效性也在數據送出之前完成了檢查。
  • submit事件 event is now represented by an object of type SubmitEvent rather than a simple Event. SubmitEvent包含一個新的submitter屬性,該屬性會回傳一個觸發提交表單的元素。透過這個事件,你可以使用一個處理程序來掌管提交的事件,並判斷提交表單的按鍵或連結。

Web Animations API提升

在Firefox 75中,我們添加了許多新的Web Animations API功能,讓這個版本在使用上更加有趣和實用。

定義關鍵影格的起始和結束

從現在開始,你可以只定義動畫的起始和結束(例如:單個關鍵影格)。然後,瀏覽器會嘗試推斷動畫的結束。例如,請參考這個簡易動畫──關鍵影格物件如下所示:

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

我們只有指定動畫的結束狀態,而瀏覽器自動推算了起始狀態。

自動移除填充動畫

同一元素可能會觸發大量動畫,所以如果動畫屬性為無限重複(例如:向前填充動畫),可能會導致動畫列表過大,進而造成記憶體流失。因此,我們根據Web動畫規範,自動刪除覆蓋的向前填充動畫,除非開發人員明確要求保留動畫。

在我們簡易的替換無限重複動畫範例中看到這個動作。相關JavaScript功能如下:

  • animation.commitStyles() — 執行這個方法將提交動畫的最終樣式狀態給要進行動畫的元素,即便該動畫已被刪除。最終樣式狀態會以樣式屬性中特性的形式寫入進行動畫的元素。
  • animation.onremove —允許你在動畫刪除時(例如:置換狀態)觸發事件處理器並加以執行。
  • animation.persist() — 當你確定希望保留動畫時,請調用persist()
  • 則此方法將處於活動狀態;如果已調用persist(),則將保留該屬性。

  • animation.replaceState — 返回動畫的置換狀態。如果動畫已刪除,會處於active狀態。如果已調用persist(),則會處於persisted狀態。

時間軸

預設模式中啟用了,Animation.timeline getter、Document.timelineDocumentTimelineAnimationTimeline功能,所以你現在可以取得動畫的時間軸信息。這個功能在回傳時間值以同步資料時非常實用。

在預設模式中,動畫和檔案的時間軸為一致的。

Getting active animations

最後,Document.getAnimations()Element.getAnimations()方法現在為預設。你可以返回檔案或特定元素中所有有效的動畫的陣列。

ARIA批註

在Windows和Linux上的Firefox 75中,你可以看到稱為ARIA批註的一組新輔助功能,目前預計於WAI-ARIA 1.3版規範中發布。透過ARIA批註可以在Web文檔中建立可訪問的註釋,常見的實例包括編輯建議(例如:在可編輯文檔中添加或刪除內容)以及評論(例如:審核中部分文檔的相關編輯評論)。

目前螢幕報讀器並未支援ARIA批註,但是不久後我們將能夠使用這些新角色和其他屬性。欲瞭解更多實例和其他細節,請閱讀MDN中的ARIA批註

瀏覽器擴充功能

WebExtensions API中的browserSettings新增了兩項新屬性:zoomFullPage可以放大網頁中的內文;zoomSiteSpecific可以只放大網頁中運作中的標籤,也可以放大網頁中所有的標籤。

總結

以上是我們在Firefox 75中新增的一些有趣的新功能;歡迎大家來體驗,祝大家玩得愉快!與往常一樣,歡迎隨時提供反饋並在評論區提出問題。check them out, and have fun playing!

This post is also available in: 简体中文 (簡體中文) English (英語) Español (西班牙語)

About Chris Mills

Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, HTML/CSS/JavaScript, A11y, WebAssembly, and more. He loves tinkering around with web technologies, and gives occasional tech talks at conferences and universities. He used to work for Opera and W3C, and enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.

More articles by Chris Mills…