An interesting implementation has recently made its way into the latest Webkit nightlies – a detailed method of styling scrollbars using a combination of new pseudo-elements and pseudo-classes.
Although the new syntax can seem complicated at first, Webkits implementation gives authors the ability to completely alter the look and feel of scrollbars of overflow sections, listboxes, dropdown menus & textareas, and when used in conjunction with
border-imageand multiple backgrounds, the results can look beautiful.
Whitepaper gives more details on the implementation.
You can skip to the end and leave a response.
Wow, that’s an awful lot of code!
So Webkit/Safari now mimics Microsoft? You’re serious? We could style scrollbars in IE for years and it was never really nice.
What’s next? Conditional Comments would be a very nice idea to copy from Microsoft, maybe the only one. Please don’t copy hasLayout ;-)
I created a WebKit theme (Chromium) in under 40 lines. It’s actually surprisingly easy.
As far as styling scrollbars, I personally think the main scrollbar should be treated separately from scrollbars inside the document. This would satisfy both designers and users. After all, if a designer changes how the Submit button looks, it doesn’t affect the way the navigation buttons appear.
While i am still learning design tools and improving my skills I can say this about what I saw in the examples. I saw a lot of button relocation but nothing for color changes or thickness etc. In my humble opinion if you are going to stylize the scroll bars there should be controls for the size the color the shape the buttons and the placement. The ability to float the scroll bar out side of the area it is scrolling by an x or y co-ord. definitions for the type of scroll bar main, mid or sub. By giving concise type definitions you can lock down what a scroll bar looks like for different sections and style them specifically for the theme of the site. The ability to narrow a scroll bar to mere pixels with out the buttons could make somethings more intuitive as well as the ability to control the side of the frame it is used on. Just some thoughts from an amateur tryin to become a professional.
Okay I had to respond to some of these comments.
Jens Grochtdreis and Nekochi: The idea to style scrollbars did originate with IE… however you could only change the colors of the components of the scrollbar. The webkit implementation gives you complete control by allowing you to use images in your design. This means that any design you want for the scrollbar can be implemented if coded correctly.
Cliff Wells: You can style specific div’s differently then the main scrollbar. So this is already supported, and I do agree with your statement.
Robert Kay: Its great that you’re learning to design. I myself am no master. Hopefully you are progressing well. In response to your comments, you can style the scrollbar in any way you want to with CSS currently in webkit. You can change the width/height of the scrollbar, and use images to define all of the objects in the scrollbar. So like I said above, any design you can think of for a scroll bar can be implemented. I am working on making a Google Wave-esque scrollbar which I will launch on my website in the next week or so. And using two nested div’s you can offset the scrollbar however much you wish to in the x an y directions. Also, they already allow separate styles for different scrollbars.