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.
![39 Shirts – Leaving Mozilla]()
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Skype-Style Buttons Using MooTools]()
A few weeks back, jQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. I was impressed by Janko's article so I decided to port the effect to MooTools.
The XHTML
This is the exact code provided by...
![CSS Fixed Position Background Image]()
Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...
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