Firefox 154 brings sibling-index(), sibling-count(), and text-box-trim

Firefox 154 shipped on August 18. Three CSS features solve problems that until now required JavaScript or manual arithmetic in the design: counting sibling elements and removing the extra space around text.

sibling-index() and sibling-count()

These two functions give CSS what previously came only from a template or a script. The first returns an element's position among its siblings, the second their total, counting the element itself.

One detail is easy to miss: counting starts at one, not zero — like :nth-child(), not like a JavaScript array.

• A staggered animation delay is written as animation-delay: calc(sibling-index() * 60ms), instead of variables hand-written onto every item.
• A color ramp through a list comes from computing color, opacity, or offset out of the ratio between sibling-index() and sibling-count().
• On dynamic lists the values recompute themselves the moment an item is added or removed, without a line of script.

text-box-trim and text-box-edge

Every font carries extra vertical space above the capitals and below the baseline. That is why a heading in a browser never sits exactly the way it looks in the design, and the difference has been patched for years with negative margins that break the moment the font or size changes.

These declarations, together with the text-box shorthand, remove that excess at the level of the text box itself, so spacing in grid and flex layouts finally becomes predictable. The benefit is largest when one block mixes fonts with different metrics.

JavaScript and developer tools

• The iterator prototype gains includes(), join(), chunks(), and windows(); of the last two, chunks splits an iterator into consecutive arrays and windows produces a sliding window.
• The JSON viewer in developer tools shows the path of the selected entry as a breadcrumb trail at the bottom of the panel.
• WebDriver BiDi gains browsingContext.startScreencast and stopScreencast for video capture, along with download identifier tracking.

Behind a flag, for now

Several features arrived but are off by default. They are worth watching because they signal the next round.

• Unprefixed line-clamp, behind layout.css.line-clamp.enabled.
• The CSS progress() function, for a value computed from progress between a minimum and a maximum.
• Percentage values for text-decoration-inset, computed against the font size.
• CSS Typed Object Model Level 1, for now only in the development build.