Gesaan dan konteks
Produk memerlukan medan carian, input tag, dan nota berbilang baris membesar atau mengecil mengikut kandungannya. Reka bentuk juga memerlukan elemen tersebut kekal di dalam grid, mengelakkan anjakan reka letak (layout shifts), dan kekal boleh digunakan dalam penyemak imbas lama. Terangkan bagaimana field-sizing: content mengubah saiz pilihan (preferred size) kawalan borang serta cara menetapkan batas, sandaran (fallback), dan interaksi yang boleh diakses.
Soalan ini sesuai untuk temu duga frontend, sistem reka bentuk, dan pengalaman borang. Kuncinya ialah ia mengubah saiz pilihan, bukan bekas (container), penatalan (scrolling), atau kontrak pengesahan.
Perkara yang diuji oleh penemu duga
Jawapan yang kukuh menyatakan bahawa content membolehkan kawalan teks mengecil atau membesar mengikut kandungan manakala fixed ialah nilai awal. Tanpa lebar minimum, kawalan kosong mungkin hanya selebar karet; pemegang tempat (placeholder) boleh menjadikannya lebih besar pada awalnya. Sertakan min-inline-size, max-inline-size, ketinggian textarea, penatalan kandungan panjang, kestabilan reka letak, sandaran, dan perkaitan label/ralat.
Soalan penjelasan untuk ditanya terlebih dahulu
- Kawalan manakah yang harus menyesuaikan diri: input baris tunggal, textarea, select, atau nama fail yang dipaparkan?
- Bolehkah saiz sebaris (inline size) dan saiz blok (block size) berubah, atau patutkah kawalan menatal secara dalaman pada had tertentu?
- Apakah kekangan tegar daripada lajur grid, lebar mudah alih, dan butang bersebelahan?
- Bagaimanakah nilai kosong, pemegang tempat, rentetan panjang, dan kandungan yang ditampal harus dipaparkan?
- Penyemak imbas manakah yang berada dalam skop, dan adakah sandaran perlu saiz tetap atau peningkatan melalui skrip?
Rangka kerja jawapan 30 saat
“Saya akan menganggap field-sizing: content sebagai peningkatan saiz pilihan, bukan penyelesaian susun atur automatik yang lengkap. Berikan input dan textarea min-inline-size dan max-inline-size, hadkan ketinggian textarea, dan biarkan kawalan menatal secara dalaman selepas had dicapai. Kekalkan label eksplisit, perkaitan ralat, dan gaya fokus; penyemak imbas yang tidak disokong mengekalkan saiz tetap. Uji nilai kosong, pemegang tempat, teks panjang, zum, penggunaan papan kekunci, dan anjakan reka letak supaya kontrak borang kekal utuh.”
Jawapan mendalam langkah demi langkah
Langkah 1: Fahami fixed dan content
Nilai awal field-sizing ialah fixed, jadi kawalan menggunakan saiz pilihan lalai penyemak imbas. Dengan content, input teks yang disokong menyesuaikan mengikut kandungannya, mengecil atau membesar apabila teks berubah. Sifat ini tidak mengubah semantik, pengesahan, atau peraturan penghantaran.
Langkah 2: Tetapkan batas saiz sebaris untuk kawalan baris tunggal
Input kosong tanpa saiz minimum mungkin hanya menunjukkan karet, menjadikannya sukar ditemui; pemegang tempat boleh menjadikannya terlalu lebar. Gunakan saiz minimum dan maksimum logik untuk memastikan adaptasi kekal di dalam grid.
.tag-input {
field-sizing: content;
min-inline-size: 8rem;
max-inline-size: min(100%, 28rem);
}Langkah 3: Kendalikan pertumbuhan textarea pada kedua-dua paksi
Textarea yang dikekang dari segi lebar boleh menambah baris untuk memaparkan kandungan. Tetapkan saiz blok maksimum dan benarkan penatalan dalaman selepas had dicapai, atau teks yang ditampal boleh menolak medan berikutnya keluar dari viewport. resize, overflow, dan line-height masih memerlukan keputusan produk yang jelas.
Langkah 4: Cegah anjakan reka letak dan kerosakan grid
Kandungan yang membesar akan menggerakkan elemen bersebelahan, terutamanya dalam jadual, bar alat, dan dialog. Letakkan medan dalam trek grid fleksibel, sediakan ruang untuk butang bersebelahan, dan hadkan saiz di kawasan tindakan kritikal. Ukur CLS dan urutan menaip yang realistik berbanding hanya menyemak tangkapan skrin awal.
Langkah 5: Ambil kira pemegang tempat, nilai kosong, dan nama fail
Dengan content, kawalan mungkin bermula dengan saiz yang cukup besar untuk pemegang tempatnya; kawalan kosong tanpanya mungkin sangat sempit. Kawalan fail juga boleh berubah saiz apabila nama fail yang dipaparkan berubah. Berikan setiap kawalan nilai minimum yang mudah dibaca dan dasar pemotongan (truncation); pemegang tempat bukanlah label yang kekal.
Langkah 6: Kekalkan kebolehcapaian borang
field-sizing tidak mencipta label, ralat, atau fokus yang boleh dilihat. Setiap kawalan masih memerlukan label yang dikaitkan secara programatik, mesej ralat, dan laluan papan kekunci. Pengubahan saiz tidak boleh menutup fokus semasa atau mengalihkan ralat keluar dari pandangan. Uji zum dan tema kontras tinggi secara berasingan.
Langkah 7: Rancang sandaran
MDN menerangkan ini sebagai ciri yang lebih baharu, jadi penyemak imbas lama mungkin mengabaikannya. CSS lalai harus menyediakan saiz tetap atau boleh membesar yang munasabah, dengan penyemak imbas yang disokong menimpanya kepada content. Jangan tergesa-gesa menambah skrip pengukuran bagi setiap ketukan kekunci; nilai peristiwa input, pendikit (throttling), dan kesan sampingan kebolehcapaian hanya jika adaptasi warisan benar-benar diperlukan.
Langkah 8: Bina pengesahan yang boleh diulang
Uji keadaan kosong, pendek, panjang, ditampal, pelbagai bahasa, pemegang tempat, padam, buat asal (undo), zum, navigasi papan kekunci, dan ralat. Rekod dimensi kawalan, bar tatal, CLS, lokasi fokus, dan kebolehcapaian butang bersebelahan merentasi Chromium, Firefox, Safari, dan penyemak imbas yang mengabaikan sifat tersebut.
Pertukaran dan batasan
Saiz adaptif boleh mengurangkan ruang putih dan skrip tetapi menambah perubahan reka letak dan perbezaan penyemak imbas. Saiz tetap lebih mudah dijangka; content sesuai untuk tag dan istilah carian yang saiznya mengikut maksud kandungannya. Bagi medan borang utama, kekalkan kebolehjumpaan, kebolehkendalian, dan pemulihan ralat sebelum memilih dimensi dinamik.
Jangan anggap field-sizing: content sebagai pembalutan teks automatik, pengesahan, atau pencegahan limpahan (overflow). Komponen masih bertanggungjawab ke atas batas bekas, penatalan, dan persembahan ralat.
Pelan pelancaran dan bukti
Rintis satu input tag dan satu textarea nota. Rekod dimensi lalai, taburan panjang kandungan, batas maksimum, dan metrik reka letak. Mulakan dengan saiz tetap, kemudian dayakan content dalam penyemak imbas yang disokong sambil memerhatikan CLS, fokus, tatal, dan kadar penyiapan.
Dokumentasikan saiz minimum dan maksimum, dasar pemegang tempat, had atas textarea, gaya sandaran, dan matriks penyemak imbas. Di samping regresi visual, jalankan penerimaan papan kekunci dan pembaca skrin supaya saiz semula tidak merosakkan label, ralat, atau susunan butang hantar.
Kesilapan lazim dan susulan
Meniadakan lebar minimum
Input kosong mungkin hanya selebar karet dan sukar ditemui. Tetapkan saiz sebaris minimum yang mudah dibaca dan kekalkan label yang boleh dilihat.
Membiarkan textarea membesar tanpa had
Menampal dokumen yang besar boleh mengalihkan keseluruhan halaman. Hadkan saiz blok dan tatal di dalam kawalan selepas mencapai had.
Menganggap pemegang tempat sebagai label
Pemegang tempat mempengaruhi saiz awal dan hilang apabila input dimasukkan. Ia tidak boleh menggantikan label kekal yang dikaitkan.
Menguji hanya pada penyemak imbas yang disokong
Penyemak imbas lama mengabaikan pengisytiharan tersebut. Nilai lalai tetap atau boleh membesar mesti berfungsi secara berdikari dan menjadi sebahagian daripada ujian penerimaan borang yang sama.
Bagaimana jika pengubahan saiz menyebabkan butang tidak boleh dicapai?
Periksa trek grid, saiz maksimum, bekas tatal, dan lokasi fokus. Uji semula dengan CLS, navigasi papan kekunci, dan urutan teks panjang dan bukannya melumpuhkan adaptasi semata-mata.