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

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

Stylisez la largeur, la piste, le pouce et la couleur de survol d'une barre de défilement, puis voyez le vrai résultat WebKit à côté du vrai résultat Firefox - deux systèmes de navigation véritablement différents, côte à côte.

10px
8px

Stylé avec des pseudo-éléments ::-webkit-scrollbar — cette boîte s'affiche via le moteur réel 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 ici 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 de pouce ou de style de piste indépendant - seulement la largeur de la barre de défilement, mappée ici de l'épaisseur choisie au mot-clé réel : thin

Traitement... 0%

Résultat

Barres de défilement de style Chrome, Safari et Edge avec la famille de pseudo-éléments ::-webkit-scrollbar : règles distinctes pour la piste, le pouce et l'état de survol du pouce, plus une largeur exacte au pixel près et un rayon de bordure du pouce. Firefox ignore complètement tout cela et lit à la place deux propriétés standard, scrollbar-width et scrollbar-color, qui sont ensuite entrées dans la spécification CSS Scrollbars. Ce ne sont pas deux dialectes de la même fonctionnalité : ce sont deux ensembles de fonctionnalités différents avec des plafonds différents, et la plupart des générateurs de barres de défilement comblent discrètement l'écart en affichant uniquement le résultat WebKit. Celui-ci ne le fait pas.

Définissez une fois la largeur, la couleur de la piste, la couleur du pouce, la couleur du survol et le rayon du coin du pouce, et l'outil crée deux ensembles de règles à partir des mêmes entrées. Le bloc WebKit s'étend à ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb et son :hover état dans la boîte de démonstration de gauche, donc ce que vous voyez là est exactement ce que Chrome, Safari et Edge rendent - le moteur réel du navigateur, pas une superposition simulée. Le bloc Firefox définit la largeur et la couleur de la barre de défilement sur la boîte de démonstration de droite en utilisant le moteur de ce même navigateur, c'est pourquoi la boîte n'a un aspect différent que lorsque cette page est réellement ouverte dans Firefox ; dans un navigateur WebKit, il affiche sa propre barre de défilement par défaut, et l'outil le dit plutôt que de simuler un look Firefox avec des pixels empruntés.

Le mappage de largeur est l'exemple le plus clair de l'écart : la largeur de la barre de défilement de Firefox n'accepte que les mots-clés auto, mince ou aucun – jamais un chiffre exact en pixels. Ce générateur mappe honnêtement la largeur que vous avez choisie (8 px et moins devient mince, tout ce qui est plus large devient automatique) et affiche le mot-clé résultant à côté de votre entrée, plutôt que d'inventer un faux résultat Firefox au pixel près qui n'existe pas. Firefox n'a également aucun moyen de définir une couleur de survol distincte, un rayon de bordure de pouce indépendant ou une couleur de piste qui n'est pas simplement la deuxième valeur de la couleur de la barre de défilement - ce sont des limitations permanentes et réelles de la plate-forme, et non des omissions dans cet outil.

Copiez le bloc CSS combiné et les deux ensembles de règles voyagent ensemble, chacun sous son propre commentaire, prêts à être collés tels quels dans une feuille de style. Tout s'affiche et se met à jour dans votre propre navigateur lorsque vous faites glisser les commandes : pas de téléchargement, pas de compte, pas d'aller-retour sur le serveur, et il continue de fonctionner hors ligne une fois la page chargée.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Les contrôles partagés – largeur, couleur de piste, couleur du pouce, couleur de survol, rayon du coin du pouce – pilotent les deux moteurs à partir des mêmes entrées.
  • Mappage honnête de la largeur de la barre de défilement : Firefox ne prend en charge que mince, automatique ou aucun, de sorte que la valeur exacte en pixels que vous choisissez est mappée au mot-clé réel le plus proche et affichée à côté de votre entrée.
  • Sortie CSS combinée et copiable avec à la fois les règles de pseudo-éléments WebKit et les propriétés standard de Firefox, clairement commentées.

Avantages clés

✓ Deux boîtes de démonstration en direct affichent la véritable barre de défilement de chaque moteur – la boîte WebKit affiche toujours le vrai résultat dans Chrome, Safari et Edge, sans faux rendu.
✓ Le manque de fonctionnalités de Firefox est affiché et non masqué : la couleur du survol, le rayon du pouce et le style de piste indépendant n'existent tout simplement pas dans Firefox, et l'outil le dit clairement au lieu de prétendre le contraire.
✓ Un bloc CSS copiable contient les deux ensembles de règles avec un commentaire de secours, prêt à être collé tel quel.

Cas d'utilisation

  • • Stylisez la barre de défilement de la barre latérale d'un tableau de bord pour qu'elle corresponde à la palette de la marque tout en voyant exactement jusqu'où ce style va dans Firefox avant de l'envoyer.
  • • Saisissez le mot-clé honnête de largeur de barre de défilement de Firefox pour une épaisseur choisie au lieu de deviner si mince ou automatique est la correspondance la plus proche.
  • • Copiez un bloc CSS contenant à la fois les règles de pseudo-éléments WebKit et les propriétés standard de Firefox, chacune clairement commentée, directement dans une feuille de style.