This CSS Property Replaces Hundreds of Lines of Code

[@alexanderst.7993]

I'm not a frontend dev anymore but i still come back just to see the head wobbling. It's great

[@jaredlash5002]

My guy throws his head around more than Ray Charles.

[@eqprog]

I somehow never noticed this until reading your comment. Now it’s all I can see.

[@brett84c]

Haha, y'all are mean. He might have some kind of movement disorder.

[@ToddPressleyy]

Ahahahaha… so irreverent.

[@krasavchiklite]

u left cause AI scared you?

[@mistergurr]

This is nice, but Discord as an example is a tad misleading for the use case here. Discord doesn’t use a textarea, they use a contenteditable div because their chat input is a “rich editor” (so they can display mentions, custom emojis, markdown etc inline in the editor). This is the direction many applications are heading, and text areas are becoming less useful over time. Still a nice feature for those times where they are useful. If anyone is curious, Discord’s chat input is built with a headless editor called Slate.

[@Jaime.02]

Extremely interesting comment, thanks!

[@im-nassinger]

​@@Jaime.02100% agree

[@JohnWickXD]

Thanks for the information ❤

[@johnadams6249]

will try this out for my project !

[@ukaszzbrozek6470]

It reminds how before "scroll-behavior: smooth;" was added I had to wrote JS function for smooth scrolling. It's great that CSS is making more things easier.

[@aqua-bery]

I love front end videos from a professional head shaker!

[@sicfxmusic]

Wake me up when this gets support on 90% of browsers!

[@Astral100]

Exactly.

[@rubenreyes2000]

Right. Until this is widely supported (hello Safari and Firefox!) it's unfortunately useless

[@dutscherydo]

safari and firefox are the new ie6. only chrome is the one. progressive enhancement will bring these both browsers in stress :D

[@core36]

@@dutscherydo I can’t let you slander my bois just like that. Firefox and Safari struggle to keep up with chrome clones, Microsoft didn’t care about implementing new features into internet explorer because they enjoyed their huge market share from the windows bundle. Huge difference. Don’t you ever compare those, or I’ll come into your house and break your pasta 🤌

[@dutscherydo]

@core36 hehe come here and eat my Pasta :D chromatic with storybook tests all browsers for us and there you can See that firefox and safari has the most struggle with simplest things like focus elements or animations. Its like the early web dev years with ie6.

[@mohankrishna6934]

00:29, when he said that, I felt happy and emotional at the same time. I am currently struggling a lot with designing my SaaS product. There are very few people like Kyle who dedicate a lot of work for developers like me. Thanks a lot bro.

[@Kokityo]

I've been waiting 10 years for this property

[@im-nassinger]

lol

[@Rami-bi9xj]

could've made it since then

[@maciejzettt]

Only 10? 😂

[@Kokityo]

@@maciejzettt maybe more 😆

[@welling1]

And now we get to wait for other browsers to impliment it.

[@Martin-dw9vm]

This is insane timing, just a couple of hours ago I was stressing about how hard this was to implement. Just replaced everything with a couple of lines of code and couldn't feel better. Appreciate it 🤝

[@MelMacaluso]

Good luck with browser support tho ahah

[@Martin-dw9vm]

@MelMacaluso that's a really good point, will have to do some testing

[@MelMacaluso]

@@Martin-dw9vm It basically cannot be used in a commercial environment (yet)

[@bugged1212]

Already used it on a recent project, it's in tailwindcss 4.

[@iThou001]

You are really simplifying the web for us. Thanks.

[@tchpowdog]

This is cool, but in my experience, textarea is becoming antiquated. It's good for raw text input on forms, but.. that's kind of it. Most other situations nowadays require some type of rick content within the text block. So you use a div with contenteditable="true". I wish there were more/better native features for contentedible divs.

[@Efecretion]

text-area is critical in many use-cases. Specifically, internal tooling at companies often involve attaching plain-text notes to flags and keep track of such things. Rich text can be nice in some cases, but due to how quickly the engineers are going and how many things they're responding to, it's not practical. I do have the ~80 loc JS bit to auto-grow my text-area, and I will certainly be using this new feature!

[@erik_the_red]

I really wish you led with the fact that it was only supported in Chromium. I generally do not implement features like this unless the browser coverage is there.

[@ghotifish1838]

I spent ages trying to build something like that before giving up and just settling with the one liner for a search bar lol

[@adityaanuragi6916]

Ran into this problem when making my own notes app Used the useLayoutEffect hook and it worked wonders I know this video is with CSS only and but incase someone is stuck with it in React like me I thought this'd help Great video btw

[@nageshgorthi2764]

Nice explanation 👌

[@ScriptyVijay]

field sizing looks cool 😁 will use this in my project.

[@eddie_dane]

A brand new thing, I am never gonna use!

[@komiljonyormurodov3979]

cool feature. hope that it will be supported soon in all major browsers

[@tubero911]

Love to see the HTML and CSS folks taking 20 years to introduce trivial table stakes features like this.

[@DamianNAudio]

The only use case I can think of is some sort of "add new tag" input (input that looks like a new tag). But it's pretty easy to do with ResizeObserver

[@DanielZ1337TM]

I have begun just covering his face with my hand on my screen, because I cannot do it with the head wobbling 😭

[@serogaiusufir9615]

i remember having headache doing this on my chat app, good update !

[@GilGoldshlager]

Finally! thank you for the info, I hope it will also become supported in other browsers soon as well 🙏

[@df6148]

Content like this is why I subbed

[@exopencartru]

Never saw it as problem, just replace textarea with regular div, add contenteditable=true. If it's about send data to the server, add a few line of code to copy content of div to some hidden input. Of course one line of CSS is better, but even before it came out it wasn't a big deal💁‍♂

[@jwmfranke1]

This CSS Property Prevents Thousands of Head Wobbles: position: fixed

[@LV4EVR]

I can definitely see use cases for this. But ... come on Firefox!!!

[@AlexMercadoGo]

From my UX perspective, you really don’t want your input fields to default to 100% width because it suggests to the user that the input should be really long, when usually the input should be much shorter.

[@randomuser66438]

People type the requested information. No one cares about the width of the field. The 100% width is obviously a designer decision just like justified text.

[@mattythebatty1]

Looks good although in the meantime, rather than use 100's of lines you can use ``. If you want to handle forms in a simple way just add`` then add and event listener (oninput) to copy the content into the hidden input

[@thecheesycookie2767]

I was just looking for an easy way to do this yesterday, this is amazing!

[@suauhwang]

Regarding the select-element, it would be nice if they could add another option "max-content" to set the select content-width to the longest option available

[@GustvandeWal]

That is the default.......

[@suauhwang]

@@GustvandeWal oh wow, never realized that, must be me breaking it somehow.

[@GustvandeWal]

@@suauhwang Kyle explicitly showed and talked about this default behavior in the video. It is what made the property matter in the first place.

[@taquanminhlong]

Thanks for sharing, time to refactor my code 😂

[@harshanawijesinghe9264]

This is really usefull. And most importantly droped the right time 😂❤

[@retrotheft]

Oh wow. I've got a component in my app where this has been giving me grief... I got it to "almost good enough" months ago and haven't touched it since. Hopefully Firefox and Safari implement it soon.

[@gmnayeem25]

Thanks for sharing the helpful content ❤❤

[@muhammadzahidi6549]

Finally!!! Years of pain had to past tho...

[@cthinkzz]

How does these css properties implemented internally? Do they use Javascript? Or any other assembly language on the browser side?

[@rubenheymans1988]

Real life examples would be nice

[@789juggernaut]

Someone on the web actually spelled the word "you're" correctly.

[@JasonKaler]

are you're sure?

[@Yawn0]

What if you want the textarea to expand upwards instead?

[@manantrimbakey7955]

your content is good, (joking) your head bops like the thing (game) npc when they are in fear XD

[@amorenva]

css is unstoppable

[@StillK1ck1n]

very useful, thanks!

[@liadias8915]

Can I check if the browser supports it to use Javascript otherwise, or have I to get the browser version and manually trigger javascript based on the version hardcoded on my code?

[@cayjutler1262]

10 minute video to tell you that field size is based on the content

[@tuannguyenanh7466]

Yeah, the growing textarea was a nightmare to me. Thank you so much, it just WOW. But unfortunately it isn't widely support.

[@lostinthenarrativve]

Hey Kyle what microphone and audio interface do you use?

[@WebDevSimplified]

AKG P220 with a Scarlet solo 2i2 I think it is called. It is pretty old gear (probably 10 years old), but it works great.

[@litcoinwebservices]

what plugin can help me display acount balance and transactions in a wordpress website

[@TheMetalMag]

this is going so fast!

[@laszlovitticeps]

I doubt that '100s of lines of JS'.. but indeed it is/will be a useful feature.

[@bharatdubey83]

Waiting for your javascript backend course.

[@sbogdaniuk]

Wait, I did it with eaz 7 years before, I just put textarea absolute on top, with opacity 0, and it was just a metter of aligning styles inside div and textarea. What does that JS do?

[@jdfv9i]

Cool feature!

[@RonaldGrootJebbink]

For textareas you also can use `line-height: 3lh`. So it is always the height of 3 lines :)

[@chrisdedavid1860]

How many times have I tried to do this with Textarea Dynamically loaded components

[@adarsh9634]

How to nake this frow upward instead if downward?

[@doctorDevZ]

Insightful 🎉

[@zyt4zcn]

I think that until you specifically focus your attention on head wobbling, it actually makes his videos look more natural and gives the impression of more engaged storytelling. So, keep wobbling it, please.

[@dmitryutkin9864]

is this prop resource-heavy - causing rerendering?

[@ThomasGiles]

I do it in like 3 lines of JS. I'm not sure why hundreds of lines are required, honestly. And it seems I'll still do for now. Will be cool when it's more supported.

[@AmirHosseinBagheri]

Hundreds of lines of codes 😂😂

[@naimur634]

we are waiting for a reverse scrollable scrollview

[@threeone6012]

I will be deleting about 100 lines of JS and implementing this on a today. Safari and Firefox will get this sooner or later. Thank you!

[@aymenbachiri-yh2hd]

this is awesome

[@andreistein2429]

Holy moly 😮

[@3dchick]

That's so cool!

[@whynot9963]

I did this just the other day in less than 30lines. Not sure where did you get hundreds of lines 🤔

[@m12652]

Personally I wouldn't want inputs to resize to content as the page layout would shift every time more space was required.

[@redragon9588]

just put max width, max height

[@m12652]

@ that wouldn't stop it automatically resizing unless they were the same as the min values...?

[@gandalfgrey91]

I don’t believe that it’s 100’s of lines of js. There’s no way.

[@gandalfgrey91]

function resizeTextarea(el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } wow… so hard

[@ivands16]

@@gandalfgrey91 Yea I was thinking the same thing. Almost seems like some youtubers don't know what the f there talking about XD

[@geforcesong]

nice, but it has competibility issue

[@Momo-vy4xw]

Kinda crazy that such a basic feature lands in 2025

[@MonkeyDLuffy-t2b]

Great content as always. Just one Request :- Can you please speak slowly ? My mother tongue is not English. Although I can understand English pretty well, keeping up with your speed is still hard.

[@TN-es7ei]

You can slow down the play speed to 75%.

[@MonkeyDLuffy-t2b]

@@TN-es7ei Obviously but the voice quality becomes really low. It is just annoying.

[@DimaDumitru]

Why you kerp moving your head on right and left on the whole video? On every video on your channel😂😂😂

[@prometheusvmorphs5183]

is this theo from teen wolf?

[@samistube]

Hundreds of lines and incredibly Hard to build, is the the clickbait of the year, as its literally an oneliner to attach height =scrollheight to an input event. Never needed that width expansion but similar thing for y axis i imagine.. Cool to have that in CSS tho, thanks for the info

[@dtikvxcdgjbv7975]

Wow, nice

[@jntaca]

Great ! !

[@Barnardrab]

That is so cool! I'm going to immediately use it in my project.

[@КириллТимофеев-п1л]

Can I Use: 72.81%

[@user87546]

Are you comfortable moving your head like that all the time?

[@kettenbach]

Date fail in the thumbnail sir. It's 2025 😃👍

[@WebDevSimplified]

Whoops. That is now fixed.

[@kettenbach]

@WebDevSimplified lol always love your content. Just thought you might want to fix it. 👍

[@kennethguinto4862]

ok So now javascipt devs be like.. How Do we overengineer this...

[@deatho0ne587]

Only see textarea and only to max-height, content shift no thanks.

[@rubenreyes2000]

This is nice, but unfortunately it's not widely supported.

[@ullaskunder]

Great

[@firiasu]

I hate Safari, it is like Internet Explorer now, what you think?

[@williamdiegocampos5783]

smart!

[@rafyta7]

now we need the same for

[@seanfrankruyter4008]

Too bad it's not baseline yet

[@SaintHeiser]

Caniuse says 72% of browsers supporting. Useless so far.

[@PhilippBriese]

It's not that difficult to do with JS, and it does not need hundreds of lines of code 😄

[@Trinistar83]

I like your videos, but I find it very distracting, that you are shaking your head all the time, while speaking. I think you should disable the camera at all, so that the viewer can focus more on the content of the actual video.

[@GoingOno]

I didn't find it useful. As a frontend developer, I don't like when the input field moves around while the user is trying to enter information.

[@craigkidd6197]

Great! You felt compelled to share this? I had to bother scrolling past it.

[@majeedpanahi5783]

I follow you frequently, but I find your supersonic speed a bit exhausting, especially for those whose English is not the mother tongue. Slow down buddy and thanks.

[@danielcrompton7818]

Why is an iOS Swift developer watching this 🙂🙃🙂🙃🙂🙃

[@nagualdesign]

Could you please try to hold your head still. Imagine you were having a haircut.

[@rickharold7884]

cool

[@sarthakghoshal-l4n]

Poggers

[@neomasterrRU]

ton of javascript and math, sure const autoUpdateTextareaHeight = ($textarea, options = {}) => { const _options = Object.assign({ rowsMin: $textarea.rows, }, options); const updater = ($textarea) => { $textarea.rows = Math.max(_options.rowsMin, $textarea.value.split(/ /).length); } const updaterBound = updater.bind(null, $textarea); $textarea.addEventListener('input', updaterBound); window.requestAnimationFrame(updaterBound); };

[@RSDTUTORIALS]

Too fast speaking