[csswg-drafts] [css-values] Proposal: `children-count()` function (#11068)

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

== [css-values] Proposal: `children-count()` function ==
## Problem

In the https://github.com/w3c/csswg-drafts/issues/4559 it was resolved to add two new functions which are now in the [css-values-5 WD](https://www.w3.org/TR/css-values-5/): `sibling-count()` and `sibling-index()` as [tree-counting functions](https://www.w3.org/TR/css-values-5/#tree-counting) (I'm using that issue as a template for this one, thanks @argyleink!).

However, these functions only cover a subset of the needs authors have when it comes to knowing the number of items. Sometimes, you want to know that value not on the _item_, but on its _parent_ (and, sometimes, on another ascendant element — see my separate related proposal).

## Proposal

A new function: `children-count()`. Similar to `sibling-count()` and `sibling-index()`, it should report its values based on the element count, and not the node count.

It is a function that is _very_ similar to `sibling-count()`, but instead of counting _siblings_ counts _children_.

Similarly, could optionally accept a selector (see https://github.com/w3c/csswg-drafts/issues/9572) as a way to narrow down what is counted as a `child`.

Example usage:

> A square grid based on the children count

```CSS
.square-grid {
  display: grid;
  grid-template-columns: repeat(
    sqrt(children-count()),
    min-content
  );
}
```

### Do we still need `sibling-count()`?

Yes. While we could assign the `children-count()` to a registered custom property and inherit it on the children, this is rather cumbersome, and a native `sibling-count()` could be more performant.

### Other use cases

- I have the above in some other use cases in [my latest article](https://kizu.dev/tree-counting-and-random/).
- Any place that needs to change the parent's layout based on the children count: bento-layouts, layouts where children are absolutely positioned and we need to set the parent's dimensions, etc.
- I'll update this list with the links as I encounter them.

## See also

There is an additional proposal: `descendant-count()` that attempts to do a similar thing, but in a more flexible (and complicated for an implementation) way.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11068 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:37 UTC