-
200922 Mar
Posted in Proposals
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.
-
Comments
-
01.
Wow, that’s an awful lot of code!
-
02.
Adam Luter says:Comment » March 23rd, 2009 at 1:32 am
Ironic, Safari was the last browser I’d expect to give a whitepaper on widget styling.
-
03.
Nostradamus says:Comment » March 25th, 2009 at 12:43 am
Let the record show that “I called it!”
I also called it on the basic idea behind cufon.
I hereby predict apple or opera will implement proper (N.E.S.-like) “sprites” before the end of next year. -
04.
To me, that looks like styling a scrollbar The No Way
Seriously, 486 lines of code to alter a scrollbar ?? Gimme a break…..thats not development LOLOLBut, I guess they have to start somewhere…
-
05.
The new property like overflow-x:scroll is helping me to solve some issues when I used iframe.
-
06.
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 ;-) -
07.
Nekochi says:Comment » May 19th, 2010 at 5:34 am
This was the one good thing that IE had going for it. Glad that the other browsers are catching up since IE sucks in every other way.
-
08.
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.
-
09.
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.
-
10.
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.
-
11.
Just tried to open the example url in ie8. Deffinitely not working.
Am I missing something? -
12.
Yeah, It only works on Safari, Google Chrome, or another webkit browser.
-
13.
hey, IE gave us other cool stuff too, like, y’know, AJAX
-
14.
-
15.
Is there a way to disable these WebKit-specific scrollbars through custom CSS? They were introduced in the new Google Reader interface and they are extremely annoying!
-
16.
thanks for tutor css, style with scrollbars
-
01.
