前端前線 2026 年 9 月 30 日

2026-09-30 — Firefox 157 改版介面,對話框與表單改跟隨頁面配色

primary=https://www.firefox.com/en-US/firefox/157.0/releasenotes/ primary=https://lwn.net/Articles/1097495/

Firefox 157 改版介面,對話框與表單改跟隨頁面配色

Firefox 157.0 Release Notes · 2026-09-29

Firefox 157.0 把工具列、側邊欄與選單整套換新,並讓對話框與表單元件改為跟隨網頁自己的色彩配置,不再只看瀏覽器主題。發行日為 2026-09-29,release notes 稱這是「biggest visual refresh in years」。

對一般使用者是換皮,對網頁開發者則有幾項會直接改變畫面或測試結果的行為變動。

背景:介面與頁面配色原本各走各的

改版前,頁面若宣告自己的色彩配置(例如深色),瀏覽器繪製的對話框與部分表單元件仍可能依瀏覽器或系統主題呈現,於是出現深色頁面上跳出淺色對話框的落差。release notes 未說明具體受影響的元件清單,也未交代是哪一個 CSS 機制觸發,這點需要自己實測。

側邊欄也有類似的歷史包袱:新版側邊欄現在對所有人啟用,舊版仍可透過 about:config 的偏好設定切回,保留到 2027 年底。release notes 未列出該偏好的名稱。

核心改動

  • 視覺改版:工具列、側邊欄、選單現代化,新增內建淺色與深色主題,以及縮小間距的 compact 模式。
  • Web 平台:@supports 查詢支援 at-rule() 函式;overscroll-behavior 新增 chain 值。
  • WebRTC:支援的裝置上,視訊通話的 AV1 改用硬體解碼,取代軟體解碼。
  • 安全提示:偵測到可能暴露加密流量的 TLS key logging 設定時,網站資訊面板會顯示警告。

以 CSS 為例,功能偵測現在可以直接問「瀏覽器認不認得某個 at-rule」:

@supports at-rule(@starting-style) {
  /* 只在支援該 at-rule 的瀏覽器套用 */
}
overscroll-behavior: chain;

上面的 at-rule(@starting-style) 只是語法示意,release notes 沒有給出範例;chain 值的語意 release notes 亦未說明,請以 MDN 或規格為準。

行為變動對照

項目舊行為157.0
Tab 鍵導覽先停在搜尋引擎按鈕直接進入網址列文字欄
對話框與表單元件未提及跟隨頁面配色尊重頁面色彩配置
側邊欄舊版新版全面啟用,舊版可用 about:config 偏好切回至 2027 年底
預設搜尋引擎含 Amazon移除 Amazon

影響範圍

寫深色模式或自訂 color-scheme 的網站,要重新檢查原生對話框、<select>、輸入框在 Firefox 上的對比,因為這些元件的配色來源變了。用截圖比對的 E2E 或視覺回歸測試,基準圖很可能需要重拍。

依賴鍵盤流程的自動化測試與無障礙腳本,要確認 Tab 導覽的第一站已改為網址列文字欄。

WebRTC 應用在支援的裝置上,AV1 會走硬體解碼;若你以軟體解碼耗用當作效能基準,數據會變。另有修正:行動裝置通話畫面出現側躺或上下顛倒的問題。

企業或客製化部署若鎖定了側邊欄行為,需要留意舊版介面只保留到 2027 年底。

本次尚有 Firefox Suggest 擴及 16 個歐洲國家、多項 Windows 顯示與播放修正,以及未逐條列出的安全修補,此處不逐一展開。

原始來源:Firefox 157.0 Release Notes、LWN 公告


End of article
0
Would love your thoughts, please comment.x
()
x