火狐的userContent、userChrome設定 2016年05月23日 08:23
※不定期更新
※關鍵字：Tweaks、User Interface
※參考文章：How to Customize Firefox’s User Interface With userChrome.css
2021/10/31：換成Win7＋火狐93版的介面後，預設是不會自動讀取userContent、userChrome這兩個CSS檔案的，需要先去about:config，把 toolkit.legacyUserProfileCustomizations.stylesheets這個項目改為true才行。
2021/12/01：同上，在「更多工具→網頁開發者工具」裡，也變成只能選取當下網頁的元素，而無法選取火狐介面元素。此時請按F1進設定（從右上角三個點進去也可）， 「進階設定」裡，「啟用瀏覽器chrome與附加元件除錯工具箱」及「啟用遠端除錯」兩個都要勾選，關閉此工具箱。
然後「更多工具→網頁開發者工具」裡的選項會多出「瀏覽器工具箱」、「瀏覽器內容工具箱」兩個項目。選擇「瀏覽器工具箱」（Ctrl+Shift+Alt+I）會出現IP遠端連線要求，仔細看兩行都是本機IP，按確認後，出現的新工具箱就能選取火狐介面元素了。這個IP連線每次開啟都會問。
※萬一呼叫「瀏覽器工具箱」時，有讀取但工具箱沒出現，請把火狐關掉，把 Data\profile\chrome_debugger_profile 資料夾刪掉再重開瀏覽器，讓它生一個新的，能解決此問題
這兩個檔案是放在 Data\profile\chrome\ 裡面，差別是：
userContent.css 可以寫入CSS語法，來調整火狐的「外部網頁／內部設定頁」
建議寫「只在火狐設定頁生效」的CSS時，加上 @-moz-document url-prefix(about:)
userChrome.css 也可寫入CSS語法，調整火狐的使用者介面（主要是工作列及下拉選單）
換句話說，把火狐自身也看成網頁的一環，可以用CSS改變它的字型、隱藏項目等等的。
要做到這件事，最困擾的點在於「不知道那個項目，它的CSS ID是什麼」因此建議安裝DOM Inspector（新版的火狐好像有內建），使用教學可以看這裡，有點不好上手，或者需要建立概念，習慣之後就能隨心所欲地改變火狐介面呈現的模樣了。
站內相關文章：火狐語法與設定筆記
userContent.css
．強制自訂網頁字型＋能顯示圖示字型（搬運）
．只在特定網域生效的CSS
userChrome.css
．壓扁標題（分頁）列
．避免開新分頁瞬間閃白
※關鍵字：Tweaks、User Interface
※參考文章：How to Customize Firefox’s User Interface With userChrome.css
2021/10/31：換成Win7＋火狐93版的介面後，預設是不會自動讀取userContent、userChrome這兩個CSS檔案的，需要先去about:config，把 toolkit.legacyUserProfileCustomizations.stylesheets這個項目改為true才行。
2021/12/01：同上，在「更多工具→網頁開發者工具」裡，也變成只能選取當下網頁的元素，而無法選取火狐介面元素。此時請按F1進設定（從右上角三個點進去也可）， 「進階設定」裡，「啟用瀏覽器chrome與附加元件除錯工具箱」及「啟用遠端除錯」兩個都要勾選，關閉此工具箱。
然後「更多工具→網頁開發者工具」裡的選項會多出「瀏覽器工具箱」、「瀏覽器內容工具箱」兩個項目。選擇「瀏覽器工具箱」（Ctrl+Shift+Alt+I）會出現IP遠端連線要求，仔細看兩行都是本機IP，按確認後，出現的新工具箱就能選取火狐介面元素了。這個IP連線每次開啟都會問。
※萬一呼叫「瀏覽器工具箱」時，有讀取但工具箱沒出現，請把火狐關掉，把 Data\profile\chrome_debugger_profile 資料夾刪掉再重開瀏覽器，讓它生一個新的，能解決此問題
這兩個檔案是放在 Data\profile\chrome\ 裡面，差別是：
userContent.css 可以寫入CSS語法，來調整火狐的「外部網頁／內部設定頁」
建議寫「只在火狐設定頁生效」的CSS時，加上 @-moz-document url-prefix(about:)
userChrome.css 也可寫入CSS語法，調整火狐的使用者介面（主要是工作列及下拉選單）
換句話說，把火狐自身也看成網頁的一環，可以用CSS改變它的字型、隱藏項目等等的。
要做到這件事，最困擾的點在於「不知道那個項目，它的CSS ID是什麼」因此建議安裝DOM Inspector（新版的火狐好像有內建），使用教學可以看這裡，有點不好上手，或者需要建立概念，習慣之後就能隨心所欲地改變火狐介面呈現的模樣了。
站內相關文章：火狐語法與設定筆記
userContent.css
．強制自訂網頁字型＋能顯示圖示字型（搬運）
．只在特定網域生效的CSS
userChrome.css
．壓扁標題（分頁）列
．避免開新分頁瞬間閃白
●userContent.css
．強制自訂網頁字型＋能顯示圖示字型
在XP上，舊版火狐對於字型的處理，仍只能「全部採取使用者自行設定／全部採取網頁方設定」，沒辦法達到我想要的「所有中文(正簡)與日文網頁都是強制中黑體，網頁中遇到icon font／web font時才自動使用」，只要「優先使用網頁指定的字型」選項一解勾，icon font全因為中黑體不支援而變成方格……
1.在「工具→選項→內容→字型與顏色的『進階』→勾選優先使用網頁指定字型」
2.在 Data\profile\chrome 裡修改（若無則自行建立）一個 userContent.css
3.貼上並修改以下文字，存檔設定
@charset "UTF-8";
*:not(i, em, button){
font-family:"中文字型" !important;}
紅字部分是指你想要做為一統所有網頁的字型，推薦使用支援Unicode與多數符號字、日文字的中文正體字型，例如微軟正黑、思源系列、全字庫字型；而若你所看到的網頁沒特別指定英文字型，上述語法會連英文字型一起套用。要注意的是，語法不能斷行，請刪除範例裡的半形空白
上述的語法說明：
1.「*」代表全部套用；因此語法若寫成「* {font-family:"主要中文字型" !important;}」的效果等同於「不勾選『優先使用網頁字型』」
2.「:not(內容物)」代表排除項目。有幾種寫法，2023/01/03測試可用半形符號把同類型的圈在一起：
:not(既有標籤)
:not([id*="某字串"])
:not([class*="某字串"])
:not(#ID名稱)
:not(.class名稱)
第一種是「排除html語法裡的既有標籤」，它可能是像a（連結）、i或em（斜體）、button（按鈕）、strong（粗體）這一類的 → :not(a)、:not(i)、:not(em)、:not(button)等，也可以寫成:not(i, em, button)
第二、三種是「排除標籤名內含某字串的id／class標籤」（模糊定義）
第四、五種和上述相同，但是「排除標籤名稱一模一樣的id／class標籤」（精確定義）
舊資料範例的排除項目：
:not([class*="ico"]) → 排除「class標籤裡有ico三個字母的」（模糊定義），這就算頗泛用了，不然也可多加個 :not([class*="button"])
:not(i)、:not(em)、:not(button) → 排除以＜i＞、＜em＞、＜button＞作圖示字型的標籤
:not(.fa) → 較特別的例子，fa可能是Font Awesome的縮寫，使用此圖示字型的網站／附加元件，可能有通用 .fa 來展示圖示字型的慣例？
:not(.DPvwYc) → 較特別的例子，是Google日曆的圖示字型。查了一圈，文件和試算表乖乖用模糊排除，就日曆特立獨行，要自己立個class名稱……
2018-07-18追加：「:not([class*="vjs"])」for一些影片檔的靜音、時間軸、選項等按鈕（其class標籤裡多有vjs字樣）
．只在特定網域生效的CSS
由於不再使用讓網頁元素轉為暗色模式的瀏覽器附加元件，於是為了尋找替代方案研究了一陣子。說明文件詳細請參見「針對特定網站設立樣式」
以下是概念介紹：
指定網站的規則是 @-moz-document 半形空格後可以接 url(完整網址)、url-prefix(以～為開頭的網頁)、domain(指定位址主機／網域)。在 @-moz-document url(完整網址) 後方再接個{}，而這{}裡的寫法就完全跟我們所知的CSS相同。
直接放我研究出來的設定
@-moz-document domain(google.com), domain(wikipedia.org),
domain(admin.ti-da.net), domain(www.moedict.tw), domain(www.pixiv.net),
domain(www.kobo.com), domain(medium.com) {
/*通用標籤*/ body, content, div,
/*特定標籤*/.a b c{
background-color:rgba(169,184,177,0.7) !important;
}}
@-moz-document domain(facebook.com) {
/*通用標籤*/ body, content, div{
background-color:rgba(169,184,177,0.1) !important;
}}
「像一般所知的CSS」部分刻意不標示顏色，以利區分。我所採用的都是使用指定網域寫法，包括Google、維基百科（前面的zh、ja等語言標示略過，即直接套用全語言）、萌典、Pixiv。
※Pixiv在2020年5月開始有暗色模式測試，但該功能需要登入才可使用。我的設定是為了在未登入時使用
※特定標籤的「.a b c」是Medium的標籤。未來可能會增加不同網域的特定標籤，分兩行寫方便管理
※Facebook似乎有些透明的div遮罩（？）因此不與其他網域使用相同的透明度，會設定得特別低（0.1）
●userChrome.css
．#titlebar, #nav-bar
壓扁標題（分頁）列與網址列，以獲取多一點點的空間。
這個設定通常用不太到，只是我讀雲端書庫的PDF檔時，畫面上下恰巧就卡那麼一點點，才會想調整。
至火狐94版時，我直接設定參數 height 讓分頁列下緣貼著網址工具列。
由於分頁頁籤底色的灰，似乎比放著圖示、網址的工具列還要淡一些，可再加以下參數讓它同色：
#main-window {
--lwt-selected-tab-background-color:#網址列的Hex色碼 !important;
}
以及把分頁頁籤的文字、圖示抬高一點點，比較不會太貼底而有壓迫感
.tab-content {
margin-bottom: 4px;
}
．.browserContainer
為 .browserContainer 這個class設定深色背景即可避免新開分頁時，畫面瞬間閃白
．強制自訂網頁字型＋能顯示圖示字型
在XP上，舊版火狐對於字型的處理，仍只能「全部採取使用者自行設定／全部採取網頁方設定」，沒辦法達到我想要的「所有中文(正簡)與日文網頁都是強制中黑體，網頁中遇到icon font／web font時才自動使用」，只要「優先使用網頁指定的字型」選項一解勾，icon font全因為中黑體不支援而變成方格……
1.在「工具→選項→內容→字型與顏色的『進階』→勾選優先使用網頁指定字型」
2.在 Data\profile\chrome 裡修改（若無則自行建立）一個 userContent.css
3.貼上並修改以下文字，存檔設定
@charset "UTF-8";
*:not(i, em, button){
font-family:"中文字型" !important;}
紅字部分是指你想要做為一統所有網頁的字型，推薦使用支援Unicode與多數符號字、日文字的中文正體字型，例如微軟正黑、思源系列、全字庫字型；而若你所看到的網頁沒特別指定英文字型，上述語法會連英文字型一起套用。要注意的是，語法不能斷行，請刪除範例裡的半形空白
上述的語法說明：
1.「*」代表全部套用；因此語法若寫成「* {font-family:"主要中文字型" !important;}」的效果等同於「不勾選『優先使用網頁字型』」
米字符這個選取器，全名是「Universal selector／通用選取器」，所以會套用全元素
2.「:not(內容物)」代表排除項目。有幾種寫法，2023/01/03測試可用半形符號把同類型的圈在一起：
:not(既有標籤)
:not([id*="某字串"])
:not([class*="某字串"])
:not(#ID名稱)
:not(.class名稱)
第一種是「排除html語法裡的既有標籤」，它可能是像a（連結）、i或em（斜體）、button（按鈕）、strong（粗體）這一類的 → :not(a)、:not(i)、:not(em)、:not(button)等，也可以寫成:not(i, em, button)
第二、三種是「排除標籤名內含某字串的id／class標籤」（模糊定義）
某字串的前後可能還有其他文字，但只要含有該字串就算被排除的項目了
第四、五種和上述相同，但是「排除標籤名稱一模一樣的id／class標籤」（精確定義）
舊資料範例的排除項目：
:not([class*="ico"]) → 排除「class標籤裡有ico三個字母的」（模糊定義），這就算頗泛用了，不然也可多加個 :not([class*="button"])
:not(i)、:not(em)、:not(button) → 排除以＜i＞、＜em＞、＜button＞作圖示字型的標籤
:not(.fa) → 較特別的例子，fa可能是Font Awesome的縮寫，使用此圖示字型的網站／附加元件，可能有通用 .fa 來展示圖示字型的慣例？
:not(.DPvwYc) → 較特別的例子，是Google日曆的圖示字型。查了一圈，文件和試算表乖乖用模糊排除，就日曆特立獨行，要自己立個class名稱……
2018-07-18追加：「:not([class*="vjs"])」for一些影片檔的靜音、時間軸、選項等按鈕（其class標籤裡多有vjs字樣）
．只在特定網域生效的CSS
由於不再使用讓網頁元素轉為暗色模式的瀏覽器附加元件，於是為了尋找替代方案研究了一陣子。說明文件詳細請參見「針對特定網站設立樣式」
以下是概念介紹：
指定網站的規則是 @-moz-document 半形空格後可以接 url(完整網址)、url-prefix(以～為開頭的網頁)、domain(指定位址主機／網域)。在 @-moz-document url(完整網址) 後方再接個{}，而這{}裡的寫法就完全跟我們所知的CSS相同。
直接放我研究出來的設定
@-moz-document domain(google.com), domain(wikipedia.org),
domain(admin.ti-da.net), domain(www.moedict.tw), domain(www.pixiv.net),
domain(www.kobo.com), domain(medium.com) {
/*通用標籤*/ body, content, div,
/*特定標籤*/.a b c{
background-color:rgba(169,184,177,0.7) !important;
}}
@-moz-document domain(facebook.com) {
/*通用標籤*/ body, content, div{
background-color:rgba(169,184,177,0.1) !important;
}}
「像一般所知的CSS」部分刻意不標示顏色，以利區分。我所採用的都是使用指定網域寫法，包括Google、維基百科（前面的zh、ja等語言標示略過，即直接套用全語言）、萌典、Pixiv。
※Pixiv在2020年5月開始有暗色模式測試，但該功能需要登入才可使用。我的設定是為了在未登入時使用
※特定標籤的「.a b c」是Medium的標籤。未來可能會增加不同網域的特定標籤，分兩行寫方便管理
※Facebook似乎有些透明的div遮罩（？）因此不與其他網域使用相同的透明度，會設定得特別低（0.1）
●userChrome.css
．#titlebar, #nav-bar
壓扁標題（分頁）列與網址列，以獲取多一點點的空間。
這個設定通常用不太到，只是我讀雲端書庫的PDF檔時，畫面上下恰巧就卡那麼一點點，才會想調整。
至火狐94版時，我直接設定參數 height 讓分頁列下緣貼著網址工具列。
由於分頁頁籤底色的灰，似乎比放著圖示、網址的工具列還要淡一些，可再加以下參數讓它同色：
#main-window {
--lwt-selected-tab-background-color:#網址列的Hex色碼 !important;
}
以及把分頁頁籤的文字、圖示抬高一點點，比較不會太貼底而有壓迫感
.tab-content {
margin-bottom: 4px;
}
．.browserContainer
為 .browserContainer 這個class設定深色背景即可避免新開分頁時，畫面瞬間閃白
