Intent to Prototype: CSS sibling-index() and sibling-count()

[Chromestatus]

Contact emails

fut...@chromium.org, se...@chromium.org

Explainer

https://github.com/w3c/csswg-drafts/blob/main/css-values-5/tree-counting-explainer.md

Specification

https://drafts.csswg.org/css-values-5/#tree-counting

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 component

Blink>CSS

Motivation

From the explainer: "Authors have been asking for a convenient way of styling elements based on their DOM position among their siblings as well as the total number of siblings. Example use cases for this are staggered animations setting the animation- or transition-delay based on the sibling position, and building a radial menu."

Initial public proposal

None

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: No signals

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

None

Is this feature fully tested by web-platform-tests?

No

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6225478530367488?gate=5089301572091904

This intent message was generated by Chrome Platform Status.