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

The August 18 release adds three CSS features you can use right away. sibling-index() and sibling-count() give an element's position among its siblings and their total, directly in CSS and without a line of JavaScript, which ends the need to hand-write variables like --i for staggered animation delays. Alongside them come text-box-edge, text-box-trim, and the text-box shorthand, which remove the extra space above and below text so headings finally sit in the grid the way they look in the design. On the JavaScript side, includes(), join(), chunks(), and windows() were added to the iterator prototype.

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.