Catégorie: Développement
Générateur de barre de défilement CSS
Créez du CSS de barre de défilement personnalisée en local, avec aperçu
Concevez des barres de défilement personnalisées avec un aperçu en direct et copiez le CSS de scrollbar-color, scrollbar-width et du style WebKit. Généré dans votre navigateur.
Aperçu
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color et scrollbar-width sont les propriétés standard, celles qu'utilisent Firefox et les versions actuelles de Chrome. Les règles ::-webkit- sont un préfixe non standard conservé pour les anciens Chrome, Edge et Safari — les deux moteurs ne rendront pas la même chose.
L'aperçu et le CSS généré sont tous deux produits dans votre navigateur.
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
La mise en forme des barres de défilement est partagée entre deux mécanismes. Le module CSS Scrollbars Styling fournit `scrollbar-color` et `scrollbar-width` : deux propriétés, une large prise en charge incluant Firefox, et un contrôle volontairement limité. Les pseudo-éléments `::-webkit-scrollbar`, plus anciens, en offrent bien plus, mais c'est un préfixe non standard. Ce générateur émet d'abord les propriétés standard puis le bloc WebKit, identifié, pour une large couverture sans faire croire que les deux sont équivalents. Le rendu ne sera pas identique, et une barre de défilement est un contrôle dont les gens dépendent : l'aperçu ici défile pour de vrai plutôt que d'en montrer un dessin.
Mode d'emploi
- Indiquez le sélecteur de l'élément à styliser, puis choisissez les couleurs du curseur, du rail et du survol.
- Choisissez scrollbar-width et réglez la largeur et le rayon WebKit.
- Faites défiler l'aperçu pour vérifier, puis copiez le CSS.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Les barres personnalisées fonctionnent-elles dans tous les navigateurs ?
- Pas à l'identique. scrollbar-color et scrollbar-width fonctionnent dans Firefox et les Chrome et Edge actuels ; les règles ::-webkit- couvrent les anciens Chrome, Edge et Safari. L'outil émet les deux, mais les deux moteurs dessinent les barres différemment et aucun CSS ne les rend identiques.
- Qu'est-ce que scrollbar-color ?
- La propriété standard qui définit les couleurs du curseur et du rail en une seule déclaration — le curseur d'abord, le rail ensuite. Elle fait partie du module CSS Scrollbars Styling, c'est donc la version à privilégier.
- Pourquoi inclure du CSS WebKit ?
- Parce que les propriétés standard n'exposent que la couleur et une largeur grossière, et parce que les anciennes versions de WebKit et Blink ne les prennent pas en charge. Les règles préfixées ajoutent une taille et un rayon explicites et couvrent ces navigateurs.
- Faut-il masquer complètement la barre de défilement ?
- Prudence. scrollbar-width: none supprime un repère visible qui indique que la zone défile et permet de la faire glisser, ce qui pénalise les personnes sans molette ni pavé tactile. Préférez une barre fine et bien contrastée.