 I wrote a new article: “Possible Future CSS: Tree-Counting Functions and Random Values” https://kizu.dev/tree-counting-and-random/ Many exciting things were added to #CSS specs over the years, but some have yet to be implemented by browser engines. In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with what we have in CSS today, and provide several interactive demos of their use cases. 4 comments
As usual, the credits: - @argyleink, Jonathan Neal, Giorgio Pretto, Sebastian Malton & Oriol Brufau for CSSWG issues related to `sibling-index()` and `sibling-count()`. - @tabatkins & Benjamin De Cock for CSSWG issues related to `random()`. - Michal Čaplygin for an issue about tree-counting functions in Open Props. - @heydon, @leaverou & @me for Quantity Queries. - @leaverou and Alex Walker for the articles on cicada principle. - @kevinpowell for his talk at CSS day. [1/2] [2/2] - @leaverou for her articles on conditional CSS. - @anatudor for all her demos that use index and count of elements. - @amit_sheen as well, for all his 3d demos, including the recent one for the text going in a circle. - @Una for her radial menu demo. - @shadeed9 for a radial list on his recently redesigned homepage. Alongside the article, I opened 3 CSSWG proposals: - https://github.com/w3c/csswg-drafts/issues/11067 — about rounding to a scale (thanks @matthiasott and @fantasai for motivation) - https://github.com/w3c/csswg-drafts/issues/11068 — about `children-count()` (thanks @argyleink for the issue template) - https://github.com/w3c/csswg-drafts/issues/11069 — about ` descendant-count()`. |
Gregory's Server
Note: currently, it might not work in mobile Safari. I spent a few hours trying things, the latest dev deploy of my site worked, but the prod one does not.
If you cannot open it by the link about in Safari, a workaround that works for me (but still slow) is to go to https://kizu.dev directly and then go to the article.
Will investigate later again, but oh well. Sorry.