查看“︁經驗: CSS 的寫作 (113-12-21)”︁的源代码

{{DISPLAYTITLE:經驗: CSS 的寫作<small> {{spmono|(113-12-21)}}</small>}}
這裡記錄一下撰寫類似 [[Template:Firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-128.css|{{spmono|ad<wbr />di<wbr />ti<wbr />on<wbr />al<wbr />_<wbr />me<wbr />nu<wbr />bar<wbr />_<wbr />tab<wbr />s<wbr />to<wbr />ol<wbr />bar<wbr />_<wbr />ad<wbr />ju<wbr />st<wbr />me<wbr />nt<wbr />s<wbr />_<wbr />128<wbr />.<wbr />css}}]] 這類 CSS 樣式時的經驗。

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

首先需要確定的是總共有幾種情況{{cmd}}
* 對於 <syntaxhighlight lang="css" inline>#main-window</syntaxhighlight> {{spmono|<small>(Firefox 主程式)</small>,}} 有情況三種如下：<ul class="hlist"><li><syntaxhighlight lang="css" inline>[sizemode="maximized"]</syntaxhighlight> {{spmono|<small>(最大化)</small>;}}</li><li><syntaxhighlight lang="css" inline>[sizemode="fullscreen"]</syntaxhighlight> {{spmono|<small>(全螢幕)</small>;}} 以及</li><li><syntaxhighlight lang="css" inline>:not([sizemode="fullscreen"], [sizemode="maximized"])</syntaxhighlight> {{spmono|<small>(視窗)</small>;}}</li></ul>
* 對於<syntaxhighlight lang="css" inline>#toolbar-menubar</syntaxhighlight> {{spmono|<small>(選單列)</small>,}} 有情況三種如下：<ul class="hlist"><li><syntaxhighlight lang="css" inline>[autohide="true"][inactive="true"]</syntaxhighlight> {{spmono|<small>(隱藏)</small>;}}</li><li><syntaxhighlight lang="css" inline>[autohide="true"]:not([inactive="true"])</syntaxhighlight> {{spmono|<small>(暫時喚出)</small>;}} 以及</li><li><syntaxhighlight lang="css" inline>[autohide="false"]</syntaxhighlight> {{spmono|<small>(常駐)</small>;}} 以及</li></ul>
* 對於有否啟用標題列，則有情況兩種如下：<ul class="hlist"><li><syntaxhighlight lang="css" inline>#main-window[tabsintitlebar]</syntaxhighlight>{{spmono|;}} 和</li><li><syntaxhighlight lang="css" inline>#main-window:not([tabsintitlebar])</syntaxhighlight>.</li></ul>
因此便總共有 3 × 3 × 2 = 18 種情況。根據這 18 種情況，可以先打一個空白的草稿 CSS 檔案如下{{cmd}}
{{stgrn|CSS draft <small>(stage 0)</small>}}
<syntaxhighlight lang="css" line copy>
#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 {

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

接下來開始根據列出的情況逐一去測試這 18 種情況，並對應地寫入恰當的內容。當發現顯而易見的重複項目時，可以進行簡單的合併，這樣便得到了一個寫完的草稿如下{{cmd}}
{{stgrn|CSS Draft <small>(stage 1)</small>}}
<syntaxhighlight lang="css" line>
#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;
}
</syntaxhighlight>
此處可見，最後一則樣式是情況外的情況，當在測試過程中發現介面上出現異常元素時，就需要及時透過 {{spk|CTRL}} {{spmono|+}} {{spk|ALT}} {{spmono|+}} {{spk|SHIFT}} {{spmono|+}} {{spk|I}} 來找到並解決它。

之後，便可以開始第一輪的「合併同類項」，並得到結果如下{{cmd}}
{{stgrn|CSS Draft <small>(stage 2)</small>}}
<syntaxhighlight lang="css" line>
#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;
}
</syntaxhighlight>
最後，在此基礎上，再透過 <syntaxhighlight lang="css" inline>:is()</syntaxhighlight>, <syntaxhighlight lang="css" inline>:not()</syntaxhighlight> 的使用來簡化那些堆疊的項目，並在適當位置加入前文提到的有關介面緊湊程度的表述，便得到了最終的結果{{cmd}}
{{firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-128.css}}
至於為甚麼
<syntaxhighlight lang="css" line start="22">
#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;
}
</syntaxhighlight>
不能直接簡化成
<syntaxhighlight lang="css" line>
#TabsToolbar {
	padding-inline-start: 0 !important;
}
</syntaxhighlight>
而是要寫成最終版本中
<syntaxhighlight lang="css" line>
#main-window #toolbar-menubar:is([autohide="false"], :not([inactive="true"])) ~ #TabsToolbar,
#main-window:not([tabsintitlebar]) #TabsToolbar {
	padding-inline-start: 0 !important;
}
</syntaxhighlight>
的樣子，以及最終版本的第二則中
<syntaxhighlight lang="css" line start="5">
#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;
}
</syntaxhighlight>
為甚麼在簡化後要加入 <syntaxhighlight lang="css" inline>:is([sizemode="maximized"], :not([sizemode="maximized"]))</syntaxhighlight> 的看似累贅的表述，這就是經過試錯後得到的經驗了。

這樣寫出來的 CSS 樣式就很整齊，相較於過去的歷版來說都更有頭緒、有條理，而非亂寫一通。因此整理這篇經驗於茲。像是 [[Template:Firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-115.css|{{spmono|ad<wbr />di<wbr />ti<wbr />on<wbr />al<wbr />_<wbr />me<wbr />nu<wbr />bar<wbr />_<wbr />tab<wbr />s<wbr />to<wbr />ol<wbr />bar<wbr />_<wbr />ad<wbr />ju<wbr />st<wbr />me<wbr />nt<wbr />s<wbr />_<wbr />115<wbr />.<wbr />css}}]] 就寫得比較亂，但是我已經沒有精力再去把它整理一遍了。畢竟，它能用。以及，它畢竟是歷史檔案了。