Re: [csswg-drafts] [css-values] enable the use of counter() inside calc() (#1026)

Relates to spec item: https://drafts.csswg.org/css-lists-3/#counter-functions

A major styling issue front-end developers and designers experience is when they are tasked with dynamically changing styling of repeated elements. As of writing this is normally done either via swaths of `:nth-child()` and/or Javascript.

Permitting the use of counters within calc() can greatly simplify and condense such verbose code.

Let's say we wanted to animate each of the following list items in a cascade.

```html
<ol>
 <li>Foo</li>
 <li>Bar</li>
 <li>Bizz</li>
 <li>Buzz</li>
</ol>
```
Currently it has to be manually like so:

```css
@keyframes reveal { 0% { opacity:0; } }
ol>* { animation: reveal both 3s; }
li:nth-child(1) { animation-delay: 0.5s; }
li:nth-child(2) { animation-delay: 1s; }
li:nth-child(3) { animation-delay: 1.5s; }
li:nth-child(4) { animation-delay: 2s; }
```

When the number of items or timing changes, each element must be revised.

However, counter values allow code that is:
- much more succinct, less verbose
- easier to revise and maintain
- less fragile

```css
@keyframes reveal { 0% { opacity:0; } }
ol>* {
 animation: reveal both 3s;
 animation-delay:calc( counter-value(list-item) / 0.5s );
}
```

This opens up the world to so many other effects that were limited to JS and annoying manual composition in a clean form...  although my creative juices are running low - I bet someone more creative such as @argyleink can come up with many other fun uses.

Perhaps limiting use to the special reserved [list-item](https://drafts.csswg.org/css-lists-3/#list-item-counter) to start with could guarantee some sort of baseline to get the rest sorted? My concern as an end user is that other potential methods (Such as the `@property` example shown in a comment above) don't have the clarity that a counter value, 'n' of nth-child, or the proposed `sibling-index()` have...

-- 
GitHub Notification of comment by alystair
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1026#issuecomment-1247631054 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 15 September 2022 06:18:12 UTC