W3C home > Mailing lists > Public > www-style@w3.org > March 2006

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

From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Sun, 12 Mar 2006 13:44:00 +0200
To: "Andrew Fedoniouk" <news@terrainformatica.com>, "Boris Zbarsky" <bzbarsky@mit.edu>
Cc: www-style@w3.org
Message-ID: <op.s6atjm0imcpsjg@localhost.localdomain>

Le Sat, 11 Mar 2006 19:54:21 +0200, Andrew Fedoniouk  
<news@terrainformatica.com> a écrit:

> Hi , Mihai,
>
> From: "Mihai Sucan" mihai.sucan@gmail.com
<...>
>
> 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.

So, what you want is actually different from what I initially believed (or  
not).

You want a way to make "blocks of styles" that you can isolatedly apply to  
portions of the DOM:

@style-block name-of-the-block
{
p { ... }
h1 { ... }
}

The above, by itself, won't make a difference to anything in the DOM, but  
... if we go on and do something like:

#myDOMelement
{
	style-block: name-of-the-block true|false;
	any-propety: and value(as, usual);
}

Then we style #myDOMelement and all child elements according to the CSS  
definition of name-of-the-block. The true|false bit I added sets isolated  
true or false (that is: apply *only* the style-block CSS definitions to  
the child elements or allow mixing). This is useful if, for example, you  
need to have a set of lists, but only one element needs be changed.

Style-block property could be available even in the @style-block  
definitions, therefore allowing some kind of modularity.

This a is very interesting idea and concept: being able to make multiple  
CSS definitions and reuse them in any part of the DOM, isolated or not.

Does this have any link to styling scrollbars? As I think of it: not  
exactly, because it's just a proposal for expanding the CSS language  
itself (it's not yet another "i want a property to ...").

The benefit, in conjunction with my second proposal for styling scrollbars  
which does not add anything to the DOM, but adds a few CSS  
pseudo-elements, is the ability of easily reusing the scrollbar styling in  
any part of the DOM.

Or did I get it all wrong?

-- 
http://www.robodesign.ro
ROBO Design - We bring you the future
Received on Sunday, 12 March 2006 11:42:49 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:44 GMT