【Firefox】サイドバーを自動開閉できるようにする 132.0向けの追加設定

Tips

概要

自分の趣向にあうサイドバーの自動開閉するためのアドオンや userChrome が無かったため、以前、以下の記事にて紹介している userChrome で自動開閉を行うようにカスタマイズしていました。

2022年10月21日 | なべりうむ
日々の業務で役立った対応や趣味に関する技術などを忘れないように記録しています
naberium.com
【firefox】サイドバーを自動開閉できるようにする-firefox106/

最新版（132.0）に更新したところ、サイドバーを開いた際に縦線が入るようになっていました。
下図矢印の部分です。

この縦線がタブの表示にかぶり気になるため、userChrome で対応できないか確認してみました。

サンプルコード

/* サイドバーを自動開閉するようにする （左側用）*/
:root {
  --thin-tab-width: 20px;
  --wide-tab-width: 200px;
}
#sidebar-box {
  position: relative !important;
  overflow-x: hidden !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
  z-index: 1 !important; 
  transition: all .1s ease; 
  order: 2 !important;　 /* 今回追記 */
}

#sidebar-box:hover {
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
  order: 4 !important;　 /* 今回追記 */
}

#sidebar-box>#sidebar {
  opacity: 0 !important;
}

#sidebar-box:hover>#sidebar {
  opacity: 1 !important;
} 

#sidebar-splitter {
} 

/* サイドバーを自動開閉するようにする （右側用）*/
:root {
  --thin-tab-width: 20px;
  --wide-tab-width: 200px;
}
#sidebar-box {
  position: relative !important;
  overflow-x: hidden !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
  z-index: 1 !important; 
  transition: all .1s ease; 
  order: 2 !important;　 /* 今回追記 */
}

#sidebar-box:hover {
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
  margin-left: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
  order: 4 !important;　 /* 今回追記 */
}

#sidebar-box>#sidebar {
  opacity: 0 !important;
}

#sidebar-box:hover>#sidebar {
  opacity: 1 !important;
} 

/* サイドバーのヘッダーを非表示にする */
#sidebar-header {
  display: none !important;
}

詳細

userChrome 全体の内容については以前の記事をご参考ください。

今回、sidebar-box と sidebar-box:hoverに order: x !important を追記して改善しました。

order は flex アイテムの配置順を決めるプロパティで、order の値が小さい flex アイテムから順番に配置されます。

今回この縦線が何かを調べたところ、 sidebar-splitter という flex アイテムで描画されていることがわかり、order:3 であることがわかりました。ちなみに sidebar-box は order:2 でした。

今回、hover 時に sidebar-box の order プロパティ を sidebar-splitter より後に配置されるように order: 4 にすることで問題の縦線を消すのではなく sidebar-box で隠す方法をとりました。

!important は CSSでスタイルを反映させる際の優先順位を最大まで上げるための宣言です。今回 order プロパティが Style に記述され優先度が高かったため、上書きするために !important を宣言しています。

この userChrome を読み込むと以下の様に hover 時に縦線が消えるようになりました。

おすすめ書籍

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

1冊ですべては身につきませんが、HTML と CSS について丁寧に解説されています。全体像を理解できるので初心者にもお勧めです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
created by Rinker
CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSS について学ぶのであれば必須の1冊です。丁寧に解説されていますので内容についてもわかりやすいです。CSS 設計で重要視しなければいけないポイントや、保守性の高いコードを書くためのルールが具体的な例と一緒に書かれています。CSS だけでなく他のコードを書く際にもこの考え方が役に立つためおすすめします。ただ、書籍版は分厚いのでご注意ください。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集
created by Rinker

関連記事

【Firefox】サイドバーを自動開閉できるようにする Firefox 最新版対応
OS を再インストールした際、作成していた userChrome.css をなくしてしまい面倒なことになりましたので、備忘録として記録しておきます。 概要 Firefox57より前はアドオンの設定でサイドバーを自動開閉できていたのですが、F...
naberium.com

おわりに

今回のバージョンアップの影響により表示される様になった縦線について、userChrome にて表示しなくなる方法を紹介しました。よくよく考えると、自分の好みで表示領域の幅を変動させないようなものを作った際の自分のミスかもしれないですね。userChrome でのカスタマイズは便利なのですが、バージョンアップの影響により突然使用できなくなることがあるのが面倒ではあります。ブラウザのIDなどを調べる方法もわかりましたので、また今度紹介できればと思います。

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