Petunjuk dan konteks
Produk menginginkan kolom pencarian, input tag, dan catatan multi-baris membesar atau mengecil sesuai dengan kontennya. Desain juga mengharuskan elemen-elemen tersebut tetap berada di dalam grid, menghindari pergeseran tata letak (layout shift), dan tetap dapat digunakan di peramban yang lebih lama. Jelaskan bagaimana field-sizing: content mengubah ukuran preferensi (preferred size) kontrol formulir serta cara menetapkan batasan, fallback, dan interaksi yang mudah diakses.
Pertanyaan ini cocok untuk wawancara frontend, sistem desain, dan pengalaman formulir. Kuncinya adalah bahwa properti ini mengubah ukuran preferensi, bukan kontainer, pengguliran (scrolling), atau kontrak validasi.
Apa yang sedang diuji oleh pewawancara
Jawaban yang kuat menyatakan bahwa content memungkinkan kontrol teks menyusut atau membesar mengikuti konten, sedangkan fixed adalah nilai awalnya. Tanpa lebar minimum, kontrol yang kosong mungkin hanya selebar tanda sisip (caret); placeholder dapat membuatnya awalnya lebih besar. Bahas min-inline-size, max-inline-size, tinggi textarea, pengguliran konten panjang, stabilitas tata letak, fallback, serta pengaitan label/kesalahan.
Pertanyaan klarifikasi untuk diajukan terlebih dahulu
- Kontrol mana yang harus beradaptasi: input satu baris, textarea, select, atau nama file yang ditampilkan?
- Apakah ukuran inline dan ukuran block boleh berubah, atau haruskah kontrol menggulir secara internal pada batas tertentu?
- Apa saja batasan ketat dari kolom grid, lebar perangkat seluler, dan tombol di sebelahnya?
- Bagaimana nilai kosong, placeholder, string panjang, dan konten yang ditempelkan (pasted) harus ditampilkan?
- Peramban mana saja yang masuk dalam cakupan, dan apakah fallback harus berupa ukuran tetap atau peningkatan berbasis skrip?
Kerangka jawaban 30 detik
“Saya akan memperlakukan field-sizing: content sebagai peningkatan ukuran preferensi, bukan solusi tata letak otomatis yang lengkap. Berikan min-inline-size dan max-inline-size pada input dan textarea, batasi tinggi textarea, dan biarkan kontrol menggulir secara internal setelah batas tersebut. Pertahankan label eksplisit, pengaitan kesalahan, dan gaya fokus; peramban yang tidak mendukung tetap menggunakan ukuran tetap. Uji nilai kosong, placeholder, teks panjang, zoom, penggunaan keyboard, dan layout shift agar kontrak formulir tetap utuh.”
Jawaban mendalam langkah demi langkah
Langkah 1: Pahami fixed dan content
Nilai awal field-sizing adalah fixed, sehingga kontrol menggunakan ukuran preferensi default peramban. Dengan content, input teks yang didukung menyesuaikan diri dengan isinya, menyusut atau membesar saat teks berubah. Properti ini tidak mengubah semantik, validasi, atau aturan pengiriman formulir.
Langkah 2: Tetapkan batasan ukuran inline untuk kontrol satu baris
Input kosong tanpa nilai minimum mungkin hanya menampilkan caret, sehingga sulit ditemukan; placeholder dapat membuatnya terlalu lebar. Gunakan ukuran minimum dan maksimum logis untuk menjaga adaptasi tetap berada di dalam grid.
.tag-input {
field-sizing: content;
min-inline-size: 8rem;
max-inline-size: min(100%, 28rem);
}Langkah 3: Tangani pertumbuhan textarea pada kedua sumbu
Textarea yang dibatasi lebarnya dapat menambah baris untuk menampilkan konten. Tetapkan ukuran block maksimum dan izinkan pengguliran internal setelah batas tersebut, atau teks yang ditempelkan dapat mendorong kolom berikutnya keluar dari viewport. resize, overflow, dan line-height tetap memerlukan keputusan produk yang eksplisit.
Langkah 4: Cegah pergeseran tata letak dan kerusakan grid
Konten yang membesar akan menggeser elemen di sekitarnya, terutama pada tabel, toolbar, dan dialog. Tempatkan kolom dalam trek grid yang fleksibel, sediakan ruang untuk tombol yang berdampingan, dan batasi ukuran di area tindakan penting. Ukur CLS dan urutan pengetikan yang realistis alih-alih hanya memeriksa tangkapan layar awal.
Langkah 5: Pertimbangkan placeholder, nilai kosong, dan nama file
Dengan content, kontrol dapat mulai dengan ukuran yang cukup besar untuk placeholder-nya; kontrol kosong tanpa placeholder mungkin sangat sempit. Kontrol file juga dapat berubah ukuran saat nama file yang ditampilkan berubah. Berikan batas minimum yang mudah dibaca dan kebijakan pemotongan (truncation) pada setiap kontrol; placeholder bukanlah label permanen.
Langkah 6: Pertahankan aksesibilitas formulir
field-sizing tidak membuat label, kesalahan, atau fokus yang terlihat. Setiap kontrol tetap memerlukan label yang terkait secara terprogram, pesan kesalahan, dan jalur keyboard. Perubahan ukuran tidak boleh menutupi fokus saat ini atau memindahkan pesan kesalahan ke luar pandangan. Uji zoom dan tema kontras tinggi secara terpisah.
Langkah 7: Rencanakan fallback
MDN mendeskripsikan ini sebagai fitur yang lebih baru, sehingga peramban lama mungkin mengabaikannya. CSS default harus menyediakan ukuran tetap atau fleksibel yang wajar, dengan peramban yang didukung menimpanya menggunakan content. Jangan langsung menambahkan skrip pengukuran per penekanan tombol; evaluasi kejadian input, throttling, dan efek samping aksesibilitas hanya jika adaptasi untuk lingkungan lawas benar-benar diperlukan.
Langkah 8: Bangun verifikasi yang dapat diulang
Uji kondisi kosong, pendek, panjang, ditempel, multibahasa, placeholder, hapus, urungkan (undo), zoom, navigasi keyboard, dan kondisi kesalahan. Catat dimensi kontrol, scrollbar, CLS, lokasi fokus, dan keterjangkauan tombol di sebelahnya di seluruh Chromium, Firefox, Safari, dan peramban yang mengabaikan properti tersebut.
Pertimbangan kompromi dan batasan
Ukuran adaptif dapat mengurangi ruang kosong dan skrip, tetapi menambah perubahan tata letak dan perbedaan peramban. Ukuran tetap lebih mudah diprediksi; content cocok untuk tag dan istilah pencarian yang ukurannya mengikuti maknanya. Untuk bidang formulir utama, pertahankan keterlihatan, pengoperasian, dan pemulihan kesalahan sebelum memilih dimensi dinamis.
Jangan memperlakukan field-sizing: content sebagai pembungkusan teks otomatis (wrapping), validasi, atau pencegahan luapan (overflow). Komponen tetap bertanggung jawab atas batasan kontainer, pengguliran, dan penyajian kesalahan.
Rencana peluncuran dan bukti
Uji coba satu input tag dan satu textarea catatan. Catat dimensi default, distribusi panjang konten, batas maksimum, dan metrik tata letak. Mulailah dengan ukuran tetap, lalu aktifkan content di peramban yang didukung sambil mengamati CLS, fokus, gulir, dan tingkat penyelesaian.
Dokumentasikan ukuran minimum dan maksimum, kebijakan placeholder, batas atas textarea, gaya fallback, dan matriks peramban. Bersamaan dengan regresi visual, jalankan pengujian penerimaan keyboard dan pembaca layar sehingga perubahan ukuran tidak merusak label, kesalahan, atau urutan tombol kirim.
Jebakan umum dan tindak lanjut
Mengabaikan lebar minimum
Input kosong mungkin hanya selebar caret dan sulit ditemukan. Tetapkan ukuran inline minimum yang mudah dibaca dan pertahankan label yang terlihat.
Membiarkan textarea membesar tanpa batas
Menempelkan dokumen berukuran besar dapat menggeser seluruh halaman. Batasi ukuran block dan gulir di dalam kontrol setelah batas tercapai.
Memperlakukan placeholder sebagai label
Placeholder memengaruhi ukuran awal dan menghilang saat ada input. Ini tidak dapat menggantikan label permanen yang terkait secara terprogram.
Hanya menguji pada peramban yang didukung
Peramban lama mengabaikan deklarasi tersebut. Nilai default yang tetap atau dapat bertambah harus berfungsi secara independen dan menjadi bagian dari pengujian penerimaan formulir yang sama.
Bagaimana jika perubahan ukuran membuat tombol tidak dapat dijangkau?
Periksa trek grid, ukuran maksimum, kontainer penggulir, dan lokasi fokus. Uji ulang dengan CLS, navigasi keyboard, dan urutan teks panjang daripada hanya menonaktifkan adaptasi.