Gesaan dan skop
Satu butang membuka menu, petunjuk, atau panel arahan. Popover harus kekal berhampiran butang, bertukar arah apabila tiada ruang, mengelakkan pemotongan oleh viewport atau bekas tatal, dan menyokong fokus papan kekunci serta penutupan. Bandingkan pengiraan koordinat JavaScript dengan CSS Anchor Positioning dan cadangkan peningkatan progresif (progressive enhancement).
MDN menerangkan kedudukan sauh sebagai meletakkan satu elemen relatif kepada elemen lain dengan mekanisme sandaran seperti position-try. Panduan Chrome menunjukkan hubungan ini melalui anchor-name dan position-anchor. Jawapan yang kukuh merangkumi reka letak, penatalan, sokongan pelayar dan semantik interaksi secara bersama.
Perkara yang dinilai oleh penemu duga
- Sama ada anda memisahkan penempatan visual, semantik DOM dan pengurusan fokus.
- Sama ada anda memahami hubungan sauh dan calon sandaran berbanding menghafal nama sifat semata-mata.
- Sama ada anda menaakul tentang bekas tatal, pemotongan dan konteks susunan (stacking contexts).
- Sama ada anda mereka bentuk sandaran JavaScript yang minimum apabila ciri CSS tidak tersedia.
- Sama ada anda mentakrifkan matriks ujian pelayar, input dan kebolehcapaian.
Temu duga frontend biasanya menguji asas reka letak pelayar, komponen yang mudah diselenggara dan pengendalian kes pinggir. Jawapan yang kukuh meletakkan ciri CSS baharu di dalam kekangan keserasian dan produk yang sebenar dan bukannya menganggap sokongan sejagat.
Soalan penjelasan sebelum menjawab
- Adakah popover itu menu, tooltip, atau dialog? Peranan semantik mengubah fokus dan tingkah laku Escape.
- Adakah rujukan itu butang, ikon, atau item senarai? Bolehkah ia bergerak atau divitualisasikan?
- Bolehkah ia keluar daripada bekas tatal? Adakah ia memerlukan lapisan pemaparan tahap atas untuk mengelakkan pemotongan?
- Pelayar dan WebView manakah yang disokong? Adakah sandaran mesti mengekalkan semua tingkah laku?
- Adakah pergerakan mesti dianimasikan, dan apakah yang berlaku apabila pengguna memilih pengurangan pergerakan (reduced motion)?
Rangka kerja jawapan 30 saat
Saya akan mentakrifkan semantik popover dan model fokus terlebih dahulu. Kemudian saya akan menamakan butang sebagai sauh dan mengaitkan popover dengannya. Saya akan meletakkannya di bawah secara lalai dan menyediakan calon sandaran position-try yang tersusun di atas dan di sisi; saya tidak akan bergantung pada satu ofset tetap. Pelayar yang tidak disokong akan menggunakan penyesuai kedudukan kecil atau sandaran sebaris, yang disahkan oleh ujian kebolehcapaian yang sama.
Jawapan mendalam langkah demi langkah
Langkah 1: Kendalikan semantik dan fokus dahulu
Menu memerlukan item menu yang boleh difokuskan dan keadaan kembang yang eksplisit; tooltip tidak boleh membawa tindakan yang diperlukan; panel arahan yang kompleks mungkin menyerupai dialog. Semasa dibuka, rekod pencetus; semasa ditutup, pulihkan fokus. Peraturan Escape dan klik luar mesti selari. CSS mengawal penempatan, bukan jaminan interaksi ini.
Langkah 2: Wujudkan hubungan sauh
Namakan pencetus sebagai sauh dan halakan popover ke position anchor tersebut. Pastikan hubungan itu stabil atau berskop tika (instance-scoped) supaya berbilang item senarai tidak berkongsi satu nama. Pemusnahan komponen, penggunaan semula, dan penatalan maya mesti membersihkan perkaitan yang lapuk.
Langkah 3: Takrifkan kedudukan lalai dan sandaran
Isytiharkan kedudukan biasa di bawah pencetus, kemudian senaraikan calon di atas, bahagian mula (start-side) dan bahagian akhir (end-side). Susunan calon menyatakan keutamaan produk, seperti mengekalkan penjajaran mendatar sebelum mengecilkan kandungan. Gunakan mekanisme position-try untuk membolehkan pelayar memilih calon yang berdaya maju dan mendedahkan calon yang gagal untuk penyahpepijatan.
Langkah 4: Kendalikan sempadan dan penatalan
Semak pemotongan oleh bekas tatal, leluhur yang ditransformasi dan konteks susunan baharu. Jika popover mesti melintasi sempadan bekas, paparkannya dalam lapisan tahap atas sambil mengekalkan hubungan sauh pada peringkat tika. Uji penatalan dan zum apabila pencetus meninggalkan viewport, bekas bersarang dan teks kanan-ke-kiri.
Langkah 5: Kekalkan peningkatan progresif
Gunakan penempatan CSS selepas pengesanan keupayaan; aktifkan penyesuai JavaScript hanya apabila diperlukan. Penyesuai membaca segi empat tepat pencetus, menilai calon dan memerhati isyarat tatal, saiz dan reka letak yang perlu sahaja. Jangan biarkan kedua-dua pelaksanaan menulis gaya kedudukan serentak, atau ia boleh berlumba dan berkelip (flicker).
Langkah 6: Kekang saiz dan kandungan
Takrifkan lebar dan tinggi maksimum, padding serta kawasan tatal dalaman. Pemilihan calon harus mempertimbangkan ruang yang tersedia dan saiz minimum yang boleh dibaca; kandungan yang panjang harus ditatal di dalam popover dan bukannya melimpah keluar halaman. Buat penilaian semula selepas kandungan dinamik dimuatkan kerana ukuran awal mungkin sudah lapuk.
Langkah 7: Kendalikan pergerakan dan peranti input
Berikan perubahan kedudukan tempoh masa yang jelas dan laluan pergerakan yang dikurangkan (reduced-motion). Input papan kekunci, sentuhan dan penuding harus berkongsi peraturan buka, tutup dan fokus; tooltip apung tidak boleh menggantikan bantuan yang boleh diakses papan kekunci. Animasi tidak boleh melambatkan pemulihan fokus atau mendedahkan keadaan yang salah kepada teknologi bantuan.
Langkah 8: Bina matriks pengesahan
Uji kedudukan lalai, setiap sandaran, viewport sempit, penatalan bersarang, zum, teks kanan-ke-kiri, kandungan panjang, kandungan dinamik dan pelayar yang tidak disokong. Pastikan tiada pemotongan, hubungan pencetus-kandungan yang betul, penutupan dengan Escape, pemulihan fokus dan keadaan pohon kebolehcapaian yang konsisten. Bandingkan laluan CSS dan sandaran dan bukannya hanya menerima tangkapan skrin skrin lebar.
Model jawapan
Saya akan membezakan semantik menu, tooltip dan dialog serta menetapkan fokus dan tingkah laku penutupan terlebih dahulu. Pencetus mendapat nama sauh; popover menggunakan position-anchor, secara lalai diletakkan di bawah dan menyenaraikan sandaran position-try di atas dan di sisi. Jika bekas tatal memotongnya, saya akan memaparkannya dalam lapisan tahap atas sambil mengekalkan hubungan tika. Pelayar yang tidak disokong menggunakan satu penyesuai JavaScript dengan semantik yang sama. Saya akan menguji viewport sempit, tatal bersarang, teks kanan-ke-kiri, kandungan dinamik, papan kekunci dan pembaca skrin, di samping menghormati pilihan pergerakan dikurangkan.
Kesilapan lazim
- Mengira koordinat sekali sahaja → penatalan dan zum merosakkan penempatan → jadikan CSS atau penyesuai bertindak balas terhadap perubahan reka letak.
- Menganggap tooltip sebagai menu → papan kekunci dan teknologi bantuan gagal → takrifkan semantik dan fokus terlebih dahulu.
- Menyediakan kedudukan di bawah sahaja → tepi viewport melimpah → susun beberapa calon.
- Mengabaikan
overflow: hidden→ leluhur memotong popover → pilih sempadan pemaparan tahap atas yang betul. - Membiarkan CSS dan JavaScript kedua-duanya meletakkan kedudukan → perlumbaan dan kelipan → dayakan tepat satu laluan selepas pengesanan keupayaan.
- Menguji skrin lebar dengan tetikus sahaja → peranti mudah alih dan papan kekunci gagal → rangkumi peranti input, keterarahan dan kebolehcapaian.
Tindakan susulan dan jawapan
Bolehkah Anchor Positioning menggantikan setiap pustaka elemen terapung?
Tidak. Ia mengendalikan hubungan reka letak dan penempatan sandaran, bukan fokus, peranan, penutupan, seretan atau peraturan perlanggaran perniagaan yang kompleks. Komponen masih memerlukan lapisan interaksi dan keserasian.
Bagaimana jika bekas tatal memotong popover?
Tentukan sama ada melintasi sempadan diperlukan. Jika ya, gunakan lapisan pemaparan tahap atas dengan hubungan tika; jika tidak, kekang calon dan tatal kandungan di dalam bekas.
Bagaimanakah anda mengelakkan pertembungan anchor-name dalam senarai?
Hasilkan hubungan per-tika yang stabil atau uruskan nama dengan kitaran hayat komponen. Kosongkan perkaitan apabila nod yang divirtualisasikan dikitar semula.
Apakah sandaran apabila CSS tidak disokong?
Gunakan pengesanan keupayaan untuk mendayakan satu penyesuai kedudukan JavaScript dengan semantik, fokus dan penutupan yang sama. Bagi kandungan yang tidak kritikal, blok sebaris di bawah pencetus boleh menjadi sandaran yang lebih mudah.
Bagaimana jika kandungan dinamik mengubah kedudukan?
Biarkan perubahan saiz mencetuskan reka letak semula; pada laluan sandaran, perhatikan isyarat saiz dan tatal yang perlu sahaja. Jangan sembunyikan reka letak yang tidak stabil di sebalik masa tamat (timeout) tetap.
Bagaimanakah anda membuktikan calon sandaran berfungsi?
Cipta viewport dan keadaan tatal yang boleh dihasilkan semula pada setiap tepi, kemudian sahkan penempatan akhir, pemotongan, saiz yang boleh dibaca dan jarak sauh berbanding hanya menyemak nama kelas CSS.
Bilakah anda masih akan memilih pustaka terapung JavaScript?
Pilih pustaka apabila sokongan pelayar yang luas, peraturan perlanggaran lanjutan, penempatan merentas dokumen atau tingkah laku kebolehcapaian yang matang melebihi nilai laluan CSS asli. CSS boleh kekal sebagai lapisan reka letak progresif.