CSS field-sizing (Property content & fixed)

TL;DR: CSS field-sizing adalah properti yang menentukan apakah elemen form (input, textarea, select) berukuran berdasarkan isi (value: content) atau default browser (value: fixed). Sejak dukungan stabil di Chrome 123 dan Safari 17.4, properti ini menggantikan library auto-resize textarea dan memangkas 8 sampai 14 KB JavaScript dari halaman form.

Apa itu CSS field-sizing?

CSS field-sizing memberi kontrol native pada bagaimana elemen form mengatur dimensinya. Nilai default fixed mempertahankan perilaku lama (lebar tetap dari atribut size atau CSS width). Nilai content membuat elemen tumbuh dan menyusut mengikuti isi value-nya. Untuk textarea, ini menghilangkan kebutuhan ResizeObserver atau library seperti autosize.js yang umumnya dipakai di form panjang seperti checkout atau form lead capture.

Cara Kerja

textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 20lh;
}

input[type="text"] {
  field-sizing: content;
  min-inline-size: 8ch;
}

Properti ini dipakai bareng CSS text-wrap pretty untuk form yang lebih ramah tipografi.

Kenapa Penting?

Form panjang (lead capture, checkout, profil) yang memakai autosize JS membayar biaya bundle JS dan biaya runtime saat user mengetik. CSS field-sizing memindahkan logika itu ke browser, memangkas Total Blocking Time dan menghapus dependency. Untuk landing page konversi tinggi di Indonesia (banyak akses 3G/4G di tier-2 city), menghemat 10 KB JS dapat memangkas Time to Interactive 80 sampai 150 ms. Sesuai dokumentasi MDN field-sizing, properti ini sudah Interop 2025.

Pertanyaan Umum

Apakah aman dipakai di produksi 2026?

Ya. Chromium 123+ (Maret 2024), Safari 17.4 (Maret 2024). Firefox masih dalam progress. Berikan fallback CSS height untuk Firefox.

Apakah perlu polyfill?

Tidak perlu. Cukup pakai progressive enhancement: set min-height/max-height sebagai fallback, browser modern akan auto-resize.