W3C home > Mailing lists > Public > www-style@w3.org > November 2010

Re: Styling Scrollbars with CSS

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Thu, 25 Nov 2010 23:21:31 -0800
Message-ID: <BAY141-DS1CC725D612ACE2C9B6540F8210@phx.gbl>
To: "Simon Fraser" <smfr@me.com>, "Justin Kloth" <shadowmage016@yahoo.com>
Cc: <www-style@w3.org>

From: Simon Fraser
Sent: Thursday, November 25, 2010 7:19 PM
To: Justin Kloth
Cc: www-style@w3.org
Subject: Re: Styling Scrollbars with CSS

On Oct 30, 2010, at 8:50 am, Justin Kloth wrote:


>>I'd just like to propose that some sort of specification be added to CSS 
>>(CSS3 if possible) for styling scrollbars, if that >>is at all possible. 
>>Sometimes the default scrollbars just look really out of place in certain 
>>web site designs.

>Note that WebKit already has this:
><http://webkit.org/blog/363/styling-scrollbars/>

Just for the note, in HTMLayout/Sciter I am using style sets for defining 
scrollbars:

@set  my-vertical-scrollbar
{
   .base { ... }
   .prev-line { ... }
   .prev-line:hover { ... }
   .prev-line:active { ... }
   .next-line { ... }
   .next-line:hover { ... }
   .next-line:active{ ... }
   .prev-page { ... }
   .next-page { ... }
   .slider { ... }
}
(names of classes are predefined)
After that you can define you scrollbars using special properties:

div {
   overflow: auto;
   vertical-scrollbar: my-vertical-scrollbar;
   horizontal-scrollbar: my-horizontal-scrollbar ;
}

Benefits of this approach:
1) we do not need bunch of new properties and pseudo-classes as in IE and 
WebKit cases.
2) it is possible to define scrollbars of different types and effects. E.g. 
the ones used on Mac or iPhone.


-- 
Andrew Fedoniouk

http://terrainformatica.com
Received on Friday, 26 November 2010 07:22:07 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:34 GMT