Firefoxでの完全なuserChrome.css仕様
FirefoxのuserChrome.cssファイルについてはすでにたくさんの質問がありました。これらのほとんどは、Mozillaからのこのファイルの完全な仕様、ブラウザに影響を与えるcssタグの完全なリスト、およびそれらの影響が何であるかが明らかにないという事実から生じています。代わりに、人々は試行錯誤に頼っています。また、あるバージョンで機能するいくつかのトリックは、新しいバージョンではすぐに時代遅れになります。
そのような仕様が実際に利用できないのか、Mozillaがそれをリリースせず（そのような仕様がない場合）、最新の状態に保たないのが合理的かどうか疑問に思いました。
UserChrome.cssを介して微調整できるcssタグの完全なリストを見つける方法は何でしょうか？
一般的に userChrome.css で変更しようとするものは、ブラウザクロームとして知られており、ブラウザの外部の部分です。 Webページのコンテンツ。これには、タブバー、アドレスバーなどが含まれます。これをDOMインスペクターで開いて、変更する要素をターゲットにする CSSセレクター を特定できるようにします。
保証はありません。変更したものはすべて、次のバージョンで破損する可能性があります。利点は、限られたAPIをいくつか指定した場合よりも、はるかに細かく柔軟性が得られることです。
現在のバージョンでどの要素のスタイルを変更できるかを理解するには、2つの方法があります。
インスペクターをページ上で開く最も簡単な方法は、chrome://browser/content/browser.xhtmlに移動することです。これにより、タブのコンテンツ領域内でブラウザーchromeが開き、見た目がおかしなダブルになります。窓：
ここから、 ページインスペクター ツールを開きます。 開く にはいくつかの方法がありますが、個人的には F12 キーボードショートカット。実行すると、[検査]タブの下にDOMツリーが表示されます。これには、ブラウザのクロム全体が含まれます。たとえば、ブラウザのボタンは#navigator-toolbox #nav-barの下にあり、メニューは#mainPopupSetの下にあり、サイドバーは#browser #sidebar-boxの下にあります。 重要な要素の概要とそれらのセレクター ジャンプオフポイントとして使用できます。
次に、ページインスペクターを使用して 要素を選択 、および 既存のCSSルールを表示 にできます。ツリー内の要素を右クリックし、コンテキストメニュー項目の[コピー]-> [CSSセレクター]を使用して、userChrome.cssで使用する簡単なセレクターをすばやく取得できますが、ある程度理解している場合は最適です。 CSSセレクターの基本 なので、最適なものを見つけることができます。
ページインスペクターは、ブラウザーのクロムではなく、ページのコンテンツを検査することを忘れないでください。 chromeinsideページのコピーをコンテンツとして起動したため、この場合にのみ機能します。
ブラウザchromeを検査するもう1つの方法は、 Browser Toolbox を使用することです。これにより、通常のライブウィンドウを検査できます。 chromeをコンテンツとして開くよりもハッキーではありませんが、開始するのが少し複雑で、単純なスタイル変更にはあまりメリットがありません。