argyleink / argyleink/open-props

Add sibling-index and sibling-count as custom properties

Open
#506 7 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
5.5k
Forks
216
PR merge metrics
No merged PRs in 30d

Description

A bit silly feature idea: introduce optional import(s) (or JS generator in the "bookmarklet" include) emulating upcoming [sibling-count() and sibling-index()](https://github.com/w3c/csswg-drafts/issues/4559) proposal (by some @argyleink dude) in a brute-force ad-nauseam low-key manner:

### `--sibling-index`

```CSS
*:nth-child(1) { --sibling-index: 0; }
*:nth-child(2) { --sibling-index: 1; }
/* ... */
*:nth-child() { --sibling-index: ; }
```
(*), and similarly

### `--sibling-count`

```CSS
*:has(> *:last-child:nth-child()) > * { --sibling-count: ; }
```

or for super backwards ":has()-less" compatibility (or perhaps better performance(?)) the way Lea showcased in the distant past:

```CSS
*:first-child:nth-last-child(),
*:first-child:nth-last-child() ~ * { --sibling-count: ; }
```

Open question remains what initial threshold to pick (1-99?) and whether pre-generate further chunks (100-999, 1000-9999, ...?) in separate includes.

Most probably ideal alternative to includes in client-side environments with scripting available could be a dynamic JS polyfill with lazy mutation observer spitting out additional chunks into in-page `` when maximum sibling count increases somewhere in the tree..

---

(*: I am consciously proposing zero-based indexing here as god intended, even though I clearly know it has zero-chance to be adopted this way; I just had to try 🙃. For `1`-based property I'd propose `--sibling-order`. )

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the existing optional includes and the JavaScript generator in the "bookmarklet" include, then compare the CSS-only and dynamic polyfill approaches described here. Resolve the initial sibling-count threshold and indexing convention before implementation. Done means the chosen approach provides both custom properties with documented limits and coverage for the supported range.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.