3,356 views
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Neat CSS trick:

Use anchor to track the size changes in a textarea (or whatever) and transition instead of instantly update 🤘🏻

See on Codepen

12 comments #

380likes

natalie.sh, kripod.dev, ishadeed.com and 353 more

23reposts

and 16 others

Join the conversation on

@argyleink Noice. This good on all the browsers??
James KerrJames Kerr
@argyleink field-sizing + anchor transitions is exactly the kind of thing that kills a JS workaround. Fresh example of the workaround still winning: Threads' reply connector is 3 SVG pieces, first segment measured in JS on resize. https://t.co/oJtqK3DCKH
CecheLineCecheLine
@argyleink Check out this one ;) https://t.co/2tNF1Eh2FL
Alex InkinAlex Inkin
@Waterplea Sick 🤘💀 great use of view-timeline. Amazing what an overflow clip can unlock huh?
Adam ArgyleAdam Argyle
@argyleink it would have been really special if the video grew with it
JustinJustin
@specialCaseDev @argyleink 85.81% on caniuse
TanmayTanmay
But does it work in dark mode?! 😜
Anthony FrehnerAnthony Frehner
@argyleink A textarea that grows with the bug report. Finally, CSS understands scope creep.
PingCronPingCron
@argyleink field-sizing is one of those properties i keep forgetting exists
Calvin LaiCalvin Lai
@argyleink field-sizing: content paired with an anchor — this is the kind of CSS trick that makes me rethink entire components. Bookmarking the https://t.co/cVLxqaoT8e piece.
Nisar AhmedNisar Ahmed
@argyleink Nice use of anchors beyond positioning a tooltip. Does the textarea still keep the caret visible when a large paste makes it grow mid-transition?
Tornike SirbiladzeTornike Sirbiladze