Gesaan dan konteks
Anda memerlukan pratonton profil yang muncul apabila penuding melayang (hover), papan kekunci menerima fokus, atau melalui tekan lama, kemudian tersembunyi apabila minat tamat. Terangkan cara anda menggunakan interestfor dan mengendalikan keserasian, fokus, kelewatan, serta kandungan yang tidak sepatutnya dicetuskan oleh hover.
Interest invoker Popover API membolehkan butang atau pautan menunjuk ke ID sasaran dalam pepohon yang sama dengan interestfor. Sasaran boleh menjadi kad pratonton popover="hint". Pelayar memaparkannya apabila pemula menjadi menarik melalui hover, fokus, atau tekan lama dan menyembunyikannya apabila minat tamat. Ini sesuai untuk bantuan ringkas yang tidak kritikal; ia tidak boleh menjadi satu-satunya cara untuk menemui maklumat atau tindakan.
Perkara yang diuji oleh penemu duga
Penemu duga ingin melihat sama ada anda membezakan minat (interest) daripada pengaktifan (activation), memahami ID sasaran, keadaan popover, dan InterestEvent, serta dapat merangkumi papan kekunci, sentuhan, kelewatan, keserasian, kebolehcapaian, dan kes di mana klik eksplisit atau pautan biasa adalah lebih selamat.
Soalan penjelasan
Sahkan sama ada permukaan tersebut adalah petunjuk (hint), pratonton, atau menu dengan kawalan; matriks sokongan pelayar; keperluan sentuhan; sama ada kandungan adalah kritikal; dan sama ada sasaran berada dalam pepohon DOM yang sama. Jelaskan juga sama ada pengguna boleh memasuki dan kekal di dalam permukaan tersebut, kelewatan papar dan sembunyi, peraturan pemulangan fokus, serta pengalaman minimum tanpa JavaScript.
Jawapan 30 saat
“Saya akan menggunakan butang atau pautan natif dengan interestfor yang menunjuk kepada Popover hint, sambil mengekalkan nama profil dan pautan biasa sebagai laluan utama. Interest invoker membekalkan keterlihatan melalui hover, fokus, dan tekan lama; saya akan menggunakan interest-delay, atau strategi yang setara, untuk mengurangkan kelipan (flicker). Saya akan mengesan ciri (feature-detect) dan beralih kepada pendengar fokus dan klik. Teks pratonton mesti kekal tersedia untuk pengguna papan kekunci dan sentuhan, dan apa-apa yang mempunyai kesan sampingan atau model interaksi penuh harus menggunakan pengaktifan eksplisit.”
Jawapan mendalam
Langkah 1: Cipta hubungan minat
Nilai interestfor menunjuk kepada ID elemen sasaran, dan sasaran serta pemula mesti berada dalam pepohon yang sama. Contoh minimum ialah:
<button interestfor="profile-preview" aria-label="Read Ada's profile">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
Early computing pioneer; the profile page contains the full biography.
</article>Butang kekal sebagai kawalan natif yang boleh difokuskan; pratonton adalah tambahan dan bukan satu-satunya laluan ke profil.
Langkah 2: Asingkan minat daripada pengaktifan
Minat (interest) ialah maklum balas sementara untuk pratonton, penjelasan, dan konteks tambahan. Klik atau kekunci Enter ialah pengaktifan untuk navigasi, penghantaran, atau tindakan yang tidak boleh dibatalkan. Jangan sembunyikan kawalan padam, beli, atau pengesahan di dalam permukaan yang hanya muncul melalui minat.
Langkah 3: Hormati sempadan Popover
Pelayar mengawal keadaan paparan sasaran popover="hint". Elakkan skrip lain daripada memaksa keadaan yang sama, kerana dua pemilik boleh mengalami perlumbaan (race condition). Jika permukaan memerlukan model papan kekunci menu, perangkap fokus (focus trapping), atau keadaan yang kompleks, nilaikan corak menu, dialog, atau komponen eksplisit.
Langkah 4: Kawal kelewatan dan kelipan
Penuding boleh melintasi sempadan antara pemula dan pratonton dengan cepat. Gunakan interest-delay untuk pemasaan papar dan sembunyi, dan reka kawasan sentuhan (hit area) yang berterusan antara pencetus dan sasaran. Tentukur kelewatan dengan ujian penuding, papan kekunci, dan sentuhan daripada menganggap satu nilai sesuai untuk setiap peranti.
Langkah 5: Rangkumi laluan papan kekunci dan pembaca skrin
Butang atau pautan natif boleh menerima fokus. Pratonton harus mempunyai hubungan nama yang jelas tanpa mencuri fokus secara tidak sengaja. Pastikan teks pratonton tersedia melalui nama yang kelihatan, destinasi, atau kandungan statik lain; jangan gantikan petunjuk fokus dengan hover atau meletakkan ralat penting hanya dalam pratonton.
Langkah 6: Ambil kira sentuhan dan tekan lama
Sentuhan tidak mempunyai hover tradisional. Minat tekan lama boleh menyediakan pratonton, tetapi ia tidak boleh menyekat ketukan biasa atau penatalan. Kekalkan laluan ketukan terus untuk tindakan penting, dan uji skrin kecil untuk halangan (occlusion), limpahan viewport, dan tingkah laku penutupan.
Langkah 7: Pengesanan ciri dan degradasi
Jangan anggap setiap masa jalan menyokong interestfor. Buat pengesanan ciri HTMLButtonElement.prototype.interestForElement; apabila tiada, kekalkan kandungan HTML dan pautan biasa, kemudian tambahkan pratonton asas dengan pendengar fokus, penuding, atau klik. Sandaran harus menambah keupayaan tanpa menghasilkan sumber kebenaran (source of truth) kedua.
Langkah 8: Uji kitaran hayat dan sempadan
Uji penuding masuk dan keluar, pergerakan dari pemula ke pratonton, Tab dan Shift+Tab, tekan lama, penatalan, Escape, kemasukan semula pantas, dan pembuangan sasaran dinamik. Sahkan pepohon kebolehcapaian, sempadan, kelewatan, kandungan tanpa JavaScript, dan matriks pelayar sasaran; label ketersediaan MDN bukan pengganti kepada ujian projek.
Jawapan model
Saya akan menjadikan avatar sebagai pautan atau butang natif dan menujukan interestfor kepada pratonton popover="hint" dalam pepohon yang sama. Pratonton menambah konteks, manakala nama dan pautan profil kekal kelihatan dalam kandungan statik. Minat merangkumi penuding, fokus, dan tekan lama; interest-delay dan kawasan hit yang berterusan mengurangkan kelipan. Sebelum pelaksanaan, saya akan mengesan interestForElement; pelayar yang tidak disokong kekal menggunakan kandungan biasa dan menerima tingkah laku fokus, penuding, atau klik yang sama melalui sandaran. Kandungan pemadaman, pembelian, menu, atau kesan sampingan lain harus menggunakan pengaktifan eksplisit berbanding permukaan berasaskan minat sahaja. Saya akan mengesahkan papan kekunci, sentuhan, pembaca skrin, penatalan, Escape, pembuangan dinamik, dan matriks pelayar sasaran.
Kesilapan biasa
Menganggap interestfor sebagai atribut tip alat generik
Ia mewujudkan hubungan pemula minat dan bergantung pada tingkah laku pelayar berkaitan Popover. Sasaran yang memerlukan model menu atau keadaan kompleks memerlukan semantik komponen yang sesuai.
Melaksanakan CSS hover sahaja
Pengguna papan kekunci tidak mempunyai hover penuding, dan sentuhan mempunyai model gerak isyarat yang berbeza. Kekalkan tingkah laku fokus, laluan ketukan, dan maklumat statik.
Menjadikan pratonton sebagai satu-satunya sumber kandungan kritikal
Pengguna mungkin menggunakan pelayar yang tidak disokong, menyahdayakan skrip, atau tidak dapat melakukan tekan lama. Nama, status, dan tindakan kritikal mesti kekal dalam kandungan utama atau laluan pengaktifan eksplisit.
Soalan susulan dan jawapan
Bagaimana jika pelayar tidak menyokong interestfor?
Kekalkan HTML biasa, pautan, dan gaya fokus yang lengkap terlebih dahulu, kemudian buat pengesanan ciri. Sandaran menambah tingkah laku pratonton tanpa mengubah navigasi atau struktur maklumat, dan ia diuji dalam matriks sokongan.
Bagaimanakah anda menghalang kelipan antara pemula dan pratonton?
Gunakan kawasan hit yang berterusan, kelewatan papar dan sembunyi, dan kekalkan minat semasa memasuki sasaran. Jangan biarkan beberapa skrip mengawal keadaan Popover; log urutan masuk, keluar, dan pembuangan semasa mendiagnosis perlumbaan (race condition).
Patutkah fokus beralih ke dalam pratonton apabila pemula menerima fokus?
Untuk pratonton tulen, biasanya tidak: kekalkan fokus pada pemula dan dedahkan nama boleh diakses yang jelas. Jika permukaan mengandungi kawalan, beralih kepada menu atau dialog yang diaktifkan secara eksplisit dengan tingkah laku masuk, Escape, dan kembali yang jelas.
Bagaimanakah anda mengendalikan tekan lama berbanding ketukan biasa?
Pratonton tekan lama tidak boleh menyekat navigasi ketukan atau penatalan. Kekalkan sasaran ketukan untuk tindakan penting dan uji tekan lama, ketukan pendek, tatalan, dan tepi viewport pada peranti sebenar.
Apakah nilai yang patut digunakan oleh interest-delay?
Tiada nilai universal merentas peranti. Ukur kes kemasukan, keluar, dan pergerakan pantas terhadap kepadatan kandungan dan kos pencetus tidak sengaja. Sediakan maklum balas fokus serta-merta supaya pengguna papan kekunci tidak perlu menunggu kelewatan yang berorientasikan penuding.
Bilakah anda patut mengelakkan interest invoker?
Elakkannya apabila kandungan adalah kritikal, tindakan mempunyai kesan sampingan, pengurusan fokus adalah kompleks, penyelarasan merentasi pelbagai pepohon, atau pelayar lama diwajibkan. Interest invoker adalah paling sesuai untuk pratonton tambahan yang berisiko rendah dan bersifat sementara.