Skip to content
What are you looking for?. Open searchSR
brands and shortcuts
Webmedium signalverifiedsupport checked August 22, 2026

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.

By Redakcija WebAiRadarPublished 2 min readwritten by a model

Source

Firefox 154 donosi sibling-index(), sibling-count() i text-box-trim

MDN Blog · Original published August 18, 2026

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.
„The index starts at 1, not 0.“
MDN, Firefox 154 release notes
TagsFirefoxCSStypographyanimationJavaScript

Related

The prefix selector, a hyphen followed by an asterisk, set between two oversized curly braces.
Webmedium signal

A class prefix selector is now spec text in Selectors Level 5

The draft of August 18 adds section 2.1, Class Prefix Selectors, defining .foo-* to match any class beginning with that prefix. It replaces the attribute-selector workarounds every design system carries. Nothing implements it yet, and the matching rule has an edge that will catch people: .foo-* does not match foo--bar.

CSS Working Groupverified

The Baseline wordmark beside its double check mark, on a pale green field.
Webmedium signal

Put Baseline in CI so the browser stops deciding for you

Three packages and about 20 minutes. One config tells your build which browsers you target, a linter warns when a stylesheet reaches past that line, and CI says it on the pull request instead of a user saying it in a bug report six weeks later.

web.dev, npmverified

SVGSMILa timing chart before the markup
Webweak signal

A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a method in which a complex SMIL animation is first drawn as a timing chart and only then written in markup. Every bar on the chart corresponds to one animate element, and its length and position become the values of the dur and begin attributes. Because a single animate changes exactly one property of one element, the count climbs fast: a three-dot loader takes six of them. The piece also covers synchronizing to another animation's start or end through the begin attribute, and honoring prefers-reduced-motion through the picture element.

Smashing Magazineverified