CSSのfield-sizing content で入力フィールドのサイズを可変にする

field-sizing: content とは

field-sizing: contentとは、入力テキスト量に応じてフィールドのサイズを調整してくれるCSSプロパティです。

百聞は一見に如かず、百見は一触に如かずということで、適当な入力フィールドを用意したので試してみてください。

どうでしょうか？テキスト量に応じてフィールドのサイズが調整されているのがわかると思います。

一応、画面幅を突き破る量のテキストが入力された場合に備えて、max-width: 100%を指定するなど、Defensive CSSの概念に倣って設定しています。

本ブログ執筆時点で未対応のブラウザがあるが？

• Safari
• Firefox

本ブログ執筆時点（2025年1月10日時点）でSafariとFirefoxが、field-sizing: contentに対応していません。

ですが、対応していないブラウザでこのブログを見ても、入力フィールドの表示崩れなどは起きていないはずです。これまで同様の入力フィールドとして利用できる状態だと思います。（崩れてたらごめんなさい。。）

そのため、プログレッシブエンハンスメントの文脈で利用してみてもいいのではないかと筆者は考えます。