Depuis que les ordi­na­teurs ont une inter­face gra­phique et des fenêtres, il y a des ascen­seurs et des bou­tons pour contro­ler ces derniers.

Mais avec la géné­ra­li­sa­tion des sou­ris à molettes et plus récem­ment les inter­faces tac­tiles, les ascen­seurs ne sont plus à la fête. Pour l’es­sen­tiel ils se can­tonnent à être des indi­ca­teurs de posi­tion­ne­ments tant  les moyens de les action­ner sans les tou­cher sont nom­breux : raccourcis-clavier, molette, track­pad, écran tactile…

On le voit bien, la sim­pli­fi­ca­tion est de mise (même si de MacOS 10.1 à 10.6, l’as­pect « Pilule trans­lu­cide » à eu son heure de gloire).

Per­son­nel­le­ment, j’a­do­rais l’as­pect que les ascen­seurs de MacOS 9 même si rétros­pec­ti­ve­ment je les trouvent trop larges, oui la période pilule bleue de MacOS X n’est pas ma pré­fé­rée esthé­ti­que­ment par­lant. Même si MacOS X a intro­duit les barres de défi­le­ment étroites, cela n’a pas vrai­ment chan­gé depuis 10 ans. Avec Lion, il y a un peu de nou­veau­té (un peu) ; mais je reste sur Leo­pard jus­qu’à temps que mon « parc » logi­ciel soit à jour pour le nou­veau félin.

En atten­dant, à des fin de recherche pour une inter­face d’ad­mi­nis­tra­tion que je suis en train de conce­voir, je suis tom­bé dans la doc du Web­Kit (oui, je suis un gue­din, je lis les docs) sur la pos­si­bi­li­té de sty­ler les barres de défi­le­ment de manière plus fine que nous le per­met  Inter­net Explo­rer depuis longtemps.

Voi­ci un exemple (qui ne marche qu’a­vec les navi­ga­teurs à base de WebKit) :

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

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
    display: none;
}

::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement {
    display: none;
}

::-webkit-scrollbar-track-piece {
    border-radius: 7px;
    background-color: #e1e1e1;
}

::-webkit-scrollbar-thumb:vertical {
    height: 100px;
    border-radius: 7px;
    background-color: #878787;
}

::-webkit-scrollbar-corner:vertical, #sub-tree::-webkit-scrollbar-resizer:vertical {
    background-color: #ededed;
}

::-webkit-scrollbar-corner:vertical, #sub-tree.GleeThemeWhite::-webkit-scrollbar-resizer:vertical {
    background-color: #c5c9d1;
}

Ce code pla­cé dans la feuille de style d’un site ou dans Sty­le­bot (exten­sion de Google Chrome qui per­met de modi­fier « à la volée » la feuille de styles d’un site), per­met d’ob­te­nir ceci :

C’est à la fois plus simple et plus dis­cret, à noter aus­si que l’on peut mas­quer les bou­tons de défi­le­ment, ce qui per­met de gagner de la place aus­si. Donc en jouant avec le dif­fé­rents para­mètres on peut se per­mettre vrai­ment toutes les excen­tri­ci­tés, pour le plus grand bon­heur des clients ?

Source.