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 つの値のみを受け入れます。