經驗: 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)

导航菜单

搜索