August Web Platform Digest: text-box and sibling-* Hit Baseline
text-box and sibling-count()/sibling-index() are now Baseline, so you can drop the JavaScript workarounds for precise typography and dynamic layouts.
1 source
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.
text-box and sibling-count()/sibling-index() are now Baseline, so you can drop the JavaScript workarounds for precise typography and dynamic layouts.
1 source
Firefox 156 now reports `::-webkit-scrollbar` as unsupported in `@supports`, flipping negated feature queries onto standard scrollbar properties, and moves `text-box-trim` onto `::first-line` metrics.
1 source
The :open pseudo-class is now supported in every major browser, letting you style open states of <dialog>, <details>, and <select> without JavaScript or custom attribute toggling.
2 sources