field-sizing: content とは
field-sizing: contentとは、入力テキスト量に応じて入力フィールドサイズを調整してくれるCSSプロパティです。
百聞は一見に如かず、百見は一触に如かずということで、適当な入力フィールドを用意したので試してみてください。
テキスト量に応じてフィールドのサイズが調整されているのがわかるかと思います。
一応、画面幅を突き破る量のテキストが入力された場合に備えて、max-width: 100%を指定するなど、Defensive CSSの概念に倣って設定しています。
考えられるメリット
操作フローの軽減
フィールドサイズが自動的に調整されることで、ユーザーはスクロールやドラッグ操作によって領域を広げる手間が省けます。
確認作業がスムーズになり、全体の操作フローが軽減されるというメリットが挙げられます。
多言語対応の強化
もう一つ、外国語名の入力に対応できる点が挙げられます。
多くの場合、名前の入力欄は横幅が日本語名に合わせた幅でデザインされていると思います。
しかし近年では外国人就労者の増加なども伴い、ミドルネームなど比較的長い名前を持つユーザーが増えています。こうした背景を踏まえると、日本語名だけでなく外国語名も入力しやすいフォームが求められるでしょう。
field-sizing: content を活用することで、必要に応じてフィールドの幅を自動調整できるため、より多くのユーザーがストレスなく情報を入力できる環境を提供できるのではと考えています。
本記事執筆時点で未対応のブラウザがあるが？
- Safari
- Firefox
本ブログ執筆時点（2025年1月17日時点）では、SafariとFirefoxがfield-sizing: contentに対応していません。
ですが、対応していないブラウザで動作確認をしても、入力フィールドの表示崩れなどは起きていないはずです。従来の入力フィールドとして正常に機能するため、影響はないでしょう。（崩れてたらごめんなさい。）
そのため、プログレッシブエンハンスメントとして利用してみてもいいのではないかと考えます。