⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de barres de défilement CSS

Définissez la largeur, la piste, le pouce et la couleur au survol d’une barre de défilement, puis voyez le résultat réel WebKit à côté du résultat réel Firefox — deux systèmes de navigateur véritablement différents, côte à côte.

🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.

10px
8px

Stylisé avec les pseudo-éléments ::-webkit-scrollbar — cette boîte est rendue par le véritable moteur de votre navigateur s'il s'agit de Chrome, Safari ou Edge.

Stylisé avec les propriétés scrollbar-width et scrollbar-color de Firefox. Les autres navigateurs les ignorent et affichent leur propre barre de défilement par défaut — ouvrez cette page dans Firefox pour voir le résultat réel.

Firefox n'a pas de couleur de survol distincte, de rayon de bordure pour le curseur ni de style de piste indépendant — seulement scrollbar-width, mappé ici depuis l'épaisseur choisie vers le mot-clé réel : thin

Traitement en cours... 0%

Résultat

Chrome, Safari et Edge personnalisent les barres de défilement avec la famille de pseudo-éléments ::-webkit-scrollbar : des règles séparées pour la piste, le pouce et l’état au survol du pouce, plus une largeur en pixels et un border-radius pour le pouce. Firefox ignore tout cela et utilise deux propriétés standard, scrollbar-width et scrollbar-color, introduites plus tard dans la spécification CSS Scrollbars. Il ne s’agit pas de deux dialectes d’une même fonctionnalité — ce sont deux ensembles de fonctionnalités distincts avec des plafonds différents, et la plupart des générateurs de barres de défilement masquent cette différence en n’affichant que le résultat WebKit. Celui-ci ne le fait pas.

Définissez une fois la largeur, la couleur de piste, la couleur du pouce, la couleur au survol et le rayon d’arrondi du pouce, et l’outil construit deux jeux de règles à partir des mêmes réglages. Le bloc WebKit circonscrit ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb et son état :hover à la zone de démonstration de gauche, de sorte que ce que vous y voyez est exactement ce que Chrome, Safari et Edge affichent — le vrai moteur du navigateur, pas une surcouche simulée. Le bloc Firefox définit scrollbar-width et scrollbar-color sur la zone de démonstration de droite en utilisant le moteur de ce même navigateur, c’est pourquoi la zone n’a un aspect différent que lorsque cette page est effectivement ouverte dans Firefox ; dans un navigateur WebKit, elle y montre sa propre barre de défilement par défaut, et l’outil le signale plutôt que d’imiter l’apparence de Firefox avec des pixels empruntés.

La correspondance de la largeur est l’exemple le plus clair de la différence : scrollbar-width de Firefox n’accepte que les mots-clés auto, thin ou none — jamais une valeur exacte en pixels. Ce générateur convertit honnêtement la largeur que vous choisissez (8 px ou moins devient thin, toute valeur supérieure devient auto) et affiche le mot-clé résultant à côté de votre saisie, au lieu d’inventer un faux résultat Firefox pixel-perfect qui n’existe pas. Firefox ne permet pas non plus de définir une couleur distincte au survol, un border-radius indépendant pour le pouce ou une couleur de piste qui ne serait pas simplement la seconde valeur de scrollbar-color — il s’agit de limitations réelles et permanentes de la plateforme, pas d’omissions dans cet outil.

Copiez le bloc CSS combiné, et les deux jeux de règles voyagent ensemble, chacun sous son propre commentaire, prêts à copier dans une feuille de style. Tout s’affiche et se met à jour dans votre propre navigateur lorsque vous déplacez les curseurs — aucun téléversement, aucun compte, aucun aller-retour serveur, et cela continue de fonctionner hors ligne une fois la page chargée.

Vous appréciez cet outil ? Vous trouvez ce produit utile ? Vous y voyez du potentiel et souhaitez le soutenir ?

🛡️
Exécuté dans le navigateur

Vos fichiers et données ne quittent jamais cet appareil. Le traitement est entièrement hors connexion. 100 % sécurisé.

Formats acceptés et règles

  • Commandes partagées — largeur, couleur de piste, couleur du pouce, couleur au survol, rayon d’arrondi du pouce — pilotent les deux moteurs depuis les mêmes réglages.
  • Correspondance honnête de la largeur : Firefox ne supporte que thin, auto ou none, donc la valeur exacte en pixels que vous choisissez est convertie vers le mot-clé le plus proche et affichée à côté de votre saisie.
  • Sortie CSS combinée et copiable avec les règles pseudo-éléments WebKit et les propriétés standard Firefox, clairement commentée.

Principaux avantages

✓ Deux zones de démonstration en direct affichent la vraie barre de défilement de chaque moteur — la zone WebKit montre toujours le résultat réel dans Chrome, Safari et Edge, sans rendu simulé.
✓ Les limites de Firefox sont montrées, pas cachées : la couleur au survol, l’arrondi du pouce et le style indépendant de la piste n’existent tout simplement pas dans Firefox, et l’outil le dit clairement au lieu de faire semblant.
✓ Un seul bloc CSS copiable regroupe les deux jeux de règles avec un commentaire de secours, prêt à coller tel quel.

Cas d'utilisation

  • • Personnalisez la barre de défilement d’une barre latérale de tableau de bord pour qu’elle corresponde à la palette de la marque, tout en voyant exactement jusqu’où ce style est pris en charge dans Firefox avant de le déployer.
  • • Récupérez le mot-clé CSS scrollbar-width réellement utilisé par Firefox pour une épaisseur donnée, au lieu de devoir deviner si la valeur thin ou auto est la plus proche.
  • • Copiez en une seule fois un bloc CSS qui contient à la fois les règles WebKit avec pseudo-éléments et les propriétés standard de Firefox, chacune clairement commentée, et collez-le directement dans une feuille de style.