[CSS-X] style sets and style systems isolation

Disclaimer: this is not a proposal, just an explanation of some idea I am 
using.

First of all about origins of the problem.
I've implemented <input type="calendar"> in htmlayout (as many other
non-standard input elements)
( see: http://www.terrainformatica.com/htmlayout/images/datetime.jpg )
In my case input elements and their content are styleable DOM elements so
given calendar has some DOM structure inside.
This way calendar can be styled by using CSS for various use cases and 
designs.

Imagine that such calendar has following structure:

<input type="calendar">
   <button class="prior">&larr;</button>
   ...
   <button class="next">&rarr;</button>
   <table class="month">...</table>
</input>

Problems with such "aggregate controls"
1) their style system has to be isolated  from outside, so
   style with selector "td" defined in the outer document will not
   match <td>'s inside  <input type="calendar">.
2) It is highly desirable that system of styles be assignable
  as a whole system - either all styles either none of them.
3) Such compound input elements can introduce
  pretty large number of rules needed to define default
  appearance so it should be some mechanism that allow
  to reduce computational complexity of style resolving.

To solve these problems I've implemented feature what I
name "style sets".  Style set is a named block of styles similar
to media block in current CSS:

@set std-calendar /* name of the style block*/
{
    :root { ... } /* :root matches element this set applied to */
    table { .... }
    button { ... }
}

I've also added new property "style-set" to the list of CSS attributes,
so assignment of the style set to the DOM elements happens again
in CSS:

input[type="calendar"]
{
   ...
   style-set: "std-calendar"; /* name of style set above */
}

Having "style-set" as an attribute allows to assign different
stylesets using normal CSS cascading rules:

#myblog .right-sidebar input[type="calendar"]
{
   style-set: "my-calendar";
}

style set establishes local and closed style system for the
element it is applied to. Inside the style set block :root selector
matches element this style system applied to.

One style set can be derived from another one:

@set my-calendar < std-calendar
{
    :root { color: blue; }
}

if this new style system needs to override just some of styles/attributes.

Primary purpose of style sets in htmlayout engine is to be used
in "master style sheet" (a.k.a. intrinsic style table)
See: 
http://www.terrainformatica.com/wiki/h-smile:built-in-behaviors:master_style_sheet

And this is it, terribly sorry for the long message. Hope someone
will find this idea useful one day.

Andrew Fedoniouk.
http://terrainformatica.com

Received on Saturday, 10 February 2007 09:25:30 UTC