← Back to all briefs
CSS55s read

Firefox 154: text-box and sibling-* Complete Cross-Engine Support

Firefox 154 is the last gap: text-box and the sibling functions now work in every major engine, so you can delete the JavaScript and utility-class hacks doing their job.

Firefox 154 closes the last cross-engine gap on two CSS features you have probably been polyfilling. The text-box family (text-box-trim, text-box-edge, and the text-box shorthand) now trims the leading space above and below a line of text in pure CSS, and it works across all three major engines. That is the real fix for the button that sits a couple pixels too tall and the single-line heading that refuses to center, the ones you have been patching with line-height tweaks and negative margins.

The sibling functions land in the same release. sibling-index() and sibling-count() style an element by where it falls among its siblings and how many there are, and every major engine supports them now. You can delete the JavaScript that computes "third child of five" for grid spans or zebra striping and write one CSS rule per case instead of a resize listener.

The rest is smaller but worth a skim. No-Vary-Search tells caches to ignore query parameters you do not care about, so your product page stops missing the cache every time a tracking parameter changes. The new iterator methods (chunks, windows, includes, join) take some work off lodash for array pipelines. And input type="time" and datetime-local finally render a native time picker, enough to drop the heavy picker widget from a basic form.