Re: [css3-value] calc and child selectors (was: Proposal for Touch-Based Animation Scrubbing)

I’ve a better proposal for this in the CSS Custom Properties and References 
spec. The idea would be to rely on the value of a counter.

    .carousel {
        counter-reset: index;
        & > img {
            counter-increment: index;
            animation-delay: get(1s * counter index);
        }
    }

That way, you can do nice things like :

    /* now there will be two images with the same value each time */
    .carousel {
        counter-reset: index;
        & > img:nth-child(2n) {
            counter-increment: index;
        }
        & > img {
            animation-delay: get(1s * counter index);
        }
    }

Or even like that:

    /* now the images are embeded inside a figure tag */
    .carousel {
        counter-reset: index;
        & > figure:nth-child(2n) {
            counter-increment: index;
        }
        & > figure > img {
            animation-delay: get(1s * counter index);
        }
    }

We could probably define an alias for 'nth-child' but people would quickly 
ask 'nth-of-type' and then 'what if I want only to change every time I see a 
BR' or things like that. Genericity FTW.





From: Rik Cabanier
Sent: Friday, November 30, 2012 7:14 PM
To: www-style list
Subject: [css3-value] calc and child selectors (was: Proposal for 
Touch-Based Animation Scrubbing)
Please disregard if this was already brought up.

While looking at Tab's proposal for an image carousel, I saw the following 
idiom:

.carousel > img:nth-child(1) { animation-delay: 1s; }
.carousel > img:nth-child(2) { animation-delay: 2s; }
...



Could this be replaced with a new keyword for calc()?
For instance, if you want all the images under .carousel to turn one by one, 
you could write:

.carousel > img { animation-delay: calc(nth-child * 1s); }


This new keyword would only be valid inside a child selector and return the 
sibling order.

Received on Friday, 30 November 2012 18:28:40 UTC