Meggan’s Tip Of The Week
Queens of the Stone Age – “First It Giveth”
My tip of the week, I decided, will typically be something relating to websites, valid coding, standards, etc. (not terribly useful to everyone I know, but they say “go with what you know”) because that is what I know best, but I’m not going to hold myself strictly to that. 
On to the tip.
Colored Scrollbars
A popular effect for many personal sites is to have colored scrollbars (which will hereafter be referred to as “cs”), and I totally know the motivation to do so – it makes your entire site seem more cohesive, it makes the scrollbars seem less intrusive if you use scrolling divs (or iframes, but we all know those are evil) and it just downright looks neat.
However, there are some things you should know about those colored scrollbars.
- They don’t show up in ANYTHING but Internet Explorer.
- While many people still use IE, Firefox is quickly catching up. I myself use Firefox, but people on Macintosh computers frequently use Safari instead of IE (if you’re not, you should. IE on a Mac totally blows – even worse than on a PC). Firefox, Opera, Safari, and Netscape Navigator do not show colored scrollbars.
- They’re not valid coding.
- Since the cs only show up in IE, the CSS tags used to accomplish this are called “proprietary tags,” meaning they only work for one particular, very specific browser. The purpose of valid coding is to let as many people as possible view your site regardless of browsers or resolutions, and if you’re using proprietary tags, you’re defeating the purpose.
- There is a valid way to code them.
- It has to do with JavaScript, which I’ll explain further in a bit.
- It still doesn’t show up in anything but IE.
- Further proof that IE needs to get its act together and start complying with standards.
In order to have cs, you must add this bit of JavaScript into the <head> of your document:
<!––
function colorscrolls() {
if (document.all && document.getElementById) {
document.body.style.scrollbarFaceColor="COLOR";
document.body.style.scrollbarArrowColor="COLOR";
document.body.style.scrollbarHighlightColor="COLOR";
document.body.style.scrollbar3dlightColor="COLOR";
document.body.style.scrollbarDarkshadowColor="COLOR";
document.body.style.scrollbarTrackColor="COLOR";
document.body.style.scrollbarShadowColor="COLOR";
}
}
// ––>
</script>
Where COLOR is your six-digit hexadecimal color.
THEN, put this:
…in place of the plain <body> tag.
Now, you have the best of both worlds: your CSS will still validate because you don’t have any pesky proprietary tags, and your cs will be visible to anyone using a crap browser. Teeheehee.
File Under: General, Site Stuff, Tips
Comments are closed here.