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.
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![MooTools Image Preloading with Progress Bar]()
The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...
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