Perintah dan cakupan
Pertanyaan ini menguji apakah "tempatkan di samping tombol" dapat menjadi kontrak tata letak dan interaksi yang dapat diverifikasi. Cakup anchor-name, anchor(), posisi kandidat, luapan (overflow), scrolling, deteksi fitur, serta perilaku keyboard dan fokus untuk menu atau dialog.
Apa yang sedang dievaluasi oleh pewawancara
- Hubungan anchor yang stabil serta peran
position-area,anchor(), dan posisi fallback. - Visibilitas di bawah tepi viewport, kontainer scroll, zoom, dan konten dinamis.
- Peningkatan progresif (progressive enhancement) alih-alih ketergantungan mutlak pada pengukuran JavaScript.
- Semantik dan perilaku yang benar untuk menu, tooltip, dan dialog.
- Verifikasi matriks peramban, regresi visual, keyboard, dan pembaca layar (screen reader).
Struktur jawaban yang direkomendasikan
Tentukan jenis popover, anchor, dan area terlihat minimum. Berikan jalur CSS dengan penamaan anchor, posisi yang diinginkan, fallback, dan aturan penyembunyian. Kemudian jelaskan fallback @supports ke komponen pemosisian yang ada, diikuti oleh fokus, scrolling, ukuran dinamis, dan pengujian.
Pembahasan mendalam: pemosisian yang dapat digunakan dan mudah diakses
Membuat anchor yang stabil
Berikan pemicu (trigger) anchor-name yang unik; gunakan position-anchor atau referensi eksplisit pada popover. Untuk baris berulang, buat hubungan yang stabil per baris dan bersihkan state saat dilepas (unmount) alih-alih menebak dari kedekatan DOM.
Menentukan kandidat dan aturan luapan
Gunakan position-area atau anchor() untuk sisi yang diinginkan, lalu position-try-fallbacks atau aturan yang setara untuk sisi berlawanan, perataan tepi, dan pengurangan ukuran. Tetapkan ukuran blok maksimum dan scrolling internal. Jika tidak muat, sembunyikan atau beralih ke panel layar penuh daripada memotong konten.
Menangani scrolling dan ukuran dinamis
Saat anchor bergerak di dalam kontainer scroll, verifikasi containing block dan konteks penumpukan (stacking context). Periksa kembali visibilitas setelah konten asinkron, pemuatan font, dan perubahan zoom. Hindari pengukuran scroll buatan sendiri pada jalur native.
Menambahkan peningkatan progresif
Gunakan @supports (anchor-name: --trigger). Peramban yang didukung menggunakan CSS; peramban lain menggunakan kembali logika portal dan pemosisian yang ada dengan pengukuran terbatas, pembersihan, dan penanganan pembalikan (flip). Kedua jalur berbagi state menu dan aturan aksesibilitas.
Mencocokkan semantik dengan tugas
Menu menggunakan item menu dan model tombol panah yang terdokumentasi. Tooltip tidak boleh berisi tindakan yang wajib. Gunakan dialog hanya jika latar belakang benar-benar diblokir; modal mengelola fokus masuk, perilaku Tab, Escape, dan pemulihan fokus.
Contoh jawaban
"Saya akan membuat filter sebagai menu non-modal. Tombol mendapatkan anchor-name yang stabil; menu menggunakan position-anchor di bawahnya, dengan fallback di atas dan di sepanjang tepi viewport serta tinggi maksimum untuk scrolling internal. Jika @supports gagal, pemosisian portal yang ada menangani tata letak sementara state dan perilaku keyboard tetap dibagikan. Membuka menu memindahkan fokus ke item pertama, tombol panah berpindah di dalam menu, dan Escape atau klik di luar akan menutupnya serta mengembalikan fokus ke tombol. Saya akan menguji viewport sempit, kontainer scroll, zoom, konten asinkron, dan pemotongan dengan tangkapan layar, pemeriksaan keyboard, dan pemeriksaan pembaca layar."
Pola kegagalan umum dan perbaikannya
- Hanya mengatur
topdanleft→ Jelaskan kandidat, luapan, batas ukuran, dan fallback. - Membuat setiap popover menjadi modal → Klasifikasikan menu, tooltip, dan dialog berdasarkan tugasnya.
- Mengabaikan peramban yang tidak didukung → Sediakan
@supportsdan fallback pemosisian yang ada. - Hanya menguji pada jendela desktop statis → Sertakan scrolling, zoom, layar sempit, konten dinamis, dan penggunaan keyboard.
- Memperlakukan fokus sebagai urusan CSS → Tentukan state buka, pindah, tutup, dan pemulihan fokus.
Rubrik penilaian dan pemeriksaan mandiri
Jawaban yang kuat mencakup anchor yang stabil, posisi kandidat, aturan luapan dan penyembunyian, peningkatan progresif, batas scrolling dan ukuran dinamis, semantik yang benar, manajemen fokus, matriks pengujian, dan observabilitas.
Tanyakan: Apakah anchor stabil? Bagaimana jika menu tidak muat? Siapa yang memosisikannya dalam kontainer scroll? Apa yang dilakukan peramban lama? Ke mana fokus kembali? Bagaimana saya membuktikan tidak ada pemotongan, lompatan, atau konten yang tidak dapat dijangkau?
Tindak lanjut dan ekstensi
Apa perbedaan antara anchor() dan position-area?
position-area mengekspresikan wilayah relatif terhadap anchor; anchor() mengekspos tepi atau ukuran untuk inset, offset, dan kalkulasi. Keduanya dapat digabungkan, tetapi tetap memerlukan fallback dan batas ukuran.
Bagaimana jika menu lebih tinggi dari viewport?
Batasi ukuran bloknya dan buat kontennya dapat di-scroll. Pada layar kecil, beralihlah ke layar penuh atau bottom sheet jika itu lebih mendukung tugas tersebut. Jangan biarkan konten berada di luar viewport.
Bagaimana cara menguji kandidat pemosisian?
Hasilkan tangkapan layar di berbagai ukuran viewport, posisi scroll, zoom, font, dan panjang konten. Pastikan area yang terlihat, urutan fokus, dan target fokus setelah ditutup sudah tepat.
Kapan pemosisian JavaScript masih tepat digunakan?
Pertahankan fallback JavaScript untuk peramban lama, batas portal yang kompleks, atau data tabrakan bisnis. Biarkan CSS menangani peramban yang didukung dan gunakan JavaScript hanya untuk kesenjangan kemampuan dan sinkronisasi state.