Contact emailsfuth...@chromium.org, se...@chromium.org Explainer https://github.com/w3c/csswg-drafts/blob/main/css-values-5/tree-counting-explainer.md
Specificationhttps://drafts.csswg.org/css-values-5/#tree-counting Design docs https://github.com/w3c/csswg-drafts/blob/main/css-values-5/tree-counting-explainer.md Summary sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used directly as integer values, but more interestingly inside calc() expressions. Example: li { margin-left: calc(10px * sibling-index()); } Blink componentBlink>CSS <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> TAG reviewhttps://github.com/w3ctag/design-reviews/issues/1068 TAG review statusIssues addressed Risks Interoperability and Compatibility None *Gecko*: No signal ( https://github.com/mozilla/standards-positions/issues/1194) *WebKit*: No signal ( https://github.com/WebKit/standards-positions/issues/471) *Web developers*: Positive https://css-tricks.com/how-to-wait-for-the-sibling-count-and-sibling-index-functions/ https://chriscoyier.net/2023/11/29/element-indexes/ https://kizu.dev/tree-counting-and-random/ *Other signals*: WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? None Debuggability Basic support out-of-the box. With the value debugger (crbug.com/396080529) shipped, evaluating sibling-index()/sibling-count() into a <number> should work out-of-the-box. Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?Yes Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ?Yes https://wpt.fyi/results/css/css-values/tree-counting Flag name on about://flags#enable-experimental-web-platform-features Finch feature nameCSSSiblingFunctions Rollout planWill ship enabled for all users Requires code in //chrome?False Tracking bughttps://crbug.com/40282719 Sample links https://codepen.io/argyleink/pen/KwKXPYW Estimated milestones Shipping on desktop 138 DevTrial on desktop 133 Shipping on Android 138 DevTrial on Android 133 Shipping on WebView 138 Anticipated spec changes There is an open issue[1] about what tree counting functions mean outside of element contexts. The plan is to handles tree counting functions like this for the relevant @-rules when shipping: - @font-face: invalid at parse time - @font-palette-values: invalid at parse time - @property: accepted at parse time (the values are strings), but since these values are not computationally independent when evaluated, they will be dropped as initial values. - @counter-style: invalid at parse time - @container: the container is in an element context and tree counting functions are evaluated as such - @page: accepted at parse time and evaluated against the root element - @media (in query value): invalid at parse time Shipping a different specified behavior for tree counting functions in these contexts (to what the issue is resolved to later) should be straightforward. [1] https://github.com/w3c/csswg-drafts/issues/10982 Link to entry on the Chrome Platform Status https://chromestatus.com/feature/6225478530367488?gate=6089164107546624 Links to previous Intent discussionsIntent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67c70d35.2b0a0220.36af1.0007.GAE%40google.com This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- Rune Lillesveen -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeTS2BYBs8yqpNXnJa5tAMwPar4X3jOPtLddMydRX0oEoA%40mail.gmail.com.
