[csswg-drafts] [css-scoping] Expose counter values for use as variable values (#12248)

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

== [css-scoping] Expose counter values for use as variable values ==
**What is the problem?**  
Currently, CSS counters can only be accessed via the `content` property and related counter functions. It is not possible to use the value of a counter in other CSS properties (e.g., as a number in `calc()`, or assign it to a custom property for use elsewhere).

**Why is this useful?**  
This would allow for more powerful, context-aware styling in trees, outlines, and other structured content, such as indenting, coloring, or sizing based on counter values.

**Proposed solution:**  
Expose CSS counter values as variables or allow their use in property value calculations (e.g., `margin-left: calc(counter(depth) * 1em);` or `--depth: counter(depth);`).

**References:**  
[CSS Counters Module Level 3](https://drafts.csswg.org/css-lists-3/#counters)
[CSS Variables](https://drafts.csswg.org/css-variables/)


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


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

Received on Wednesday, 28 May 2025 18:37:46 UTC