CSS スクロールバージェネレーター
スクロールバーの幅、トラック、サム、ホバーカラーをスタイリングし、実際の WebKit の結果と実際の Firefox の結果を隣り合わせで確認できます。2 つのまったく異なるブラウザーシステムを並べて比較します。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
Chrome、Safari、Edge は、::-webkit-scrollbar 疑似要素ファミリー (トラック、サム、サムのホバー状態、正確な幅、サムの border-radius) を用いてスクロールバーをスタイリングします。Firefox はこれらをすべて無視し、代わりに、後に CSS Scrollbars 仕様に導入された 2 つの標準プロパティ、scrollbar-width と scrollbar-color を読み取ります。これらは同じ機能の方言ではなく、実現可能な範囲が異なる別々の機能セットであり、ほとんどのスクロールバージェネレーターは WebKit の結果だけを表示することで、その差を静かに覆い隠しています。このツールは違います。
幅、トラックカラー、サムカラー、ホバーカラー、サムの角丸を一度設定すると、ツールは同じ入力から 2 つのルールセットを構築します。WebKit ブロックは ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb、およびその :hover 状態を左のデモボックスにスコープするため、そこで表示されるのは Chrome、Safari、Edge がレンダリングするものそのものであり、ブラウザー自身の実際のエンジンによるもので、シミュレートされたオーバーレイではありません。Firefox ブロックは、右のデモボックスに対して scrollbar-width と scrollbar-color を、そのブラウザー自身のエンジンを使用して設定します。そのため、このページを実際に Firefox で開いている場合にのみ、ボックスの見た目が異なります。WebKit ブラウザーではそこに自身のデフォルトのスクロールバーが表示され、ツールは Firefox の外観を借りたピクセルで偽装するのではなく、そのことを示します。
幅のマッピングは、この差を示す最も明確な例です。Firefox の scrollbar-width は、auto、thin、none のキーワードのみを受け付け、正確なピクセル値は受け付けません。このジェネレーターは、選択した幅を正直にマッピングし (8px 以下は thin、それより広い場合は auto になります)、結果のキーワードを入力の横に表示します。存在しないピクセルパーフェクトな Firefox の結果を作り出したりはしません。また、Firefox には、別のホバーカラー、独立したサムの border-radius、あるいは scrollbar-color の 2 番目の値ではないトラックカラーを設定する方法はありません。これらはこのツールの欠落ではなく、プラットフォームの永続的かつ実際的な制限です。
結合された CSS ブロックをコピーすると、両方のルールセットが、それぞれのコメントのもとにまとめて移動し、そのままスタイルシートに貼り付けることができます。コントロールを操作すると、すべてがあなたのブラウザー内でレンダリングおよび更新されます。アップロード、アカウント、サーバーとの通信は不要で、ページが読み込まれた後はオフラインでも動作し続けます。