The title of this post is using some extensions to the pseudo-element selector in CSS3. You can read about the (::) here and about the additional argument here (if you don't like 'here' you can view the contents title attribute I applied to both).
This is (again?) a random thought about CSS and how I think it could be improved. Currently you can apply a background color/image in XML documents only to the root element (you can use the CSS3 pseudo-class :root to match the root element of the document). If you think you can also apply it to the body element, you are violating the specification and you are relying on a browser bug, which is a bad thing, isn't it?
So what does this user agent with you background color/image applied to the root element like this:
:root{ background-color:lime; }
It will apply it to the 'viewport'. That's nice! Not... IMHO (and in my "CSS dream world") these things should be applied using a pseudo-element (or @rule, if you like that). Besides the background color/image we could also style the scrollbar from that pseudo-element and maybe a few more little things (ideas?). While I'm writing this I find out that @viewport "media"{ } is better since you don't want 'scrollbar' properties, you want a 'scrollbar' selector!
@viewport "screen"{
/* not sure how to apply a background property directly to a @rule
not sure if the extra media 'selector' is needed */
::scrollbar{
background:#ccc;
}
::scrollbar(arrow){ /* selects both top and bottom arrow */
background:#eee url(arrow.png);
}
/* not sure about the name for other possible arguments */
}
It is just a thought, and I think something like this will be there one day. Thanks to the new appearance property (which doesn't specify scrollbars yet) user agents can make a preference setting for the styling of scrollbars and everybody is happy.
I like my scrollbar how it is. Leave it alone.
In my opinion, the scrollbars and drop down list boxes of an element on a website are just as much part of the visual design as buttons, input fields, etc. This being said, I feel it would only be logical if the properties of these elements would/could be defined/handled by the media that takes care of the visual presentation, being style sheets (not necessarily CSS). This is already the case for many elements like input fields and textareas, but also for attributes like the borders and legend of a fieldset.
We could argue about the scrollbar of the :root element, as this one could be considered as being part of the user agent/ client software. However, the scrollbars, etc. that appear within the webpage should be considered part of the website, and not the client software.
Again, this is my opinion, but frankly, I don't think we have seen the last of this in W3C's technical reports.
P.S. I am in no way trying to imply that the W3C should integrally adapt the current scrollbar volor property hack that exist on the WWW today.
Sincerly,
ACJ
I don't like scrollbars in other colors, because i see it as a part of the browser.
If there is a possibility to use it as an element of overflow than i am agree with it.
You didn't say what might be disallowed for ::scrollbar. Consider this:
::scrollbar {
position: fixed;
top: 50px;
left: 50px;
width: 50px;
display: table-row;
content: "Gotcha!";
}
M.
Mario,
The CSS overflow property has nothing to do with scrollbars. I know there is a value 'scroll' for it, but that is just a bad chosen name, nothing else.
Moose,
You're correct, I should have done that, but this was more the idea of how something like the scrollbar could be styled with CSS. And I'm not sure if the W3C even checks submissions, since my last one about styling fieldset and legend is on www-style without a single reply :-). Besides, they were not planning to take it into CSS3 UI anyway, so...
Of course people could argue that it is there scrollbar and it is my form, therefore there are preference buttons within the browser. Even IE scrollbars can be turned off, I you want that. Besides that preference button, lot's of scrollbars are part of the design, like scrollbars from iframe elements for example.
I think the web would really benefit from an application/document separation. A document would be limited to not be able to do any UI changes. (I consider the scrollbars, as part of the tools the user has to navigate the document, to be UI, while a dropdown is part of the document. An application on the other hand would have more control, but be required to ask the user for permission to use that control.
Oh, and why not implement that distinction by using XUL for applications, and xHTML for documents, and let CSS and the DOM/AOM cover them both, but differe in what they may do depending on which one is used?
But, I may as wel dream on...