サイトの一部に横スクロールの表や、高さを決めたお知らせ欄を置くと、スクロールバーの色をデザインに合わせたいという話がよく出ます。そのとき長く使われてきたのが、::-webkit-scrollbar で始まる一連の擬似要素です。9月15日に公開されたFirefox 156では、この古い書き方の扱いが少し変わりました。目立たない変更ですが、既存サイトのCSSを見直すきっかけになりそうなので紹介します。

Firefox 156で変わった判定の結果

MDNの開発者向けリリースノートによると、Firefox 156では @supports selector(::-webkit-scrollbar) という条件が、すべてのサイトで偽を返すようになりました。反対に @supports not (selector(::-webkit-scrollbar)) は真になります。

背景には、Firefox 155で入った仕組みがあります。設定で指定された一部のドメインに限って、Firefoxは ::-webkit-scrollbar の指定を実際に反映しています。156でもその反映自体は続きますが、対応しているとは答えなくなりました。リリースノートの説明では、多くのサイトがこの判定を関連する擬似要素一式が使える合図として扱っている一方、Firefoxは -thumb や -track といった仲間の擬似要素には対応していないため、とされています。

結果として、標準のスクロールバー指定を @supports not (selector(::-webkit-scrollbar)) の中に書いていたサイトでは、Firefoxでもその指定が適用されるようになります。

標準の指定はすでに主要ブラウザで使える

標準側の手段は、scrollbar-color と scrollbar-width の二つのプロパティです。MDNの scrollbar-color のページでは、2025年12月から主要ブラウザの最新版でそろって使える機能(Baseline 2025)として扱われています。

書き方は単純で、scrollbar-color に色を二つ並べると、最初がつまみ(サム)、二つ目が溝(トラック)の色になります。ルート要素に指定すれば、ページ全体のスクロールバーにも効きます。一方の ::-webkit-scrollbar はどの標準にも含まれない独自仕様で、つまみや上下のボタンまで細かく作り込めるかわりに、ブラウザによって効いたり効かなかったりします。

注意したいのは両者の優先関係です。MDNによると、ある要素の scrollbar-color や scrollbar-width の計算値が auto 以外だと、ブラウザはその要素の ::-webkit-scrollbar 系の指定を無視します。しかも scrollbar-color は継承されるため、親要素に色を指定しただけで、子の要素に書いた独自スクロールバーが効かなくなることがあります。その要素で scrollbar-color: auto を指定し直せば、独自の見た目が戻るとされています。

既存サイトで確かめておきたい書き方

MDNが紹介している代替の書き方は、まず @supports (scrollbar-color: auto) で標準プロパティが使えるかを確かめ、使えないブラウザに向けてだけ @supports selector(::-webkit-scrollbar) の中に独自の擬似要素を書く、という二段構えです。標準を先に置き、古い書き方を補助に回す形なので、今回のFirefoxの変更とも食い違いません。

見直しの対象になりやすいのは、以前に作ったテーマやページ単位の追加CSSで、Firefoxだけを別扱いにするつもりで ::-webkit-scrollbar の判定を分岐に使っているケースです。判定の前提が変わったので、Firefoxで見た目が変わっていないか一度開いて確認しておくと安心です。スクロールバーを display: none で消している箇所があれば、ブラウザごとに同じように消えているかもあわせて見ておきたいところです。

色を変える前に考えたいこと

MDNは、スクロールバーの見た目はなるべく既定のままにしておくよう勧めています。見慣れた形から離れると、使い勝手が損なわれやすいためです。変える場合は、つまみと溝の色の差を十分にとること(コントラスト比3対1が目安)、独自に作り込むなら指で触れる大きさを確保することが挙げられています。なお、ハイコントラスト表示のような強制カラーモードでは、scrollbar-color は自動的に auto に戻ります。

中小企業のサイトでも、ブランドカラーに合わせてスクロールバーまで塗りたいという要望は珍しくありません。色を合わせる程度なら、今は標準の二つのプロパティで十分に届きます。細かな作り込みは古い擬似要素に任せるとしても、土台を標準側に置いておくほうが、今回のようなブラウザ側の変更にも振り回されにくくなるはずです。