Firefox 91-94 &視覚的および人間工学的な追加の調整

毎朝、私は起きて鏡を見て、「私は流行に敏感ですか？」と自問します。そして、答えは常に断固としてノーなので、人生における私の選択は、審美的にも機能的にも優れていることを知っています.つまり、私の Firefox 78 ESR が無意味な Proton インターフェースを備えた Firefox 91 ESR に変わるのを見たとき、それは悪い日になるだろうとわかっていました.

現在、Firefox は、どのプラットフォームでも私のデフォルトのブラウザーとして選択されています。これまでも、今後もそうであることを願っていますが、流行に敏感なトレンドに屈することはありません。私は子供でもなければ、太平洋沿岸の近くに住んでいるわけでもありません。したがって、明快さ、コントラスト、優れた鮮明な色。専用のチュートリアルで Proton のナンセンスのほとんどを元に戻す方法を既に説明しましたが、ここでさらにいくつかのヒントを紹介したいと思います。私に従ってください。

コンテナ タブ

結局のところ、このアップグレードでは、Windows 版の Firefox には特別な注意が必要です。この点で、コンテナ タブのアクセント ラインには満足できませんでした。タブ幅よりも短くレンダリングされるため、ばかげて見えます。そのため、その日の最初の注文は、アクセント ラインを削除し、タブ全体の色を使用することでした。

.tabbrowser-tab[usercontextid] .tab-context-line {
表示:なし !重要;

最初のチュートリアルで説明したように、userChrome.css に追加する必要がある上記の CSS コードは、コンテナー タブのアクセント ラインのみを削除します。コンテナー タブをより明確にするために、背景にコンテキスト カラーを使用し、アクセント ラインの代わりに真っ赤な上部境界線を使用します。

.tabbrowser-tab[usercontextid] .tab-background {
background:var(--identity-tab-color) !important;
border-top:3px ベタ赤 !重要;
不透明度:0.6 !重要;
}

繰り返しになりますが、アクセント カラーが必要な場合は、良い方法で、タブ コンテキスト ライン機能を上部の境界要素と組み合わせて、コンテキスト コンテナーの色を背景に使用しないようにすることができます。したがって、コードの 2 番目のブロック (上記) は次のようになります。

.tabbrowser-tab[usercontextid] .tab-background {
border-top:3px solid var(--identity-tab-color) !important;
}

通常のタブ

Linux の例で使用した境界線の不透明度は少し厳しいと感じたので、微調整:

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color:color-mix(in srgb, currentColor 5%,トランスペアレント）;
境界線:1px ベタ rgba(0, 0, 0, 0.3) !重要;
}

.tabbrowser-tab[selected="true"] .tab-background {
border-left:1px solid rgba(0, 0, 0, 0.3) !important;
border-right:1px solid rgba(0, 0, 0, 0.3) !重要;
border-top:3px ベタ白 !重要;
}

URL バー セグメントからのタブ (ナビゲーション バー) の分離

デフォルトでは行がありません。これは面倒です。追加できます。

#nav-bar {
border-top:1px solid rgba(0, 0, 0, 0.3) !重要;
}

左上行からのタブ行マージン

タブ行の左マージンと上マージンが等距離でないことに気付いたかもしれません。この要素に小さな左マージンを追加することで、これを修正できます。タブと URL バーを保持するフレームは、navigator-toolbox と呼ばれます。

#navigator-toolbox {
margin-left:2px !重要;
}

Urlbar の微調整

ここでは多くの変更が必要です。まず、URL のすべての要素がまったく同じ色で表示されるようにしました。先ほど言ったように、私は子供ではありません。どのドメインにアクセスしているかを示すために 3 つの色は必要ありません。 about:config を開き、次の設定を false に切り替えます:

browser.urlbar.formatting.enabled

次に、urlbar の背景が白で、境界線があることを確認しました。そのような低コントラストのナンセンスはありません。

#urlbar-background {
背景色:白 !重要;
境界線:1px ベタ rgba(0, 0, 0, 0.1) !重要;
}

パディングとマージンも少し変更したので、見栄えが良くなりました - 完全に見た目だけです:

#urlbar {
padding-top:2px !重要;
margin-top:2px !重要;
margin-bottom:3px !重要;
}

検索ボックス

アドレスバーの右側にある検索ボックスでも同じことができます。

#searchbar {
margin-top:1px !重要;
background-color:白 !重要;
境界線:1px ベタ rgba(0, 0, 0, 0.1) !重要;
}

エクストラカラー

私の青色のアクセントが好きで、それを URL バー、検索バー、およびナビゲーション バーの境界線に使用したい場合は、rgba(0, 0, 0, 0.1) のインスタンスを rgba(10, 132, 255, 0.3)、たとえば。任意の不透明度を使用できます (4 つの最後の数字)。たとえば、検索バーの宣言:

#searchbar {
margin-top:1px !重要;
background-color:白 !重要;
境界線:1px ベタ rgba(10, 132, 255, 0.3) !重要;
}

結果、スクリーンショット、安心!

さぁ、良い整頓されたものをどうぞ:

アクセント ラインのないコンテナー タブ、上部の赤い余白。

URL バーと検索ボックスは背景が白で、テキストは一様に色分けされています。

Urlbar の余分なパディング、上下。

タブの境界線の色に合わせて配置されたナビゲーション バーの線。

左上のタブ行の配置が改善され、アクティブなタブのアクセント カラー (上部の境界線) が追加されました。

コンテナー タブに戻り、アクセント ラインの代わりに上部の境界線をコンテキスト カラーに設定します。

そして、いたるところにいくつかの幸せな色があります！

最後に、これがデフォルトです:

結論

どうぞ。 OCD の悪魔はもう一度休むことができます。ブラウザー インターフェース全体の色とコントラストが (まだ) 間違っているため、結果はまだ完全ではありませんが、変更の数をできるだけ少なくし、サードパーティ ツールをまったく使用しないように常に努めてきました。これは Firefox を素晴らしいものにするわけではありませんが、それなりに使いやすいものにしています。本当に悲しい部分は？開発チーム全体が単に無視しているように見える 10 以上の人間工学的問題を 1 時間以内に修正することができました。そして何のために？グレイ・オン・グレイ・ナンセンス?

最初のチュートリアルで概説した情報に加えて、ここにある新しいものを使用すると、まともなクロスプラットフォームの Firefox エクスペリエンスに十分な CSS 調整ができるはずです。したがって、適切なタブ区切り、適切な色、および白い背景の URL バーを使用できます。うまくいけば、私はあなたの人生を楽にすることができました.悲しいことに、私が本当に使いたいブラウザは Firefox だけです。でもねえ、それがいわゆる現代の生活です。しかし、私たちは別の小さな戦いを繰り広げました。健全なブラウザ ユーザー 1、流行に敏感なユーザー 0.

乾杯。