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.
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Camera and Video Control with HTML5]()
Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API...
![JavaScript Battery API]()
Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...
![JavaScript Speech Recognition]()
Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on. Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...
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