Firefox 53 為您獻上：精簡佈景主題、CSS 遮罩，還有更多實用功能

6 min readApr 20, 2017

Firefox 53已開放更新，推出以下多種新功能強化與特點。

黑白兩種底色的簡潔佈景主題

「簡潔」（compact）佈景主題最早是於 Firefox 開發者版本（Developer Edition）釋出，現已成為 Firefox 的標準特點。這個主題採長方形的分頁及更省空間的版面設計。使用者可在「自訂」（Customize）模式的「佈景主題」（Themes）下找到黑底和白底的兩種選擇。

全新 CSS 功能： Masking 與 Flow-Root

Firefox 53是第一個全面支援 CSS Masks 的瀏覽器。CSS Masks 能將網頁上的視覺元素完全或部分遮蔽起來。它的做法是把圖像或其他圖形（如線性漸層）疊在畫面上，以遮擋住一些視覺元素或使其變為半透明。

Masks 讓使用者藉由調整相對亮度（luminance）或 alpha 值來達成遮擋的效果。如果設定為調整亮度的模式，遮罩中的白畫素便會與下層圖像的可見畫素相對應，而遮罩中的黑畫素則會把該區域變成 100% 透明。至於 Alpha 模式，則是透過操弄遮罩本身的不透明度（opacity）來遮蔽下層圖像，使遮罩中的透明畫素形成視覺元素的透明畫素。如需進一步了解更多與遮罩功能相關的屬性（遮罩定位、重複等），請參閱這份MDN文件。

這份規格書說明了依圖形形狀及向量路徑來剪切遮罩區塊的方法。Firefox 53 提供一些剪切（clipping）功能，Firefox 54則將提供全方面的支援。

最後，Firefox 還增加對於新顯示（display）屬性 — — flow-root 的支援。Flow-root 屬性的作用類似於 clearfix，只不過它使用的是標準的 CSS 屬性，而不是偽元素或其他密技。

Quantum Compositor 正式登陸 Windows

「量子合成器」（Quantum Compositor）是 Mozilla 「量子專案」（Project Quantum）的首波成果，現已正式登陸 Windows 系統。此合成器能把往網頁上各個層級的圖像都平鋪成一個圖，而形成螢幕上顯示的圖像。在 Quantum Compositor 的奧援下，Firefox 現在是以一個與 Firefox 主程式完全隔離的程序來執行合成器。也就是說，萬一合成器因驅動程式的缺陷而當機，也只會自行重啟，故能讓瀏覽器的其他元件不受影響地正常運作。若需要更多有關 Quantum Compositor 有助於降低 Firefox 當機率的資訊，請參考 Mozilla 品質工程師 Anthony Hughe 的部落文。

預設媒體使用體驗更上一層樓

伴隨 Firefox 53 對於 UI 的諸多改進，預設的 <video> 和 <audio> 控制功能也變得煥然一新：

此外，Firefox 53 還增加了全新的「抗煩」科技：在分頁標籤首次開啟後，媒體內容才會自動開始播放。如果你想體驗看看的話，請在這個連結上按右鍵，再點「用新分頁開啟連結」，你就會發現等你跳到該分頁後，影片才會開始播放。

64 位元無所不在

Windows 使用者現可選擇安裝 32 位元或 64 位元版本的 Firefox。

同時，我們也終止 32位元 Firefox 對 macOS 架構的支援，以及移除其對舊型 Pentium 4 和 Opteron CPUs 上 Linux 系統的支援。

新的 WebExtension 功能

Firefox 的新附加元件（名為 WebExtension）乃專為跨瀏覽器相容所設計，能在 Firefox、Chrome、Opera 和 Edge等瀏覽器上高效安全地運作，同時還提供了 Firefox 獨享的強大功能。

Firefox 53 新增對於幾個原有的 Chrome 擴充 API 的支援：

● browsingData API：此 API 能讓附加元件清除瀏覽器的快取、cookies、瀏覽和下載記錄等。例如，Firefox 的忘記按鈕（Forget Button）便能被當成 WebExtension 安裝

● identity API：經此 API，附加元件可請求使用者授權核發 OAuth2 驗證碼（token），進而簡化登入附加元件服務的步驟

● storage.sync API：能讓附加元件把使用者偏好存入 Firefox Sync，以在各個設備間共享和同步

● webRequest.onBeforeRequest API：除了可存取標頭（header）以外，現在還能存取請求主體（request body）

● contextMenus API：可將選單加入瀏覽器動作和頁面動作之中

另外，Firefox 也多了幾個獨家 API 與功能：

● contextualIdentities API：透過此 API，Firefox 使用者可因應不同環境建立和管理身分。此種環境身分（contextual identities）正是 Mozilla 的 Container 測試領航員（Test Pilot）專案的核心。

● contextMenus API：能讓使用者在分頁上或密碼欄中加入右鍵選單

● tabs.insertCSS API：CSS 經由此 API 植入網頁後，可指定新增樣式應被納入「作者」樣式表（stylesheet）或「使用者」的樣式表。這些樣式會循疊層順序而有不同的層級。