AutoGrow Textareas with CSS
As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known...and it's finally here!
To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content:
textarea {
field-sizing: content; // default is `fixed`
}
The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much as possible. To constrain the size a textarea can grow, use traditional width/max-width and height/max-height properties.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![MooTools Accordion: Mouseover Style]()
Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...
![Send Email Notifications for Broken Images Using jQuery AJAX]()
It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...
Sorry for asking, but is
field-sizing: content;really finally there? At least on my Mac with Google Chrome 120.0.6099.129 in the DevTools it says “unkown property name”, same goes for Safari 16.2 (18614.3.7.1.5) and Firefox 112.0.2 (64-Bit).thanks Michael
CSS working ⚒
As of January 2024, this doesn’t work yet in any stable browser.
Looking at the Chrome status for this feature, it appears that it won’t ship until Chrome 122. (At the time of this writing, latest Chrome is 120.)
The web standards explainer doc for this gives more details.
I needed to test with Ionic and it works perfectly post chrome 123. Works on android web view as well