CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは

[coliss]

CSSのform-sizingプロパティで、フォームのサイズを入力された文字量に合わせて自動変更させることができます。

[wakuworks]

JSで頑張っていたことがCSSだけで出来るの嬉しい

[ultimatebreak]

最近痒いところに手が届くようなCSSが追加されてきて良い

[koogawa]

ふむふむ

[blue_night_blue]

ありがてえ

[for-my-internet-demo]

こういうの1個あるだけで非バインディングの類だと急に治安悪くなってたのわかる

[kisiritooru]

ふっかつのじゅもん入れたくなる

[ustam]

スクラッチで作るの大変なんだよねこれ。ライブラリーとかありそうだけど。主要ブラウザに普及するのはいつ頃だろう？

[heniha]

https://caniuse.com/?search=form-sizing

[solidstatesociety]

使う

[mohritaroh]

便利そう

[w_bonbon]

最近Chromeがガシガシ新仕様入れるねぇ。