スポンサーリンク

Firefox 69 以降でも userChrome.css を使う方法

この記事は約4分で読めます。

Firefox 69 以降でも userChrome.css を使う方法

こんにちは、さち です。

Firefox には、「userChrome.css」というファイルを作ることで、UI(Firefox のデザイン,見た目) などをいじれる機能があります。

これを使って、メニューバーに配置した「アドオン」のアイコンを右寄せにしていたのですが、Firefox 69 にアップデートしてから機能しなくなってしまいました。

スポンサーリンク

問題の詳細

  1. 下記の記事のとおり、userChrome.css を作成して、Firefox のメニューバーに配置した「アドオン」のアイコンを右寄せにしていました。
    Firefox:メニューバーに配置したアドオンアイコンを右寄せにする
    こんにちは、さち です。 今回は、Firefox Quantum(バージョン57以降)で メニューバーに配置したアドオンアイコンを右寄せにする方法 (メニューは左寄せにしつつ、アドオンアイコンだけを右寄せにする) につい...
  2. しかし、Firefox をバージョン「69」にアップデートすると……
    Firefox 69 以降でも userChrome.css を使う方法
  3. アドオンのアイコンが左寄せ(初期設定)に戻ってしまいました。
    Firefox 69 以降でも userChrome.css を使う方法
  4. 本来は、このように右寄せになるはずなんですが……。
    Firefox 69 以降でも userChrome.css を使う方法

Firefox 69 で何か仕様変更があり、「userChrome.css」が正常に機能しなくなってしまったみたいです。

解決方法

「userChrome.css」自体が廃止されたのかと思いましたが、そうではないようです。userChrome.css が機能しなくなった場合は、次の点を確認してみて下さい。

「about:config」の設定

「about:config」に userChrome.css の有効/無効を切り替える設定があります。

通常、旧バージョンの Firefox で userChrome.css を使っていた場合は、Firefox 69 以降でも自動的に「有効」になっているはずですが、念のため確認しておきます。

  1. アドレスバーに about:config と入力して、Enter キーを押します。
    Firefox の about:config
  2. 警告が表示されたら、「危険性を承知の上で使用する」をクリック。
    Firefox の about:config
  3. 「検索」に toolkit.legacyUserProfileCustomizations.stylesheets と入力。下に表示された項目の値が「true」になっていればOK。(なっていない場合は、項目をダブルクリックして値を「true」にする)
    Firefox 69 以降でも userChrome.css を使う方法

「userChrome.css」の適用先

  1. 旧バージョンの Firefox では、下記のような userChrome.css を使っていました。適用先(url)としていた chrome://browser/content/browser.xul に問題がありそうですね。
    @charset "UTF-8";
    
    @-moz-document url(chrome://browser/content/browser.xul) {
    
      #toolbar-menubar {
        display: flex !important;
        justify-content: flex-start !important;
      }
    
      #menubar-items {
        margin-right: auto !important;
        flex-shrink: 0 !important;
      }
    
    }
  2. 試しに、アドレスバーから chrome://browser/content/browser.xul を開くと、「ファイルが見つかりませんでした」と表示されました。旧バージョンでは Firefox の UI が表示されいたはずなんですが、廃止されたんでしょうか?
    Firefox 69 以降でも userChrome.css を使う方法
  3. 調べてみると、Firefox 公式サイトで情報を発見。「browser.xul」は「browser.xhtml」に名前が変更されたようです。Milestone(マイルストーン)に「Firefox 69」とあるので、これが原因とみて間違いなさそう。
    Firefox 69 以降でも userChrome.css を使う方法
  4. chrome://browser/content/browser.xhtml に変更して、上書き保存します。
    @charset "UTF-8";
    
    @-moz-document url(chrome://browser/content/browser.xhtml) {
    
      #toolbar-menubar {
        display: flex !important;
        justify-content: flex-start !important;
      }
    
      #menubar-items {
        margin-right: auto !important;
        flex-shrink: 0 !important;
      }
    
    }
  5. Firefox を再起動すると、userChrome.css が再び機能するようになりました。
    Firefox 69 以降でも userChrome.css を使う方法

適用先(url)を削除しても機能するので、そもそも適用先を書かなければ今回のようなトラブルは起きなかったと思います。

でも、書かないと関係ない所にまで CSS が適用されてしまう可能性が1%くらいはあるかもしれないし……。保険をかけて適用先の記述は残しておきます。

コメント

タイトルとURLをコピーしました