[csswg-drafts] [css-lists][css-counter-styles] use counter() / counters() value inside calc() (#5691)

ramiy has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-lists][css-counter-styles] use counter() / counters() value inside calc() ==
Currently we can't use the `counter()` / `counters()` **value** outside on the `content: '';` tag.

See this code:

```css
ol {
  counter-reset: my-counter 4;
}

ol > li {
  counter-increment: my-counter 2;
  width: calc( 10% * counter( my-counter ) );   /* Currently this is not possible */
  background-color: red;
}
```

When using **Numeric counters**, we should be able to use the **counter value** inside the `calc()` functional notation (or any other math function - `min()`, `max()` etc).

This will allow us to style the elements based on the location of the element inside the list. Example use case is to use the counter to retrieve the element position in the list and to calculate different gradient designs.

### Alternatives

There are some alternatives like the `:nth-child(3)`, but it has no functional notation like `counter()` that allows you to retrieve the child element position value to be used inside `calc()`.

### Powerful Capabilities

Counters can be very powerful as you can set initial values (positive and negative values) and increase / decrement by any integer. But currently we are very limited with their use. Let's change that.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5691 using your GitHub account


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

Received on Monday, 2 November 2020 17:08:56 UTC