CSS スクロールバー ジェネレーター

疑似要素の::-webkit-scrollbar ファミリを備えた Chrome、Safari、Edge スタイルのスクロールバー: トラック、サム、サムのホバー状態の個別のルールに加え、ピクセル単位の幅とサムの境界半径。 Firefox はこれらすべてを完全に無視し、代わりに、後に CSS スクロールバー仕様に組み込まれた 2 つの標準プロパティ、scroller-width と neighbors-color を読み取ります。これらは同じ機能の 2 つの方言ではありません。これらは上限が異なる 2 つの異なる機能セットであり、ほとんどのスクロールバー ジェネレーターは、WebKit の結果のみを表示することで、そのギャップを静かに埋め合わせます。これはそうではありません。

幅、トラックの色、サムの色、ホバーの色、サムの角の半径を 1 回設定すると、ツールは同じ入力から 2 つのルール セットを構築します。 WebKit ブロックのスコープは ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb とその :hover 状態で、左側のデモ ボックスに表示されるため、そこに表示されるものは、Chrome、Safari、Edge がレンダリングするものとまったく同じであり、シミュレートされたオーバーレイではなく、ブラウザー独自の実際のエンジンです。 Firefox ブロックは、同じブラウザー独自のエンジンを使用して、右側のデモ ボックスのスクロールバーの幅とスクロールバーの色を設定します。そのため、このページが実際に Firefox で開かれている場合にのみボックスの外観が異なります。 WebKit ブラウザでは、そこに独自のデフォルトのスクロールバーが表示されます。ツールは、借用したピクセルで Firefox の外観を偽るのではなく、そのように表示します。

幅のマッピングはギャップの最も明らかな例です。Firefox のスクロールバーの幅はキーワード auto、thin、または none のみを受け入れます。正確なピクセル数は受け入れられません。このジェネレーターは、存在しない偽のピクセル完璧な Firefox 結果をでっち上げるのではなく、選択した幅を正直にマップし (8 ピクセル以下は細くなり、それより広いものは自動になります)、結果のキーワードを入力の横に表示します。 Firefox には、個別のホバー カラー、独立したサム ボーダー半径、または単にスクロールバー カラーの 2 番目の値ではないトラック カラーを設定する方法もありません。これらはプラットフォームの永続的な実際の制限であり、このツールの省略ではありません。

結合された CSS ブロックをコピーすると、両方のルール セットが一緒に移動し、それぞれが独自のコメントの下に置かれ、そのままスタイルシートに貼り付けることができます。コントロールをドラッグすると、すべてが独自のブラウザでレンダリングおよび更新されます。アップロードやアカウント、サーバーの往復は必要なく、ページが読み込まれるとオフラインで動作し続けます。