Award Sites!  ... "Bettering the Internet Experience!"

Cemetery Woods by David G. Bancroft

AIT Web Hosting and Domains ... Veteran Supported

Home | Articles | Exemplary | Achievement | NovaSite
Resources |
Tutorials | Web Awards | Contact | CureNow
SEARCH | Assembly ||
USA Patriotism! | Poetry Galore

Approved Web Hosting Companies

Gold Stars of Excellence by Award Sites!

Articles > Website Development

Categories

Author's permission is required to use the respective listed article.

Coloring Scrollbars...
and still having your stylesheet validated.
By Carlos Simões -- January 9, 2005
Some facts about colored scrollbars.
 

1. Colored scrollbars are not standard.

One important thing you must know about a colored scrollbar is that it does not work in Gecko-based browsers (Firefox, Netscape Navigator, Mozilla): It is an Internet Explorer's only property. It is not a standard property or a proprietary property. According to W3C, these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-").

 

Carlos Simões

So, it will work only in Internet Explorer, and if you are seeking CSS validation, the CSS will not validate. The objective of this article is to provide some ways of coloring the scrollbar while keeping the CSS stylesheet valid.

2. Scrollbar elements and how to style it.

In the image below will help you locate the several elements of a scrollbar that can be styled using CSS.

The scrollbar elements

The usual CSS statement, that can be used in an external stylesheet or added to a <style> tag in your page's <head> section is:

body {
scrollbar-arrow-color: #FF9900;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #DDDDDD;
scrollbar-track-color: #DDDDDD;
scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #DDDDDD;
scrollbar-highlight-color: #DDDDDD;
scrollbar-3d-light-color: #DDDDDD;
}

One common confusion is that the above CSS statement does not seem to work some times. That happens when you are using standard-compliant HTML and you are not sending Internet Explorer into "quirks mode". Basically, if you add something, like a comment, before the DOCTYPE declaration, and that includes the "XML Prolog", you will be sending Internet Explorer into quirks mode.

So if you are working in "strict mode" you must use "body, html {" or "html {", instead of "body {" in the example above.

3. How to style the scrollbars and still have a validated stylesheet.

One recurrent question is how to have those (sometimes) beautiful colored scrollbars in Internet Explorer and still have a "Valid CSS" stylesheet?

There are three ways, two of it relying in Javascript:

3.1 Using conditional comments.

It is possible to have the scrollbars colored and still have your (X)HTML and main CSS validated, as long as you wrap your scrollbar styling code inside conditional comments. Conditional comments only work in Internet Explorer on Windows and are excellent to give instructions only for Internet Explorer on Windows. They are supported since Internet Explorer 5, and it is even possible to distinguish between 5.0, 5.5 and 6.0. Follows an example (to be added to the page's <head> section):

<!--[if IE]>
<style type="text/css">
body, html {
scrollbar-face-color:#8080FF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#DDDDFF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}</style>
<![endif]-->

3.2 Using an external .js file.

Step 1: Create a scrollbar.js file with the following content (of course, change the colors to fit your needs) and place it in your server folder:

browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4))
{
document.write('<style type="text/css">');
document.write('html ');
document.write('{scrollbar-arrow-color: #FF9900;scrollbar-base-color: #000000;scrollbar-dark-shadow-color: #DDDDDD;');
document.write('scrollbar-track-color: #DDDDDD;scrollbar-face-color: #DDDDDD;scrollbar-shadow-color: #DDDDDD;');
document.write('scrollbar-highlight-color: #DDDDDD;scrollbar-3d-light-color: #DDDDDD;}');
document.write('</style>');
}

Step 2: Add the following line to the page's <head> section and that's all:

<script src="scrollbar.js" type="text/javascript"></script>

3.3 Using CSS "behavior" property (This property is part of a proposed addition to CSS).

Read about this property at Microsoft.

Step 1: Create a scrollbar.htc file with the following content (of course, change the colors to fit your needs) and place it in your server folder:

<?xml version="1.0" encoding="ISO-8859-1"?>
<public:component xmlns:public="urn:HTMLComponent" lightweight="true"> <script type="text/javascript">
//<![CDATA[
style.scrollbarArrowColor= "#FF9900";
style.scrollbar3dLightColor= "#DDDDDD";
style.scrollbarBaseColor= "#000000";
style.scrollbarDarkShadowColor= "#DDDDDD";
style.scrollbarFaceColor= "#BBBBBB";
style.scrollbarHighlightColor= "#DDDDDD";
style.scrollbarShadowColor= "#DDDDDD";
style.scrollbarTrackColor= "#DDDDDD";
//]]>
</script>
</public:component>

Step 2.a: Add the following CSS statement to your stylesheet:

body, html {behavior: url(scrollbars.htc);}

However, and given that this "behavior" property is still not a part of any CSS specifications, this method will not allow you to have a valid CSS stylesheet. This because the "behavior" property is still, as said above, a proposed addition to CSS. So, if you want to have your stylesheet validated, you will have to remove the above CSS statement from your stylesheet and add it using as explained in Step 2.b below:

Step 2.b: Add the following piece of javascript to your page's <head> section :

<script type="text/JavaScript">
scrollbars= document.styleSheets[0].addRule("html", "behavior: url(scrollbars.htc)", 0);
</script>

Please note: The example above is for standards-compliant mode; if you are working in Internet Explorer's quirks smode, you can use instead of the above script the following onload event, providing there's an "ID" attribute in the <body> tag:

<body id="thispage" onload="thispage.style.behavior='url(scrollbars.htc)'">

Concluding, methods 3.1, 3. 2 and 3.3(2.b) will allow you to have colored scrollbars in Internet Explorer and still have a "Valid CSS" stylesheet. Browsers not supporting this styling will ignore it and will not display any error.

In addition the second method (2.b.) can be used to apply complex DHTML effects to your pages that will only be available in DHTML compliant browsers (this includes Mozzila and Firefox, of course). For that you will have to use an extend technique, using the CSS proprietary property "-moz-binding:" that provide Mozilla-like browsers with a mechanism for utilising Microsoft's DHTML behaviors.

4. Usability issues.

Now, are there any usabiltiy and accessibilty issues arising from coloring this way the scrollbars? Certainly. Always remember that Microsoft has chosen high contrast and solid, relatively dark colors for the default scrollbars in Windows.

Colored scrollbars must be used wisely. We have all visited web sites with colored scrollbars and eventually felt that its usability is poor, to say the least. One rule is never to fail "user expectations"... meaning that the users are generaly expecting the face color to be darker than the track color. The same applies to the arrow color. Some times the web designer chooses colors which make it difficult to tell which component is the scrollbar face and which is the the scrollbar track. This is because the colors used "reverse the positive" and make the track stand out much more than the face. That is definitely a no-no!

On the accessibilty side, it is enough to say that, for example, although color-blindness affects a significant portion of the public, very few web designers ever consider its effects on the usability of the scrollbar colors, among other things. A potential issue is the lack of distinction between the colors used.... very often the site owner styles it in such a way that it makes too hard to see the scrollbar against the track. So you must always ensure that there is enough contrast between the colors uset in the scrollbar-face-color and the scrollbar-track-color. Remember that for people with poor eyesight there may not be enough contrast between the scrollbar track color and the face color. Even for people with perfect eyesight a lack of contrast makes it harder to note the scrollbar's position instantly. Other times the face is colored the same way the track is...so the only clue you have to its position is the thin line marking its edges.

If you are planning to use colored scrollbars, ensure that it will not work against your web site's usability and accessibility.

And of course you can always style only the scrollbars in textarea, iframe and similar elements while keeping the main window scrollbars untouched. Just style those elements as in the example below:

form textarea {
scrollbar-arrow-color: #FF9900;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #DDDDDD;
scrollbar-track-color: #DDDDDD;
scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #DDDDDD;
scrollbar-highlight-color: #DDDDDD;
scrollbar-3d-light-color: #DDDDDD;
}

4. Colored scrollbars generators.

  1. Microsoft generator
  2. Newbie Hangout generator
  3. DRAAC.com generator

And since you should ensure there is enough color contrast, by all means, check the colors you have selected with the Juicy Studio's "Colour Contrast Analyser"

5. Additional information and discussion.

Discuss about "Colored Scrollbars" at Webmates

The names Microsoft, Microsoft Internet Explorer, Microsoft Windows, Netscape Navigator, Mozilla, Firefox, Opera Software's Opera and Javascript are registered trademarks of the respective companies. By referencing their products in these documents this site in no way endorses or is affiliated with these companies. The information is listed for public benefit and only serves to document historical information about the Internet and World Wide Web. The publicly available W3C HTML specifications and terminology (such as CSS and XML) carry their own trademarks and copyrights.

Carlos Simões
Copyright
© 2005
All Rights Reserved

About the Author
Carlos Paula Simões was born in Portugal in 1966, and he works since 1992 as a full-time Environmental and Food Technologist in a Portuguese major food plant. He maintains a presence in the Web since 1997 and he is currently responsible for several personal websites like the CPSnet Web Awards and Cb2 Web Design Portugal, amongst others.

He holds also several positions at well renowned web organizations like APEX (Director of Web Development) and WebsAwards (Manager and Co-Owner). Other relevant participation's are with Mensa Portugal, Webmates and GAWDS as well as with some of the major Web Directories, like ODP (Open Directory Project) and Zeal.

"Approved" Web Hosting Companies

include "_include