I believe I’ve properly coded my CSS stylesheet scrollbar but when I visit the site it defaults to Firefox’s standard scrollbar color. I then realised that I have a custom Firefox black theme (Nasa Night Launch), so I disabled it and restarted. No effect.
After visiting a few pages I came across this site here. Halfway down the page someone suggests that:
You can do this with JavaScript only, and
Remove all ties to W3C (doc type declaration) at the top of the HTML section so that instead of looking like this:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
So remove all references to W3C thereby telling the page to not follow their standards? That’s one odd way to get it to work…then by the time you finish reading all the posts people are basically saying it still doesn’t work. Can someone clarify this for me?
Now I understand that proper coding semantics is good practice, but if my only goal is to use my website (art portfolio) as a hobby and do not care much for gaining popularity and high search result ranking then is this a suitable idea? Will it have any negative consequences in terms of user experience? I just want the damn scrollbar green lol
So remove all references to W3C thereby telling the page to not follow their standards? That’s one odd way to get it to work…then by the time you finish reading all the posts people are basically saying it still doesn’t work. Can someone clarify this for me
I wouldn’t have thought to try that, but I suppose the reasoning of throwing your page into the Dark Ages of Quirks Mode might be to get IE8 to work with your colours.
Scrollbar colours has only ever been (as far as I know) an IE thing. Firefox, Opera, Safari, Chrome, Konqueror, etc have never accepted any scrollbar colours as they aren’t in the specs. It’s one of those proprietary things M$ introduced to make their browser cooler (and back when almost everyone had IE, lots of people made use of it).
You can do this with JavaScript only, and
I have seen inner scrollbars rendered with Javascript, for scrolly boxes and galleries etc. You can see an example of them on the apple site…
view that site with Javascript on and then off. You see they’ve made their own scrollbar, but it’s not a Main Browser scrollbar.
I’ve also seen somewhere a (good) JS tut for making pretty scrollbars, though I can’t find it now.
But if you find a good one, not cruddy JS or IE-only JS, then it’s possible to have that JS, after loading, sets the HTML and BODY tags to overflow: hidden and have the main child container let Javascript deal with overflow: auto and build your own scrollbars.
I say let JS do all that because you don’t want overflow: hidden on the page when people don’t have JS at all… otherwise they can’t scroll your pages and can’t see anything that’s larger than their screen.
Opera supports CSS styling of scrollbars, but only if the user explicitly accepts it. The default setting is not to accept it. You can allow or disallow this on a site-by-site basis.
Seriously, something hidden that deep in the UI, even if I go there to turn JS off, I’d never know it existed! (as a user I just don’t search those things out)
Proof that I’m not a nerd, I guess.
There are working with teh IE CSS styles then? I wonder why Opera recognises them but doesn’t implement them by default. Maybe they were ashamed… : ) some dark secret past…
I think it’s deliberate. Those properties are not from a W3C recommendation and they are more likely to cause harm than good, so anyone who’s managed to enable the support for them really meant to.
Oh, I’m sure you are, Poes.
Yes.
Like I said, it’s not an official standard. It’s potentially harmful to usability and, perhaps, accessibility. There may be cases where a skilled designer with good knowledge about user interface design, usability and accessibility can actually improve a web site or app by styling scrollbars. But it’s far more likely that dilettantes more eager than competent will feel the need to tweak them (because you can!) with disastrous results.
If you want to see the result of amateur designers trying to make something look ‘professional’, and don’t mind feeling sick every once in a while, then enable this support globally.
If you want to view certain sites (e.g., your own :)) in full glory yet still be protected from the fumblings of the hoi polloi, enable support on a site by site basis.
For maximum peace of mind, leave the default setting as is.
Like I said, it’s not an official standard. It’s potentially harmful to usability and, perhaps, accessibility. There may be cases where a skilled designer with good knowledge about user interface design, usability and accessibility can actually improve a web site or app by styling scrollbars. But it’s far more likely that dilettantes more eager than competent will feel the need to tweak them (because you can!) with disastrous results.
Yeah but that was my question… Mozilla et al didn’t employ them for the same reason (I assume), so it just seems weird that someone added it, then hid it. It’s almost as if they thought it might catch on (some of Ms’ suggestions are appearing in CSS3 for example), and are hiding it for some later, post apocalyptic future…
Well, I’m getting waaaay offtopic but it was interesting.
Scrollbar colours are only supported by IE and Opera and only where the browser owner has it enabled. In IE it is enabled by default but can be turned off. In Opera it is turned off by default but can be turned on.
If you want consistency across multiple browsers then you turn it off in IE.
Why anyone would want to use it anyway makes no sense as the scrollbars are part of the browser and not part of the web page. It is like wanting your web page to insist that the computer itself be a particular colour so as to blend in with the page.
It’s for an artsy-fartsy page, and like the apple.com/mac page, they do consider chrome as part of the page. Sometimes it’s not considered a document, but art. And so long as art can be as weird as some pee in a jar (yeah that was real), then I guess it’s expected someone will want it for a site.
I’d still just use JS to make the page overflow: hidden (removes natural scrollbars) and add in funky js’d ones.
After getting a Chrome theme thingie with Fokke en Sukke (two cartoon birds from a Dutch newspaper who make rude comments about our modern times), I wondered if I could get their heads to cover my scroll bars too, just for the lawlz.
