經驗: CSS 的寫作 (113-12-21)

這裡記錄一下撰寫類似 additional_menubar_tabstoolbar_adjustments_128.css 這類 CSS 樣式時的經驗。

這個 CSS 樣式解決的是自訂 Firefox 介面時分頁列 (Tabs Toolbar) 與選單列 (Menubar) 在不同情境下的一些細節上的瑕疵的問題。

首先需要確定的是總共有幾種情況——

對於 #main-window (Firefox 主程式), 有情況三種如下：
- [sizemode="maximized"] (最大化);
- [sizemode="fullscreen"] (全螢幕); 以及
- :not([sizemode="fullscreen"], [sizemode="maximized"]) (視窗);
對於#toolbar-menubar (選單列), 有情況三種如下：
- [autohide="true"][inactive="true"] (隱藏);
- [autohide="true"]:not([inactive="true"]) (暫時喚出); 以及
- [autohide="false"] (常駐); 以及
對於有否啟用標題列，則有情況兩種如下：
- #main-window[tabsintitlebar]; 和
- #main-window:not([tabsintitlebar]).

因此便總共有 3 × 3 × 2 = 18 種情況。根據這 18 種情況，可以先打一個空白的草稿 CSS 檔案如下——

CSS draft (stage 0)

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] {

}
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] {

}
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] {

}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="false"] {

}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="false"] {

}
#main-window:not([tabsintitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] {

}
#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) {

}
#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {

}

#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] {

}
#main-window:not([tabsintitlebar], [sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {

}

此處其實省略了對介面緊湊程度是緊湊還是不緊湊的考量，因為這兩種情況下那些介面上的小的瑕疵都是一樣的，因此可以在最後在適當位置對 #main-window 加入 :is([uidensity=compact], :not([uidensity=compact])) 即可令緊湊與不緊湊的介面布局都使用修改過的 CSS 樣式。

接下來開始根據列出的情況逐一去測試這 18 種情況，並對應地寫入恰當的內容。當發現顯而易見的重複項目時，可以進行簡單的合併，這樣便得到了一個寫完的草稿如下——

CSS Draft (stage 1)

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	margin-top: -0.15rem !important;
	padding-inline-start: calc(var(--appbutton_in_titlebar) - 0.5rem) !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]),
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
	padding-top: 0.25rem !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.064rem;
	margin-top: -0.25rem !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.064rem;
	margin-top: -0.15rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	margin-top: -0.2rem !important;
	padding-inline-start: calc(var(--appbutton_in_titlebar) - 0.5rem) !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]),
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] {
	padding-top: 0.2rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.064rem;
	margin-top: -0.3rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.064rem;
	margin-top: -0.15rem !important;
}

#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #toolbar-menubar {
	padding: 0.15rem 0 0.2rem 0.2rem !important;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar {
	padding: 0.15rem 0 0 0.2rem !important;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.25rem !important;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.4rem !important;
}

#main-window:not([tabsintitlebar]) #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.35rem;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.3rem;
}

#main-window:not([tabsintitlebar]):is([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.1rem;
}

#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	padding-inline-start: 0 !important;
	margin-left: -0.08rem;
}

#main-window[sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar .titlebar-buttonbox-container {
	visibility: collapse !important;
	display: none !important;
}

此處可見，最後一則樣式是情況外的情況，當在測試過程中發現介面上出現異常元素時，就需要及時透過 CTRL + ALT + SHIFT + I 來找到並解決它。

之後，便可以開始第一輪的「合併同類項」，並得到結果如下——

CSS Draft (stage 2)

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
	margin-top: -0.15rem !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	padding-inline-start: calc(var(--appbutton_in_titlebar) - 0.5rem) !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]),
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
	padding-top: 0.25rem !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window:not([tabsintitlebar]):is([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar,
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	padding-inline-start: 0 !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
	margin-left: -0.064rem;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.25rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]),
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] {
	padding-top: 0.2rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.3rem !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	margin-top: -0.2rem !important;
}

#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #toolbar-menubar {
	padding: 0.15rem 0 0.2rem 0.2rem !important;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar {
	padding: 0.15rem 0 0 0.2rem !important;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.4rem !important;
}

#main-window:not([tabsintitlebar]) #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.35rem;
}

#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.3rem;
}

#main-window:not([tabsintitlebar]):is([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	margin-left: -0.1rem;
}

#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	margin-left: -0.08rem;
}

#main-window[sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar .titlebar-buttonbox-container {
	visibility: collapse !important;
	display: none !important;
}

最後，在此基礎上，再透過 :is(), :not() 的使用來簡化那些堆疊的項目，並在適當位置加入前文提到的有關介面緊湊程度的表述，便得到了最終的結果——

additional_menubar_tabstoolbar_adjustments_128.css (CSS ver: 4.7.3; Firefox ver: 118–132)

#main-window #toolbar-menubar:is([autohide="false"], :not([inactive="true"])) ~ #TabsToolbar,
#main-window:not([tabsintitlebar]) #TabsToolbar {
	padding-inline-start: 0 !important;
}
#main-window[tabsintitlebar]:is([sizemode="maximized"], :not([sizemode="maximized"])):is([uidensity=compact], :not([uidensity=compact])) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	padding-inline-start: calc(var(--appbutton_in_titlebar) - 0.5rem) !important;
}
#main-window[tabsintitlebar]:is([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar:is([autohide="true"]:not([inactive="true"]), [autohide="false"]) {
	padding-top: 0.25rem !important;
}
#main-window[tabsintitlebar] #toolbar-menubar:is([autohide="true"]:not([inactive="true"]), [autohide="false"]) ~ #TabsToolbar {
	margin-left: -0.064rem;
}
#main-window[tabsintitlebar]:is([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar:is([autohide="true"][inactive="true"], [autohide="false"]) ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
	margin-top: -0.15rem !important;
}
#main-window[tabsintitlebar]:is([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.25rem !important;
}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	margin-top: -0.2rem !important;
}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar:is([autohide="true"]:not([inactive="true"]), [autohide="false"]) {
	padding-top: 0.2rem !important;
}
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.3rem !important;
}
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #toolbar-menubar {
	padding: 0.15rem 0 0.2rem 0.2rem !important;
}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar {
	padding: 0.15rem 0 0 0.2rem !important;
}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar {
	margin-top: -0.4rem !important;
}
#main-window:not([tabsintitlebar]) #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.35rem;
}
#main-window:not([tabsintitlebar])[sizemode="fullscreen"] #toolbar-menubar[inactive="true"] ~ #TabsToolbar {
	margin-top: -0.3rem;
}
#main-window:not([tabsintitlebar]):is([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	margin-left: -0.1rem;
}
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	margin-left: -0.08rem;
}
#main-window[sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar .titlebar-buttonbox-container {
	visibility: collapse !important;
	display: none !important;
}

至於為甚麼

#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"], [sizemode="maximized"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar,
#main-window:not([tabsintitlebar]):is([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar,
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"], [sizemode="maximized"]) #TabsToolbar {
	padding-inline-start: 0 !important;
}

不能直接簡化成

#TabsToolbar {
	padding-inline-start: 0 !important;
}

而是要寫成最終版本中

#main-window #toolbar-menubar:is([autohide="false"], :not([inactive="true"])) ~ #TabsToolbar,
#main-window:not([tabsintitlebar]) #TabsToolbar {
	padding-inline-start: 0 !important;
}

的樣子，以及最終版本的第二則中

#main-window[tabsintitlebar]:is([sizemode="maximized"], :not([sizemode="maximized"])):is([uidensity=compact], :not([uidensity=compact])) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
	padding-inline-start: calc(var(--appbutton_in_titlebar) - 0.5rem) !important;
}

為甚麼在簡化後要加入 :is([sizemode="maximized"], :not([sizemode="maximized"])) 的看似累贅的表述，這就是經過試錯後得到的經驗了。

這樣寫出來的 CSS 樣式就很整齊，相較於過去的歷版來說都更有頭緒、有條理，而非亂寫一通。因此整理這篇經驗於茲。像是 additional_menubar_tabstoolbar_adjustments_115.css 就寫得比較亂，但是我已經沒有精力再去把它整理一遍了。畢竟，它能用。以及，它畢竟是歷史檔案了。

經驗: CSS 的寫作 (113-12-21)

导航菜单

搜索