Frontend

father, husband, css golfer, ux engineer, silently defining variables as /sdv sdv.wtf

Motivating use case for me is transitioning heights and margins of hidden elements to zero while also accounting for margin “collapsing” behavior. Basically, if a hidden child is flanked on both sides by visible siblings with margin, it should offset one of those with negative margin in its “outro” transition so there is no visual break once it leaves the flow and the siblings’ margins collapse.

But yes, fair points – these selectors are situationally useful, performant the way regex lookahead assertions are performant, and effectively a polyfill hack for when a serious “nth of selector” proposal hopefully eventually lands in CSS…

Behold – a CSS `display: block;` layout that auto-transitions children based on `[hidden]` attributes, while accounting for `margin` collapsing behavior. No JavaScript FLIP animations or DOM removal required.

Made possible with modern CSS syntax:
• `@starting-style`
• `transition-property: display` / `transition-behavior: allow-discrete`
• `interpolate-size: allow-keywords;`
• `:has()`

Behold – a CSS `display: block;` layout that auto-transitions children based on `[hidden]` attributes, while accounting for `margin` collapsing behavior. No JavaScript FLIP animations or DOM removal required.

Made possible with modern CSS syntax:
• `@starting-style`
• `transition-property: display` / `transition-behavior: allow-discrete`
• `interpolate-size: allow-keywords;`
• `:has()`

https://svelte.dev/playground/28dfad59584043e8b367066c99e8bef7?version=5.16.1

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

wow, this is mind-blowing! never thought css could handle transitions like this. awesome work! definitely gonna try this out on my next project. 🙌🔥