Firefox 97に対応するanti-Proton CSSの微修正

筆者はFirefoxをメインブラウザーとして使っています。これは事実です。そして、自分かブラウザーのどちらかが引退するまで使い続けるつもりです。これも事実です。ただ、新しくなったUIデザインには正直ピンときません。そのデザインは「Proton」と呼ばれ、数ヶ月前にFirefoxへ搭載されました。当初は設定のトグルで無効化できたのですが、今ではそのトグル自体が削除されてしまいました。

常識的で作業しやすいUIレイアウトを取り戻すべく、筆者はCSSファイルへの一連の変更でFirefoxを手動カスタマイズする道を選びました。この愉快な冒険の詳細は、Protonを無効化する方法をまとめたガイド記事に記載しています。タブを見やすくし、コンテナータブに色を付け、URLバーを整理し、さらに細かな調整も加えてきました。ところが、先日リリースされたバージョン97で、コンテナータブの表示が少しおかしくなっていることに気づいたのです。CSSルールが以前のように正しく機能しなくなりました。本記事では、カスタマイズしたインターフェースを再びクールな見た目に戻すための、ほんの小さな修正セットを紹介します。すでに筆者のanti-Protonチューニングを導入している方なら、きっと役立つはずです。

問題の詳細

Firefox 97では、次のような現象が起こります。問題は2つです。1つ目は、アクティブなコンテナータブで上部ボーダーのハイライトが一部隠れてしまい、どのタブがアクティブなのか分かりづらくなる点です。加えて、タブの背景色部分がタブバーの上端より少し突き出してしまいます。2つ目は、非アクティブなタブで背景部分がかなり大きく突き出しており、見た目が雑に感じられる点です。

これは言ってみれば自業自得の問題だと百も承知です。Firefoxのある課題を解決しようとして、確かに解決はしたものの、副作用としてこうした不具合が生じたわけです。それでも構いません。良好で明瞭なコントラストと、タブの判別しやすさを備えた「普通のUI」を手に入れるために、筆者が進んで支払う代償だからです。Protonへの不満を繰り返すつもりはありません。

解決策

現時点での、コンテナータブ用のCSSは以下の通りです。

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-bottom: var(--identity-tab-color) !important;
  border-top: 3px solid red !important;
  opacity: 0.8 !important;
}

これを、次のように修正します。

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-bottom: var(--identity-tab-color) !important;
  opacity: 0.8 !important;
}

.tabbrowser-tab[usercontextid] .tab-background {
  border-top: 3px solid red !important;
  padding-top: 3px !important;
}

.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
  border-top: 1px solid rgba(130, 130, 130, 0.5) !important;
  padding-top: 3px !important;
}

まず、コードを複数のブロックに分割しました。アクティブなコンテナータブと非アクティブなコンテナータブでは、上部ボーダーに対して異なる調整が必要になるからです。アクティブなタブの見苦しいはみ出しを解消するには、padding-top: 3px を追加するだけで十分です。

非アクティブなタブは、次のセレクターで識別されます。

.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {

こちらは、上部ボーダーを通常のタブとまったく同じ仕様に変更するとともに（これまでの2本のガイド記事を参照してください）、padding の宣言も追加する必要があります。こうすることで、タブの背景が「短く」なり、タブバーの上端からはみ出さなくなります。さらに、ボーダーが他のすべてのタブと揃うため、統一感のある美しい外観になります。

以上で完了です！

まとめ

こうしたチューニングには、整合性の問題とメンテナンスコストが伴うことは重々承知しています。Firefox UIのあらゆる細かい変更に逐一対応することは到底できませんし、時折小さな不具合が生じるかもしれません。とはいえ、それらは些細なもので、すぐに修正できます。一方で、見た目の劣るブラウザーを常に使い続けるのは論外です。決して快適な状況ではありませんが、それでもなおFirefoxは最高のブラウザーです。実用面・思想面の両方の理由から、流行に流されることなく、皆さんにぜひ使っていただきたいと思います。

さて、あなたがオタクなら——ここを読んでいる時点で、そうでないはずがありませんが——物事を整然と、清潔に、読みやすく、人間工学的に、効率的に保ちたいタイプでしょう。だとすれば、バージョン91以降でFirefoxのUIの見た目をすでにカスタマイズしているはずです。もしかすると、筆者のチューニングのいくつかを導入しているかもしれませんね。もしそうなら、Firefox 97でちょっとした違和感に出くわした際の、新たな仕上げの一手として今回の修正を活用してください。それでは、ごきげんよう。また近いうちにお会いしましょう。

それでは！