TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

CSS solves auto-expanding textareas (probably, eventually)

170 点作者 DerekBickerton超过 1 年前

18 条评论

danielvaughn超过 1 年前
I know this is a naive criticism given from the proverbial arm chair, but I&#x27;m irritated that they&#x27;re creating a new property just for this use case. Consider the fact that non-form elements have this:<p><pre><code> width: fit-content height: fit-content </code></pre> Why couldn&#x27;t they just use that? Isn&#x27;t it essentially the same thing?
评论 #37718117 未加载
评论 #37718017 未加载
评论 #37718125 未加载
评论 #37717834 未加载
评论 #37718208 未加载
评论 #37718834 未加载
Aachen超过 1 年前
That value name sounds weird to me. How is this &quot;normal&quot;? Why not call it grow-with-content for example? Is there a logic to calling this normal that I&#x27;m missing?<p>Either way I&#x27;m glad to see it! Can use this on a website of mine where it now switches just between small and large if people input more than one line :)
评论 #37717275 未加载
评论 #37718158 未加载
corbezzoli超过 1 年前
For those wondering, it’s not live yet. Chrome Canary just shipped it (behind a flag?) but it’s still up in the air, even the property name itself.<p>Follow: <a href="https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;7542">https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;7542</a>
simonw超过 1 年前
I wrote up my own notes on how the clever CSS hack version of this works here: <a href="https:&#x2F;&#x2F;til.simonwillison.net&#x2F;css&#x2F;resizing-textarea" rel="nofollow noreferrer">https:&#x2F;&#x2F;til.simonwillison.net&#x2F;css&#x2F;resizing-textarea</a>
pooper超过 1 年前
On Mozilla Firefox, default from Fedora (current) I tried out the codepen and typed some gibberish which went ok<p><a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;4nqe54Q.png" rel="nofollow noreferrer">https:&#x2F;&#x2F;i.imgur.com&#x2F;4nqe54Q.png</a><p>however, after I uploaded this screenshot to imgur and clicked back and saw this<p><a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;ugnGewi.png" rel="nofollow noreferrer">https:&#x2F;&#x2F;i.imgur.com&#x2F;ugnGewi.png</a><p>just wanted to share my experience
swingingFlyFish超过 1 年前
A better name would probably be simply: expand-area
bradley13超过 1 年前
Stop. Just stop making CSS ever more complicated. It is already waaay to complex. Worse, the standards committee has given up having actual versions - it&#x27;s just gradually evolving chaos.<p>At this point, honestly, everything after CSS&#x2F;2 should be thrown away, so we can start again. With an actual standards process, this time.
评论 #37718361 未加载
评论 #37718872 未加载
tannhaeuser超过 1 年前
I love it how grid is used as polyfill:<p>&gt; <i>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:</i><p><pre><code> .grid { display: grid; grid: stack; &gt; *, &amp;::after { grid-area: stack; } } </code></pre> So much for the hope to start clean with flex, grid, and co.<p>(Btw, there&#x27;s a typo: psuedo -&gt; pseudo)
评论 #37718914 未加载
评论 #37717976 未加载
msie超过 1 年前
Reading this gives me another reason to not touch CSS. Sigh.
评论 #37718029 未加载
evnp超过 1 年前
Lovely to see. I&#x27;m especially excited to discover it also seems to work for horizontal auto-sizing of &lt;input&gt; elements! Have grid-hacked that one more often than textareas.<p>If anyone wants to play with this, the flag is called &quot;Experimental Web Platform features&quot; in Chrome Canary. Searching for &quot;web experiments&quot; (flag mentioned in post) under chrome:&#x2F;&#x2F;flags turns up nothing.
mcbrienollie超过 1 年前
Each and everyday we see a CSS hack or update to resolve the problems we experience. This might be a harsh critic but whenever I see these things, I immediately realize how CSS is an ancient monster that we are dealing with.
sfvisser超过 1 年前
Implemented this manually so many times that I’m almost annoyed that this works out of the box with CSS now.<p>Great to see this now works. Input and textarea sizing is still a mysterious black art to me though.
评论 #37717798 未加载
评论 #37717244 未加载
评论 #37717712 未加载
qwertox超过 1 年前
Is it just me who has the problem with textareas in Chrome that when I resize them, the browser freezes until it has finished its resize computation, which can take several seconds?
paradox460超过 1 年前
I remember when these sort of blurbs by Chris would appear on CSS tricks. Sadly CSS tricks is pretty much dead now, with their last new article going out in April.
mediumsmart超过 1 年前
Nice content post and a gentle reminder that using a subset of any language allows all these complicatimplementers to keep at it without ruining our day.
bsimpson超过 1 年前
I feel like auto-expanding textareas was on of the original WebKit features (along with the drag handle in the corner). Anyone know what happened there?
rendaw超过 1 年前
I&#x27;m just getting an activity stream json blob on that page, did something change?
chrismorgan超过 1 年前
Meanwhile, contenteditable=&quot;plaintext-only&quot; has been in Chromium for seven years, and just landed in Safari 17.0, and I still don’t understand why anyone ever thought it sounded like a good idea, given how contenteditable elements aren’t part of form data so it’s unsuitable in the only places I’ve actually seen people suggest its use (and this does actually matter, you can’t just smooth it over with a little JavaScript: it affects things like the browser’s form memory when you navigate history or restart the browser).<p>(Mind you, contenteditable=plaintext-only <i>does</i> still have one thing going for it: you can have it inline, mid-paragraph with natural wrapping inside it, whereas the closest actual form fields can manage is inline-block, which will break funny.)
评论 #37717353 未加载
评论 #37717616 未加载