Satu baris kode untuk mengubah ukuran elemen secara otomatis dengan konten yang dapat diedit.
Tanpa field-sizing
, untuk membuat kolom input berukuran baik, Anda harus
menebak ukuran rata-rata input kolom teks atau menggunakan JavaScript untuk menghitung
karakter dan menambah tinggi atau lebar elemen saat pengguna memasukkan teks. Dengan
kata lain, tidak mudah dan rentan error saat mencoba mengikuti
konten yang telah dimasukkan pengguna ke dalam input.
Dengan field-sizing
, Anda memerlukan satu baris CSS untuk mengaktifkan ukuran berdasarkan konten. Gaya ukuran berbasis konten ini juga dapat berfungsi lebih dari sekadar {i>textarea<i}!
textarea, select, input {
field-sizing: content;
}
Link cepat
Suka video pendek?
Wes Bos dan
Jhey masing-masing memiliki video keren
di Twitter yang memperkenalkan Anda kepada field-sizing
.
Elemen manakah yang terpengaruh oleh ukuran kolom?
Berikut adalah daftar
elemen <form>
yang dikerjakan field-sizing
, dengan ringkasan efek yang ditimbulkannya pada setiap elemen.
<textarea>
Input diciutkan menjadi min-inline-size
atau agar sesuai dengan placeholder.
Saat pengguna mengetik, input akan bertambah dalam arah inline hingga mencapai ukuran inline maksimum, saat teks akan digabungkan dan ukuran blok input membesar agar sesuai dengan baris baru.
<select>
dan <select multiple>
Elemen pilih akan dikecilkan agar sesuai dengan opsi yang dipilih.
Pilih dengan atribut multiple
diperluas agar sesuai dengan opsi terluas dan menjadi
tinggi yang diperlukan agar sesuai dengan jumlah opsi.
<input type="text">
, <input type="email">
, dan <input type="number">
Input diciutkan menjadi min-inline-size
atau agar sesuai dengan placeholder.
Saat pengguna mengetik, input akan bertambah ke arah inline hingga mencapai
max-inline-size
, yang pada titik tersebut mengklip nilai input lebih lanjut.
<input type="file">
Input akan diciutkan hingga tombol dan teks nama file yang telah diisi otomatis.
Setelah mengupload file, input akan menjadi selebar tombol ditambah teks nama file.
Melihat, menguji, dan membandingkan hasil
Berikut adalah contoh interaktif dan minimal dari perilaku sebelum dan sesudah dari
setiap elemen bentuk, sebagaimana dipengaruhi oleh field-sizing
.
Melihat lebih dekat
Saat menggunakan
[placeholder]
,
placeholder akan menjadi konten. Hal ini telah disebutkan sebelumnya, tetapi disebutkan di sini, karena penting untuk diketahui saat menata gaya formulir. Placeholder panjang atau pendek
akan mengubah ukuran intrinsik input dengan field-sizing:
content
.
Penanganan gaya kosong dan tambahan
Menggunakan field-sizing
berarti Anda harus melakukan beberapa pekerjaan tambahan. Ahmad
Shadeed menyebutnya sebagai "CSS
defensif", yang tujuannya tidak harus
menguraikan secara persis bagaimana seharusnya perilaku atau penampilan sesuatu, melainkan
untuk melindunginya agar tidak masuk ke dalam kondisi visual yang tidak diinginkan. Sebelumnya, input memiliki
jumlah ukuran tetap yang cukup, tetapi setelah menerapkan field-sizing: content
, input dapat menjadi terlalu kecil atau terlalu besar.
Gaya berikut adalah titik awal yang baik. Bingkai ini membantu elemen
tidak diciutkan ke dalam kotak yang terlalu kecil dan juga, dalam kasus textarea
, tidak tumbuh
terlalu besar.
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 ini menggunakan unit relatif untuk ukuran. Unit
lh
baru sangat cocok untuk ukuran blok dan
ch
berfungsi dengan baik untuk ukuran inline.
Berapa nilai default dari ukuran kolom?
Nilai default field-sizing
adalah fixed
, dan hanya menerima dua
nilai fixed
atau content
.