[csswg-drafts] `[css-values]` Proposal: `descendant-count()` function (#11069)

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

== `[css-values]` Proposal:  `descendant-count()` function ==
This is a more powerful/versatile version of my previous `children-count()` proposal (https://github.com/w3c/csswg-drafts/issues/11068).

## The Proposal

Unlike `children-count()`, this one counts _all_ descendant elements.

If we were to approximate it with JS, it could be something like `el.querySelectorAll('*').length`.

I imagine this function being the most useful with the optional selector (so the https://github.com/w3c/csswg-drafts/issues/9572 must be resolved first), as it allows narrowing down what exactly we want to count.

Example usage:

> An accumulated padding based on the count of nested lists:

```CSS
.table-of-contents {
 padding-inline-start: calc(
  1ch
  *
  descendant-count(ul:first-of-type)
 )
}
```

### Other use cases

- Same as `children-count()`, but when there are extra wrappers between the element on which we need to get the value, and the items: it could happen easily with `display: contents` or subgrids.
- A way to check if we have some content in a way similar to `:has()`, but where we get the count of elements as the result.

### Why not just `descendant-count()`?

Can we have just it, and skip the `children-count()` I think that we need both:

- Most use cases could just use `children-count()`, while `descendant-count()` could be used for more complicated use cases.
- `descendant-count()` is harder to spell compared to `children-count()`
- `children-count()` will be likely more performant (fewer DOM changes will cause a recalc), so it will be better than `descentant-count(> *)`, and an alternative of having `> *` as the default value for the `descentant-count()` would not be too logical.
- `children-count()` sounds like a much easier thing to implement. While I would prefer both to be implemented alongside `sibling-index()` and `sibling-count()`, if the complexity of `descendant-count()` will be problematic, I don't want it to be a roadblock.

### Could this be a selector instead?

I think we need both, as in one case we conditionally apply some styles, and in another we use the count itself for some purpose. I will try to fill a separate proposal for such a selector in the future.


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


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

Received on Tuesday, 22 October 2024 08:02:59 UTC