Re: [css3-value] calc and child selectors

|  > I'm pretty sure it's possible to substitute the reference by a value
|  > at computation time (which is required if we want it to be a
|  > reference).
|
|  I'm pretty sure it's not, if you really mean computed style time.

Hum, you convinced me with the 'dipslay: not-none' that becomes 'display: 
none' at used time. Well, there's still the option to define a new kind of 
counter (let's say an 'index') that only applies based on the tree and not 
on the final visibility of an element. Basically, this is what 'nth-child' 
is. I guess that, in most cases, either the actual visibility is not an 
important issue in the use cases where we want to use index in property 
values *or* you can as an author define special rules to prevent the 'index' 
to be incremented in the cases you just defined the element to be hidden.

What I propose is a model where the 'index' of each node can be caculated 
beforehand (or, in an actual implementation, on-demand at any time) based on 
some specific CSS rules. Similarily to counters, you can 'increment' or 
'set' an index value on any element. To the contrary of counters, when you 
reset the value of a counter, you don't create a nested counter by default. 
To create a nested counter, you can use the 'nest' command which creates a 
new indexer that only applies on the descandants of an element (and not on 
the element itself).

So, the 'nth-child' index is basically defined as

    @indexes {
        * { nth-child: increment(1) nest(0); }
    }

We can also define nth-of-type(li) as

    @indexes {
        ul { li-index: nest(0); }
        ul > li { li-index: increment(1); }
    }

Or a simple li counter (let's say you want to apply an animation delay to 
make each LI appear 5s later than the previous one à la PowerPoint):

    <ul>
        <li>5s</li>
        <li>
            10s
            <ul>
                <li>15s</li>
                <li>20s</li>
            </ul>
        </li>
        <li>25s</li>
    </ul>

    @indexes {
        li { li-index: increment(1); }
    }

    li { animation-delay: get(5s * index li-index); }

Or an "index-in-line" counter for multiline toolbars:

    @indexes {
        menu { in-line: nest(0); }
        menu > * { in-line: increment(1); }
        menu > br { in-line: set(0); }
    }

    menu > * { animation-delay: get(0.1s * index in-line); }

To the countrary of counters, an index could be resolved only from the dom 
information so we should be able to use them at computation time. This is 
also less verbose to define than counters.

We could probably allow to use them in selectors via a custom pseudo-class 
like ":nth(li-index, 2n+1)"; if we do that, that means we solved the general 
case of selecting the nth-of-anything and we don't need to add any more 
:nth-of-xxxx pseudo-class to CSS.

Received on Sunday, 2 December 2012 14:27:00 UTC