September 29, 2023
I’ll cut to the chase before I type too many more words:
textarea { field-sizing: normal; }Code language: CSS (css)I came across it via an Amit Merchant blog post. Then followed the thread a little. It all started with a discussion, as these things tend to in this modern world. I think it’s a super weird name choice, but I’m sure if you were super involved in that discussion it would all make sense.
I was surprised to see it already in Chrome Canary with the “web experiments” flag enabled. Of course Adam is all over it:
So useful, good job CSS.
Who knows when that will be usable across all browsers, or if it will definitely ship just like that. I tend to agree with Lea Verou earlier in the discussion that height: max-content feels like a very elegant choice, but I’m not privy to why they didn’t go that way. Also like Lea, if this opens the door for horizontally growing single-line inputs, that’s a win.
My favorite trick of doing this before was using CSS grid. You’d take the text inside the textarea and propagate it to a hidden psuedo element overlaid exactly on top. That stack technique is a classic:
.grid { display: grid; grid: stack; > *, &::after { grid-area: stack; } }Code language: CSS (css)Credit to Stephen Shaw on the original idea for that.
Related
🤘
ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgbnxzhY6cqqxlo6S5t7HSZpiurJ9isrm8wKeboqaXYsGmxNOaqZ6Zo2K9s7vBmpmlsV2aw6a6066YpaSpZA%3D%3D