背景 🖼️
業務でデザインシステムを導入しています。
デザインシステムのコンポーネントでtextarea要素にcssのfield-sizingプロパティを使用することによってtextarea内の文字が見切れるのを防いでいることに気づきました。
field-sizingプロパティは新しい機能らしく今回調べてみます。
textareaを内容に合わせて伸縮させることの大変さ😢
結論
CSSだけ（rows / min-height）で“1行までの余白にピタ留め”は難しいです。入力後も再計算が必要です。
検証
playgroundで実際に動かして検証します。
<textarea name="textarea" rows="5" cols="15">Write something here</textarea>
textarea {
min-height: 10px;
}
以下はcssのrowsとmin-heightで内容に合わせて伸縮させる検証です。
ここで言う内容に合わせて伸縮させるというのは内容が見切れず、かつ過剰な余白が出ないことを言います。
textareaをcssのみで内容に合わせて伸縮するのは困難でした。
また、仮に初期表示時にちょうど良いサイズでも入力後にコンテンツの大きさが変わる度に調整する必要が出てきます。
| min-height指定 | rowsより入力行数が | min-heightより入力行の高さが | 内容に合わせて縮みも伸びもするできているか | 検証スクショ |
|---|---|---|---|---|
| あり | 小さい | 小さい | ❌見切れていないが、高さの差が大きいと複数行の余白ができてしまう | スクショ |
| 大きい | ❌見切れていないが、高さの差が大きいと複数行の余白ができてしまう | スクショ | ||
| 大きい | 小さい | ❌見切れていないが、高さの差が大きいと複数行の余白ができてしまうう | スクショ | |
| 大きい | ❌文章が見切れて表示される | スクショ | ||
| なし（rowsによってheightが決まる） | 小さい | - | ❌見切れていないが、高さの差が大きいと複数行の余白ができてしまう | スクショ |
| 大きい | - | ❌文章が見切れて表示される | スクショ |
JoyUIだと@mui/base/TextareaAutosizeを使用してコンテンツの大きさに応じて動的にtextareaのサイズを可変にしています。
field-sizingとは 😎
前章で述べた通り、textareaをcssのみで内容に合わせて伸縮することは困難です。
field-sizingを使うとこれを簡単に設定できます。
MDNは以下のように定義されていました。
フォームコントロール要素のような、既定の推奨サイズが指定された要素のサイズ設定を制御することができます
補足
フォームコントロール要素とはフォーム内で関連付けられる要素のことです。
以下例です。
<form><fieldset><legend><textarea><label><button><input>
など
参考
rows/colsはfield-sizing: contentを設定した<textarea>要素には効果がないです。
理由）rows/colsは<textareaの既定の推奨サイズを変更しますが、field-sizing: contentによってサイズを上書きされる為
Web標準に向けたこのfield-sizingを提案した当時の背景は以下に記載されていました。
ウェブ制作者が、入力されたテキストに合わせて自動的にサイズ調整されるテキストコントロールを提供したいとします。これはJavaScriptコードで実現できますが、より簡単に実現できるように、新しいCSSプロパティを提案します。
field-sizingのデモ 
field-sizing: content;を設定するだけでコンテンツの大きさによってtextareaのサイズを伸縮できています。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
field-sizingのブラウザ対応の動向 
ブラウザの一部では動作しないです。
Firefox/Safariは未対応です。
現在は段階的な使用が推奨されています。
スマホ対応という観点でSafari対応が進んでいないことは懸念だと思います。
Baselineとは
Baseline機能とは、現在の安定したブラウザーで新たに利用可能になったか、あるいは長期にわたる継続的なサポートにより広く利用可能になった機能のことです。
Limited availabilityバッジが表示されている機能はBaselineではありません。
参考
https://developer.mozilla.org/ja/docs/Glossary/Baseline/Compatibility
プログレッシブエンハンスメントとは
段階的な使用という表現でプログレッシブエンハンスメントというものがあります。
参考
https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement
最後に 
- 改めてtextareaのサイズ調整の大変さと
field-sizingは本当に便利だなと再認識しました - スマホ対応という観点でSafari対応が進んでいないことは懸念だと思います
- JoyUIのtextareaのサイズ調整のコードリーディングできたので勉強になりました
参考 