いや、なんとなく…ね

★ [Firefox][Memo][Tips] -moz-appearanceというプロパティを覚えた

外観を変更するためにuserChrome.cssをいじくっても全然変化が現れない要素があって今までずっと疑問だったのですが、DOM InspectorおよびMozilla CSS 拡張仕様 - MDNとにらめっこしていて、-moz-appearanceというプロパティにたどり着きました。

-moz-appearance は、OS のテーマをベースにしたプラットフォーム用のスタイル付けを使用して要素を表示するために、Mozilla ブラウザによって使用されます。

例えばDefaultテーマのステータスバー。こんな感じ。

これを、reinみたいにフラットな雰囲気（こんな感じ）にしたいと思い上下のボーダを非表示にしようと、

statusbarpanel {
  /* ボーダを非表示 */
  border-bottom: none !important;
  border-top: none !important;
}

と記述しても効果が現れません。これがずっと疑問だったのでした。この要素には、

-moz-appearance: statusbar;

と指定してあって、現在のデスクトップのステータスバーと同じような外観が適用されます。しかも他のプロパティより優先順位が高いようです。そこで上記に、

statusbarpanel {
  -moz-appearance: none !important;
 
  /* ボーダを非表示 */
  border-bottom: none !important;
  border-top: none !important;
}

と記述することにより、無事に思惑通りの効果が現れます*1。こんな感じ。

はっきり言ってかなり手探り状態でいじくってますが（==よく理解はしていない）、一応自分の望む結果が出ているのでよしとしましょう（ぉ

それにしても、複雑怪奇な構造とうんざりするほど膨大な要素があって、テーマを作成される方々はほんとすごいですねぇ。