Digital Transformation
CSS field-sizing: content (Property Value)
TL;DR: CSS field-sizing: content adalah deklarasi yang membuat elemen form otomatis menyesuaikan ukuran ke konten di dalamnya. Pengganti library autosize dan ResizeObserver custom. Per April 2026 sudah didukung Chrome, Edge, dan Safari Technology Preview, jadi cocok dipakai sebagai progressive enhancement.
Apa itu field-sizing: content?
field-sizing: content adalah deklarasi CSS pada elemen form yang membuat lebar dan tinggi bergerak mengikuti panjang teks. Ini bagian dari upaya memindahkan logika layout form dari JavaScript ke CSS native. Lihat referensi resmi di MDN field-sizing. Properti ini melengkapi rangkaian fitur layout modern seperti CSS interpolate-size dan CSS text-wrap pretty.
textarea { field-sizing: content; min-block-size: 4lh; }
input[type="text"] { field-sizing: content; min-inline-size: 12ch; }
Cara Kerja
Tiga aspek yang perlu dipahami:
| Aspek | Perilaku | Catatan |
|---|---|---|
| Default | Ukuran tetap dari atribut atau CSS | UA stylesheet lama |
| content | Tumbuh ke ukuran isi otomatis | Tetap hormat min/max |
| Fallback | Browser lama abaikan deklarasi | Aman dipakai tanpa polyfill |
Selalu padukan dengan min-block-size dan max-block-size agar form tidak meledak ke layar penuh pada input panjang.
Kenapa Penting?
Dalam beberapa proyek website bisnis selama 2026, mengganti library textarea-autosize 6 KB dengan field-sizing: content menghemat sekitar 18 baris JavaScript dan menghilangkan satu sumber hydration mismatch pada SSR Next.js. Untuk formulir kontak panjang, pengguna juga melaporkan ketikan terasa lebih mulus karena tidak ada repaint tertunda dari listener resize JS.
Pertanyaan Umum
Apakah aman dipakai sekarang?
Aman sebagai progressive enhancement. Browser yang belum mendukung akan jatuh ke ukuran default form, tidak rusak.
Apakah perlu polyfill?
Tidak disarankan. Polyfill mengembalikan beban JS yang justru ingin Anda hilangkan. Cukup biarkan fallback default berjalan untuk browser lama.
Istilah Terkait