1 行のコード。編集可能なコンテンツを含む要素の自動サイズ調整。
field-sizing を使用しない場合、適切なサイズの入力フィールドを作成するには、テキスト フィールド入力の平均サイズを推測するか、JavaScript を使用して文字数をカウントし、ユーザーがテキストを入力すると要素の高さまたは幅を増やす必要がありました。つまり、ユーザーが入力した内容をたどろうとしても、簡単ではありませんでした。
field-sizing の場合、コンテンツに基づくサイズ設定を有効にするには、1 行の CSS が必要です。このコンテンツ ベースのサイズスタイルは、テキスト領域以外でも機能します。
textarea, select, input {
field-sizing: content;
}
クイックリンク
ショート動画が気に入りましたか？
Wes Bos と Jhey は、それぞれ Twitter で field-sizing を紹介する素晴らしい動画を投稿しています。
フィールド サイズの影響を受ける要素
以下に、field-sizing が処理できる <form> 要素のリストと、それぞれに及ぼす影響の概要を示します。
<textarea>
入力は、min-inline-size またはプレースホルダに収まるように縮小されます。
ユーザーが入力すると、入力がインライン方向に拡大し、最大インライン サイズに達すると、テキストが折り返され、入力のブロックサイズが改行に合わせて拡大します。
<select>、<select multiple>
選択したオプションに合わせて選択要素が縮小します。
multiple 属性を使用した選択は、最も幅の広いオプションに合わせて、およびオプションの数に合わせて必要な高さまで拡大されます。
<input type="text">、<input type="email">、<input type="number">
入力は、min-inline-size またはプレースホルダに収まるように縮小されます。
ユーザーが入力すると、入力がインライン方向に拡大し、max-inline-size に到達するとオーバーフローによって入力値がクリップされます。
<input type="file">
入力がボタンと事前入力されたファイル名テキストに折りたたまれます。
ファイルをアップロードすると、入力の幅は、ボタンにファイル名のテキストを加えた幅になります。
結果の確認、テスト、比較
以下に、field-sizing の影響を受ける各フォーム要素のビフォーとアフターの動作のインタラクティブな最小限の例を示します。
近くで見る
[placeholder] を使用する場合、プレースホルダがコンテンツになります。これは前述しましたが、フォームのスタイルを設定する際は知っておくべきことが重要であるため、ここでは説明しています。長または短のプレースホルダは、field-sizing:
content で入力の固有のサイズを変更します。
空のスタイル処理
field-sizing を使用すると、追加の作業が必要になります。Ahmad Shadeed はこれを「防御 CSS」と呼んでいます。これは、物事の動作や外観を正確に記述することではなく、望ましくない視覚的状態にならないようにすることです。以前は、入力のサイズがかなり固定されていましたが、field-sizing: content を適用すると、入力が小さすぎたり大きすぎたりすることがあります。
以下のスタイルから始めることをおすすめします。要素が小さくなりすぎないようにできます。また、textarea の場合、大きくなりすぎないようにすることもできます。
textarea {
min-block-size: 3.5rlh;
min-inline-size: 20ch;
max-inline-size: 50ch;
}
select {
min-inline-size: 5ch;
min-block-size: 1.5lh;
}
input {
min-inline-size: 7ch;
}
この CSS では、サイズに相対単位を使用しています。新しい lh ユニットはブロックサイズに適しており、ch はインライン サイズに最適です。
フィールド サイズのデフォルト値とは何ですか？
field-sizing のデフォルト値は fixed で、fixed または content の 2 つの値のみを受け入れます。