Accueil > Carnet > CSS et Scrollbars

Après plus de 14 années de présence sur le web, je continue encore aujourd'hui cette incroyable aventure qu'est la découverte du virtuel. Lampe torche, sac à dos, planche de surf et bien sûr ce calepin indispensable pour mémoire.

#379 CSS et Scrollbars 27 Mars 2009

Web css

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

Depuis peu, Wekbit a ajouté quelques pseudo-éléments et pseudo-classes donnant la possibilité de donner de la couleur, des effets à nos barres de défilement. Pour les heureux possesseurs d'une des dernières versions de webkit, une page de démonstration est déjà disponible et permet de voir l'intérêt d'un tel système.

Pour effectuer des modifcations sur la scrollbar, il suffit de passer par les pseudo-éléments comme : 

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

Les CSS se compliquent nettement avec l'apparition de telles propriétés. Dans l'exemple du dessus, le with définit la largeur de la scrollbar varticale et height la hauteur de la scrollbar horizontale.

Voici la liste complète des pseudo-éléments disponibles : 

-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Ces améliorations s'inscrivent dans l'augmentation des possibilités des CSS. Néanmoins, avant que Gecko implémente dans son moteur un tel système et qu'Internet Explorer soit plus abouti à ce niveau, de nombreux mois vont passer.

Commentaires

giz404 27 Mars 2009

Gasp ! Je ne peux pas m'empêcher de penser a la propriété scrollbar qui était dispo sur IE...

Reply

Ajouter un commentaire