Re: CSS Selectors: How to style non-styleable?

Le Fri, 10 Mar 2006 21:27:54 +0200, Andrew Fedoniouk  
<news@terrainformatica.com> a écrit:

> There are situations when we need to define styles
> of sub-elements of some DOM element.
> Such sub-elements are not parts of the DOM so exsting selectors
> cannot be applicable to them.
>
> Examples:
> - style of scrollbars of some element and their parts.
> - parts of <select> element: buttons, popups, etc.
>
> Question is: what is the best method to define sub-elements
> in CSS Selectors? I understand that this question about future
> extensions/directions of CSS Selectors rather than
> existing mechanisms.
>
> My first attempt was to use pseudo-elements
> for definition of e.g. scrollbar parts:
> element : scrollbar-step-minus { ... }
> element : scrollbar-step-minus : hover { ... }
> element : scrollbar-step-minus : active { ... }
> element : scrollbar-step-plus { ... }
> ...
> element : scrollbar-page-minus { ... }
> ...
> (all 15 declaration)
>
> Problems with this:
> 1) this system of styles must be interpreted as single block of styles -
> they shall be applied all or none.
> 2) such declarations "pollute" set of styles of the document -
> CSS Selectors is a flat table so adding there significant amount
> of separate elements which will be used only as an aggregate seems
> like technically wrong.
>
> The best candidate as far as I can see is to use at-rules for that:
>
> @style-block my-vertical-scrollbar
> {
>    scrollbar-step-minus { ... }
>    scrollbar-step-minus : hover { ... }
>    scrollbar-step-minus : active { ... }
>    scrollbar-step-plus { ... }
>    ....
> }
>
> But I am not sure of how assignment of such blocks should be done
> in grammar:
>
> I would like to see something like this:
>
> element { color:red; }
> element:hover { color:blue; }
> element:v-scrollbar = my-vertical-scrollbar; // note '=' sign
>
> Any ideas here?

I'd propose a different approach. Actually, I could think of several  
approaches myself :).

I'll try to keep the prose low and make it quick:

1. The unique one: provide DOM elements for... scrollbars, for everything.

Something like:

document.body.scrollbar:
 .top()
  scrolls to top
 .bottom()
  scrolls to bottom
 .maxX
  returns an integer: the scrollable area (X axis)
 .maxX
  returns an integer: the scrollable area (X axis)
 .goto(n)
  scrolls to N, where N=position in pixels

document.body.scrollbar.top()


-- 
http://www.robodesign.ro
ROBO Design - We bring you the future

Received on Friday, 10 March 2006 19:56:52 UTC