text-wrap: balance 🤤 anchor() 🤯

Will we see sub-grids on Chrome this year?

Last time I started learning the latest CSS changes I literally almost couldn’t code without it. I need to restrain myself until these get mass-adopted!

I was recently looking for a way to keep the scroll-anchoring for a GPT-streamed chat window anchored to the bottom so that as the AI types and a new line begins, the user doesn't need to scroll down each time that happens to keep reading. Though, automatically scrolling the… twitter.com/i/web/status/1…

@jaffathecake `linear()` looks exciting! Could there possibly be a way to piece-wise use some linear portions and portions using other easing functions like `cubic-bezier()` to produce easing like easings.net/#easeInOutBoun… that could have some flat portions and static points, but… twitter.com/i/web/status/1…

@jh3yy Do you know of a way to achieve this without JS— essentially setting the default scroll position of a box to its bottom-most scroll-point instead of its top-most scroll position?

😀 twitter.com/jaffathecake/s…

Thanks! From the ylook of the PR, it appeared, you could get close to a bounce effect, but it was essentially a bunch of static points tracing what mostly resembled a bounce easing, but it wasn't "truly" curved. Does this in fact provide access to both, linear points and curves?

Rad, thanks! 🔥

No it doesn't. But it's not a big deal if you ask me. You can still approximate them. Surely someone will come up with a tool that does just that :)

Working on it 😀

Try the demo in the previous tweet

(it's just lines, but it doesn't matter in practice)

Does it also get participation from other companies, too, seeing as Chrome will also benefit?

Sorry I wasn't clear: I meant I hope there are developers from the Chrome team a part of this too, since it runs in Chromium as well (as Edge does). My wish is more about cross-collaboration often producing highest-quality outcome. Didn't mean any shade. In fact, the opposite.

#css

I really liked this, check it out : - anchor() - text-wrap: balance - linear() - view-transition - view-timeline OH My! nerdy.dev/i-cant-keep-up… — Adam Argyle (@argyleink) Mar 3, 2023