こんにちは！
最近はJSを使わないとできなかったことがCSSだけで完結する。ということも多くなってきましたよね！
個人的に、「入力に応じて大きさが変わるtextarea(以下「可変textarea」)」は、JSでコネコネする必要があり、 めんどくさい実装 思ってるより大変な実装TOP10くらいには入ります🤔
そんなめんどくさい実装 思ってるより大変な実装 である可変textareaが、CSS一発で実装できるようになりそうで、ワクワクしたので紹介したいと思います！
今はどう実装する？
そもそもどういったUIを実現したいのか、YamadaUI を例にお借りして説明したいと思います。
YamadaUI で言うところの、autosizeを有効にした時のUIが今回実現したいUIです。
このUIを実現するために、YamadaUIでは以下のようなコードでtextareaのサイズを制御しています。
textareaのscrollHeighなどから計算し、onChangeでtextareaの高さを動的に変更しています。もちろんUIライブラリということもあり、汎用も考えて複雑な処理をしている部分もあるとは思いますが、自作するとしても、基本的な方針は大きくは変わらないでしょう...。
今回はこの辺の実装については深くは触れませんし、理解する必要もありません。
「わー。JSでいろんな処理して大変そうー。」という感想を持っていただければ十分です。(筆者も「わー大変そうー。」と思ってます🤔)
まずは結論から
では今回紹介したい、field-sizingを使った実装方法を紹介します。
まずは結論からみていきましょう。
import "./App.css";
function App() {
return (
<div>
...
<textarea className="textArea" />
</div>
);
}
export default App;
.textArea {
field-sizing: content;
min-width: 150px;
max-width: 300px;
min-height: min-content;
}
以上です...以上なんです！！これだけのコードだけで、可変textareaを実装することができます。最高ですね！
ではもう少しだけ詳しくみていきましょう...!
field-sizingプロパティ
「詳しくみていきましょう」とはいったものの説明不要なくらいシンプルに実装が可能です。
サイズの指定
上記のコードのように、field-content: contentとwidthもしくはheight系の値を指定することで、その範囲で自動でサイズ調整してくれるようになります。
min-widthとmax-widthを指定した場合は、以下のような挙動になります。
-
min-width~max-width: 入力に応じて、widthが広がっていく -
max-width~ : 入力に応じて、heightが広がっていく
min-width・max-widthの代わりに固定のwidthを指定すれば、横のサイズ調整がなくなり改行したら縦に広がっていくだけの挙動となります。
heightの指定
逆に(?)heightを指定した場合はどうなるでしょうか。
max-heightを指定した場合、maxまで到達以降はそれ以上大きくはならず、textareaがスクロール可能になり、いつものtextareaにの挙動になってくれます。
min/max - width/height 全部盛り
.textArea {
field-sizing: content;
min-width: 150px;
max-width: 300px;
min-height: 1lh;
max-height: 5lh;
}
説明不要なくらいめっちゃ簡単ですね！Yatta!
使える要素たち
実は本プロパティは、textarea以外にも使用することができます。使用可能な要素は以下の通りです。
textareainputselect
いずれも、入力に応じて自動でサイズが調節されます。
...便利だ！！
さいごに
いかがだったでしょうか？
まだ実験的な機能とはいえ、またひとつJSでの制御からの脱却が図れそうです...。
早く、モダンブラウザたち全てがこのプロパティを使用できるようになって欲しいものですね🤔
今回も読んでいただきありがとうございました！
参考・ソース
Discussion