使用 Firefox 覆蓋網頁原本的 CSS

最近重新擷取圖片及更新 Blogger 的一些舊文章，需要反覆更改更內文
除非將發佈的文章回復為草稿，否則不能儲存，需要立即發佈，但在下又不希望胡亂發佈未確應的文章
而預覽的內容，又因為有一個透明的 div 擋著在下測試文章的資料
雖然現在的網頁瀏覽器都有開發者工具，可以將該透明的 div 移除，但經常要移除都非常麻煩

其實過去 Firefox 都有不少擴充程式 (extension) 可以讓使用者處理這些內容
例如 Greasemonkey 、 Remove It Permanently (已不再支援)
但好像在下只稍作修改 CSS 便可解決的問題，安裝 extension 可能有些麻煩


開啟 Firefox 到 about:support 的 Firefox 支援頁面
按 設定檔目錄 的 開啟資料夾 按鈕


在 Firefox 的設定檔目錄建立 chrome 的目錄 (與 Google Chrome 無關，只是名稱相同)


並在 chrome 目錄中建立 userContent.css
userContent.css 的 CSS 檔案就是用作覆蓋網頁原本的 CSS

chrome 及 userContent.css 的名稱必須 符合大小寫

例如

* {
    display: none;
}

當重新啟動 Firefox 後， Firefox 便讓 CSS 生效，上述 CSS 會令所有 HTML 元素不顯示，包括 Firefox 自身的樣式

另外 Firefox 支援 @-moz-document 網址過濾，能覆蓋指定網址的 CSS
例如

@-moz-document regexp(".*yahoo.*") {
    * {
        display: none;
    }
}

當重新啟動 Firefox 後， 會將網址包含 yahoo 的 CSS 覆蓋

如果覺得 Regex 太複雜，亦可以使用簡單的 domain 或 url 等來過濾
domain 只需要符合域名即可， url 則需要符合整個網址才可，因此需要使用適合的過濾
另外網址過濾亦可以使用 , (逗號) 來連接，讓不同網址過濾都以相同 CSS 覆蓋
例如

@-moz-document domain("yahoo.com"), url("about:mozilla") {
    * {
        display: none;
    }
}

用 * (星號) 可能會太嚴重，可以使用 CSS 的 Element Selector 語法，需要指定特定元素


例如閣下非常討厭在下的 Blog 的標題，可以先了解該元素的結構


在 userContent.css 輸入

@-moz-document regexp("https?://hkgoldenmra\.blogspot\..*") {
    div.header-outer {
        display: none;
    }
}

到 about:config 修改設定置
尋找 toolkit.legacyuserprofilecustomizations.stylesheets 並將設定值改為 true


重新啟動後，每次到在下的 Blog 便不再見到該標題

又例如在下在 Blogger 中編寫的文章，在預覽時不顯示透明 div

@-moz-document regexp("https?://.*\.blogspot\..*") {
    div[class="blogger-clickTrap singleton-element"] {
        display: none;
    }
}

如果在下仍然覺得非常困難， Firefox 亦有擴充程式 Stylish 蓋覆網頁 CSS
但要留意，CSS 只是改變樣式，仍然會載入網頁元素

CSS 的詳細資料 https://www.w3.org/Style/CSS/
Element Selector 的詳細資料 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
網址過濾的詳細資料 https://github.com/stylish-userstyles/stylish/wiki/Valid-@-moz-document-rules
Stylish 的詳細資料 https://userstyles.org/