Digital Transformation
CSS field-sizing (Property untuk Form Auto-Resize)
TL;DR: field-sizing adalah properti CSS native yang membuat form field seperti textarea otomatis resize sesuai isi tanpa JavaScript. Nilai field-sizing:content mengganti pola auto-grow yang sebelumnya butuh resize observer atau library. Tersedia di Chrome 123+, Safari 18+, dan Firefox 131+ per 2026.
Apa itu CSS field-sizing?
field-sizing adalah properti CSS yang mengontrol bagaimana ukuran intrinsik elemen form ditentukan. Nilai default fixed memberi tinggi tetap pada textarea sesuai atribut rows. Nilai content membuat tinggi atau lebar mengikuti konten secara dinamis, mirip behavior elemen div.
Selama bertahun-tahun pola auto-grow textarea butuh JavaScript yang mendengarkan event input lalu manipulasi style.height. Pendekatan ini menambah beban INP Event Handler Budget, terutama di mobile dengan keyboard virtual. Dengan field-sizing CSS, browser yang menangani pekerjaan ini di level render layer, jauh lebih murah komputasi. Pendekatan ini juga selaras dengan tren mengurangi JavaScript form yang masuk Baseline di 2025.
Cara Pakai
textarea {
field-sizing: content;
min-height: 4rem;
max-height: 20rem;
}
| Nilai | Behavior |
|---|---|
| fixed (default) | Ukuran sesuai rows/cols atau width/height yang di-set |
| content | Ukuran mengikuti konten, tetap menghormati min/max |
Selalu set min-height dan max-height supaya field tidak collapse ke 0 saat kosong atau membengkak ekstrem saat user paste teks panjang.
Kenapa Penting?
Form input panjang seperti kolom feedback, deskripsi produk admin, atau chat widget mendapat UX yang lebih natural tanpa biaya bundle. Dalam beberapa form admin yang saya bangun belakangan, mengganti library textarea-autosize dengan field-sizing CSS menghemat 6 sampai 12 KB bundle dan mengurangi long task di field interaction. Spesifikasi lengkap di CSS UI Module Level 4 - field-sizing.
Pertanyaan Umum
Apakah perlu fallback untuk browser lama?
Untuk browser yang belum mendukung, ukuran akan jatuh ke default fixed. Tidak terjadi error, hanya behaviour lama. Jadi aman tanpa polyfill.
Bisa dipakai untuk input type=text?
Bisa, tapi gunakan untuk kasus spesifik seperti input judul yang mungkin sangat panjang. Untuk text input umum, default fixed sudah memadai.
Istilah Terkait