Personnalisation de la barre de défilement avec Tailwind et DaisyUI
Vous vous souvenez quand j'ai écrit sur changer la couleur de la barre de défilement avec Tailwind CSS ? Le bon temps ! 😅 Eh bien, cet article date de 3 ans et les choses ne restent pas pareilles longtemps dans le développement web moderne.
La situation : J'ai remarqué que mes styles de barre de défilement s'appliquaient quand la souris était en dehors de la fenêtre du navigateur, mais dès que le curseur entrait, les styles revenaient par défaut. Après quelques bidouillages, j'ai identifié que c'était un problème de spécificité, probablement causé par les styles de base de Tailwind. 🤷
Quand je travaille avec Tailwind CSS et daisyUI, je trouve très rarement que mes styles ne s'appliquent pas comme attendu, l'équipe Tailwind est très douée dans ce qu'elle fait.
Support des navigateurs
En gros, si vous n'êtes pas sur un navigateur basé sur Chromium, vous êtes dans la merde. Peu de sélecteurs de barre de défilement sont supportés en dehors de Chromium et ceux qui le sont ne sont pas aussi visuellement attrayants.
Ce que j'ai trouvé : usage sélectif de !important
Je sais. Utiliser !important donne souvent l'impression d'admettre sa défaite. Mais dans ce cas, j'ai manqué de talent, c'est ce avec quoi j'ai fini pour avoir les styles de barre de défilement appliqués de manière cohérente.
J'ai essentiellement retiré tout le bazar lié aux styles de barre de défilement et défini la largeur et la couleur globalement. Puis j'ai ajouté les pseudo-éléments de fallback pour les navigateurs basés sur WebKit.
/*
Styles de barre de défilement :
scrollbar-color Deux couleurs valides. thumb et track
scrollbar-gutter padding quand il n'y a pas de barre de défilement
scrollbar-width auto | thin | none
*/
* {
scrollbar-width: thin;
scrollbar-color: oklch(var(--s)) oklch(var(--p)) !important;
}
::-webkit-scrollbar-track {
background: oklch(var(--p));
}
::-webkit-scrollbar-thumb {
background-color: oklch(var(--s));
}
Je ne suis pas fan de coller !important sur quoi que ce soit, mais dans ce cas c'est la seule façon d'obtenir que les styles de barre de défilement s'appliquent de manière cohérente.
Ma configuration actuelle d'app.css
Si ça vous intéresse, voici ma configuration actuelle d'app.css pour ce site :
@tailwind base;
html {
scroll-behavior: smooth;
word-break: break-word;
}
::selection {
color: oklch(var(--pc));
background: oklch(var(--p));
}
@tailwind components;
@tailwind utilities;
/*
Styles de barre de défilement pour les navigateurs modernes
scrollbar-color
scrollbar-gutter
scrollbar-width auto | thin | none
*/
* {
scrollbar-width: auto;
scrollbar-color: oklch(var(--s)) oklch(var(--p)) !important;
}
::-webkit-scrollbar-track {
background: oklch(var(--p));
}
::-webkit-scrollbar-thumb {
background-color: oklch(var(--s));
}
Si ça vous intéresse, voici un exemple en CSS vanilla dans un CodePen que vous pouvez consulter :
Pour conclure
C'était bien de revisiter les docs MDN pour ça, j'ai trouvé quelques trucs que j'avais ratés avant. J'ai obtenu le résultat que je voulais ici et j'ai appris un peu en chemin.
Bon stylage, les amis ! Et rappelez-vous, si vos barres de défilement ne se comportent pas bien, parfois il faut juste être un peu plus… spécifique. 😅
Références
scrollbar-width: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-widthscrollbar-color: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color::-webkit-scrollbar: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar- Informations générales sur les barres de défilement CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars