Gesaan dan skop
Soalan ini menguji sama ada "letakkan di sebelah butang" menjadi kontrak reka letak dan interaksi yang boleh disahkan. Rangkumi anchor-name, anchor(), kedudukan calon, limpahan (overflow), penatalan (scrolling), pengesanan ciri, serta tingkah laku papan kekunci dan fokus untuk menu atau dialog.
Perkara yang dinilai oleh penemu duga
- Hubungan sauh (anchor) yang stabil dan peranan
position-area,anchor(), serta kedudukan sandaran (fallback). - Kebolehlihatan di bawah tepi viewport, bekas tatal, zum dan kandungan dinamik.
- Peningkatan progresif dan bukannya kebergantungan tegar pada ukuran JavaScript.
- Semantik dan tingkah laku yang betul untuk menu, tip alat (tooltip) dan dialog.
- Pengesahan matriks pelayar, regresi visual, papan kekunci dan pembaca skrin.
Struktur jawapan yang disyorkan
Tentukan jenis popover, sauh dan kawasan kelihatan minimum. Berikan laluan CSS dengan penamaan sauh, kedudukan pilihan, sandaran dan peraturan penyembunyian. Kemudian huraikan sandaran @supports kepada komponen peletakan sedia ada, diikuti oleh fokus, penatalan, saiz dinamik dan ujian.
Selami secara mendalam: peletakan yang boleh digunakan dan mudah diakses
Cipta sauh yang stabil
Berikan pencetus anchor-name yang unik; gunakan position-anchor atau rujukan eksplisit pada popover. Untuk baris berulang, cipta hubungan yang stabil bagi setiap baris dan kosongkan keadaan semasa dinyahlekap (unmount) dan bukannya meneka daripada kedekatan DOM.
Tentukan calon dan peraturan limpahan
Gunakan position-area atau anchor() untuk bahagian pilihan, kemudian position-try-fallbacks atau peraturan setara untuk bahagian bertentangan, penjajaran tepi dan pengurangan saiz. Tetapkan saiz blok maksimum dan penatalan dalaman. Jika ia tidak muat, sembunyikan atau beralih kepada panel skrin penuh daripada memotong kandungan.
Kendalikan penatalan dan saiz dinamik
Apabila sauh bergerak di dalam bekas tatal, sahkan blok yang mengandungi (containing block) dan konteks susunan (stacking context). Semak semula kebolehlihatan selepas kandungan tak segerak (asynchronous), pemuatan fon dan perubahan zum. Elakkan pengukuran tatal buatan sendiri pada laluan natif.
Tambah peningkatan progresif
Gunakan @supports (anchor-name: --trigger). Pelayar yang disokong menggunakan CSS; yang lain menggunakan semula logik portal dan peletakan sedia ada dengan ukuran terikat, pembersihan dan pengendalian pembalikan (flip). Kedua-dua laluan berkongsi keadaan menu dan peraturan kebolehcapaian.
Padankan semantik dengan tugasan
Menu menggunakan item menu dan model kekunci anak panah yang didokumentasikan. Tip alat tidak boleh mengandungi tindakan yang diperlukan. Gunakan dialog hanya apabila latar belakang disekat sepenuhnya; modal menguruskan fokus kemasukan, tingkah laku Tab, Escape dan pemulihan fokus.
Contoh jawapan
"Saya akan menjadikan penapis itu sebagai menu bukan modal. Butang mendapat anchor-name yang stabil; menu menggunakan position-anchor di bawahnya, dengan sandaran di atas dan di sepanjang tepi viewport serta ketinggian maksimum untuk penatalan dalaman. Jika @supports gagal, penentu kedudukan portal sedia ada mengendalikan reka letak manakala keadaan dan tingkah laku papan kekunci kekal dikongsi. Pembukaan mengalihkan fokus ke item pertama, anak panah bergerak dalam menu, dan Escape atau klik luar menutupnya serta mengembalikan fokus kepada butang. Saya akan menguji viewport sempit, bekas tatal, zum, kandungan tak segerak dan pemotongan dengan tangkapan skrin, semakan papan kekunci dan semakan pembaca skrin."
Mod kegagalan biasa dan pembetulan
- Hanya menetapkan
topdanleft→ Terangkan calon, limpahan, had saiz dan sandaran. - Menjadikan setiap popover sebagai modal → Kelaskan menu, tip alat dan dialog mengikut tugasan.
- Mengabaikan pelayar yang tidak disokong → Sediakan
@supportsdan sandaran peletakan sedia ada. - Hanya menguji tetingkap desktop tetap → Sertakan penatalan, zum, skrin sempit, kandungan dinamik dan penggunaan papan kekunci.
- Menganggap fokus sebagai urusan CSS → Tentukan keadaan buka, gerak, tutup dan pulihkan fokus.
Rubrik pemarkahan dan semakan kendiri
Jawapan yang kukuh merangkumi sauh yang stabil, kedudukan calon, peraturan limpahan dan penyembunyian, peningkatan progresif, sempadan penatalan dan saiz dinamik, semantik yang betul, pengurusan fokus, matriks ujian dan kebolehcerapan.
Tanya: Adakah sauh stabil? Bagaimana jika menu tidak muat? Siapa yang meletakkannya dalam bekas tatal? Apakah yang dilakukan oleh pelayar lama? Ke mana fokus kembali? Bagaimanakah saya membuktikan tiada pemotongan, lompatan atau kandungan yang tidak dapat dicapai?
Susulan dan lanjutan
Bagaimanakah perbezaan antara anchor() dan position-area?
position-area menyatakan kawasan relatif kepada sauh; anchor() mendedahkan tepi atau saiz untuk inset, ofset dan pengiraan. Ia boleh digabungkan, tetapi masih memerlukan sandaran dan had saiz.
Bagaimana jika menu lebih tinggi daripada viewport?
Hadkan saiz bloknya dan tatal kandungannya. Pada skrin kecil, beralih kepada skrin penuh atau helaian bawah (bottom sheet) apabila itu lebih menyokong tugasan. Jangan tinggalkan kandungan di luar viewport.
Bagaimanakah anda menguji calon peletakan?
Hasilkan tangkapan skrin merentasi saiz viewport, kedudukan tatal, zum, fon dan panjang kandungan. Sahkan kawasan kelihatan, susunan fokus dan sasaran fokus selepas ditutup.
Bilakah peletakan JavaScript masih sesuai?
Kekalkan sandaran JavaScript untuk pelayar lama, sempadan portal yang kompleks atau data perlanggaran perniagaan. Biarkan CSS mengendalikan pelayar yang disokong dan gunakan JavaScript hanya untuk jurang keupayaan dan penyegerakan keadaan.