[css-values-5] Introduce sibling-index() and sibling-count() (#4559)
#9134
Conversation
css-values-5/Overview.bs
Outdated
|
|
||
| Issue: Describe when it actually resolves. Computed Value? Used Value? |
There was a problem hiding this comment.
Definitely resolves computed-value-time, no reason to wait any longer.
css-values-5/Overview.bs
Outdated
| Getting the position of an element within its siblings: the ''sibling-index()'' function</h3> | ||
|
|
||
| The <dfn>sibling-index()</dfn> function resolves to the position | ||
| of an element within its group of <a>inclusive siblings</a>. |
There was a problem hiding this comment.
Might want to clarify that it's the inclusive flat tree siblings, which is what we want (I assume).
There was a problem hiding this comment.
Clarified in 30de15b, but not sure if my wording is 100% correct.
There was a problem hiding this comment.
We don't use flat tree order for :nth-child(). I think we want :nth-*() and sibling-index() to be consistent?
| ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ████ ██ ██ | ||
| ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██ | ||
| ████████ ████████ ████████ ██ ██ ████████ ██ ██ ██ ██████ ███████ ███████ ██ ██ ██ ████ ██ ██ ██████ | ||
| --> |
There was a problem hiding this comment.
Nit: Keep these headings as short as possible; if they wrap (as they definitely will on many screens, given how long these lines are) they become unreadable. I'd probably just do "COUNT" or maybe two lines having "INDEX" and "COUNT".
|
|
||
| The ''sibling-index()'' and ''sibling-count()'' functions | ||
| (the <dfn export for=CSS>element counting functions</dfn>) | ||
| allow authors to take these factors into account in ''calc()'' expressions. |
There was a problem hiding this comment.
| allow authors to take these factors into account in ''calc()'' expressions. | |
| allow authors to take these factors into account anywhere that allows <<integer>>s, | |
| such as in [=math functions=]. |
There was a problem hiding this comment.
(Just a light rewrite to avoid implying that these are only valid in calc().)
| allow authors to take these factors into account in ''calc()'' expressions. | ||
|
|
||
| With these, authors can create things like staggered animation delays | ||
| or easily position elements on a circle. |
There was a problem hiding this comment.
| or easily position elements on a circle. | |
| or easily position elements evenly around a circle. |
| The <dfn>sibling-index()</dfn> function resolves to the position | ||
| of an element within its group of <a>inclusive siblings</a> |
There was a problem hiding this comment.
| The <dfn>sibling-index()</dfn> function resolves to the position | |
| of an element within its group of <a>inclusive siblings</a> | |
| The <dfn>sibling-index()</dfn> function resolves to the <<integer>> | |
| representing the element's index within its list of <a>inclusive siblings</a> |
| The <dfn>sibling-count()</dfn> function resolves to the total number of | ||
| <a>inclusive siblings</a> in the <a>flat tree</a> an element is part of. |
There was a problem hiding this comment.
| The <dfn>sibling-count()</dfn> function resolves to the total number of | |
| <a>inclusive siblings</a> in the <a>flat tree</a> an element is part of. | |
| The <dfn>sibling-count()</dfn> function resolves to the <<integer>> | |
| representing the total number of the element's <a>inclusive siblings</a> | |
| in the <a>flat tree</a>. |
|
With 762eace, I guess this can be closed. |
|
Yes, thanks for closing this one @Loirooriol. I was preoccupied with Other Important Things™ + some time OOO, so never got round to reviewing the suggested changes in this thread. |
A first, and possible naive, attempt at speccing
sibling-index()andsibling-count(). Very much open to feedback on how to do this properly.