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

Hi , Mihai,

From: "Mihai Sucan" mihai.sucan@gmail.com

>> Mihai Sucan wrote:
>>> 1. Provide DOM elements for scrollbars and for all "hidden" elements.
>>>  document.getElementById('scrollable-element').scrollbar:
>>
>> What happens if I appendChild this element somewhere else in my 
>> document?  Does the scrollbar break?
>
> No, because element.scrollbar is not a DOMNode. It's just a DOM object.
>
> Think of it like having something from JS:
>
> document.getElementById("scrollable-element").scrollbar = {
> top: function () { [code] },
> bottom: function () { [code] },
> ...
> }
>
> Same goes for scollbar.upElement/downElement/etc.
>
>> What if I change its style to display:none?
>
> This is not an element you can reference via CSS.
>
>> What if I set random attributes on it?
>
> scrollbar.setAttribute() is not available, and setting 
> .scrollbar.whatever.random has no effect, just like setting 
> document.something.random has no effect. Yet .scrollbar could be made 
> read-only.
>
>

I've already tried something similar:

In my case scrollbar was a quasi-element:

scrollbar[type="vertical"] { ... }
scrollbar[type="vertical"] > .prev { ... }
scrollbar[type="vertical"] > .prev:hover { ... }
scrollbar[type="vertical"] > .prev-page { ... }
scrollbar[type="vertical"] > .thumb { ... }
scrollbar[type="vertical"] > .thumb:hover { ... }
scrollbar[type="vertical"] > .next-page { ... }
scrollbar[type="vertical"] > .next { ... }
scrollbar[type="vertical"] > .next:hover { ... }

Here is an example of such styling:
http://terrainformatica.com/hsmile/images/sctls.png

As I said in my initial message this is wrong way in my opinion:
this block of styles shall be declared as monolitic block and assigned to 
the
element as a whole conglomerate.  Cascading rules in this case shall also be
applicable in slightly different way.

Problem of style blocks seriously arise also in case of 
"contenteditable=true"
(aka <htmlarea>)

It should be some way to declare isolated system of styles for some portions
of the DOM:

@style-block editable-content { p { ... }, h1 { ... } ...  }

htmlarea:content = editable-content;

This will establish new local "style root" or style namespace
for DOM sub-tree inside editable htmlarea element.

Andrew Fedoniouk.
http://terrainformatica.com

Received on Saturday, 11 March 2006 17:54:49 UTC