W3C home > Mailing lists > Public > www-style@w3.org > November 2012

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

From: François REMY <francois.remy.dev@outlook.com>
Date: Fri, 30 Nov 2012 19:28:19 +0100
Message-ID: <DUB120-DS1151C2D03E1CE310935450A5430@phx.gbl>
To: "Rik Cabanier" <cabanier@gmail.com>, "www-style list" <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT