Petunjuk dan cakupan
Sebuah tombol membuka menu, petunjuk, atau panel perintah. Popover harus tetap berada di dekat tombol, berpindah posisi saat ruang tidak tersedia, menghindari pemotongan oleh viewport atau kontainer scroll, serta mendukung fokus keyboard dan penutupan. Bandingkan perhitungan koordinat JavaScript dengan CSS Anchor Positioning dan usulkan peningkatan progresif (progressive enhancement).
MDN mendeskripsikan penentuan posisi anchor sebagai penempatan satu elemen relatif terhadap elemen lain dengan mekanisme fallback seperti position-try. Panduan Chrome menunjukkan relasi ini melalui anchor-name dan position-anchor. Jawaban yang kuat mencakup tata letak, scroll, dukungan peramban, dan semantik interaksi secara bersamaan.
Hal yang dievaluasi pewawancara
- Apakah Anda memisahkan penempatan visual, semantik DOM, dan manajemen fokus.
- Apakah Anda memahami relasi anchor dan kandidat fallback daripada sekadar menghafal nama properti.
- Apakah Anda mempertimbangkan kontainer scroll, pemotongan (clipping), dan stacking context.
- Apakah Anda merancang fallback JavaScript minimal ketika fitur CSS tidak tersedia.
- Apakah Anda menentukan matriks pengujian peramban, input, dan aksesibilitas.
Wawancara frontend umumnya menguji dasar-dasar tata letak peramban, komponen yang mudah dipelihara, dan penanganan kasus ekstrem. Jawaban yang kuat menempatkan fitur CSS baru dalam batasan kompatibilitas dan produk yang nyata alih-alih mengasumsikan dukungan universal.
Pertanyaan klarifikasi sebelum menjawab
- Apakah popover tersebut berupa menu, tooltip, atau dialog? Peran semantik mengubah perilaku fokus dan tombol Escape.
- Apakah referensinya berupa tombol, ikon, atau item daftar? Bisakah referensi tersebut berpindah atau divirtualisasi?
- Bolehkah popover keluar dari kontainer scroll? Apakah diperlukan lapisan perenderan tingkat atas untuk menghindari pemotongan?
- Peramban dan WebView mana saja yang didukung? Haruskah fallback mempertahankan semua perilaku?
- Haruskah pergerakan dianimasikan, dan apa yang terjadi jika pengguna memilih pengurangan gerakan (reduced motion)?
Kerangka jawaban 30 detik
Pertama, saya akan menentukan semantik popover dan model fokus. Kemudian saya akan menamai tombol sebagai anchor dan mengaitkan popover dengannya. Saya akan menempatkannya di bawah secara default dan menyediakan fallback position-try yang berurutan di atas dan di samping; saya tidak akan bergantung pada satu offset tetap. Peramban yang tidak mendukung akan menggunakan adaptor penentuan posisi kecil atau fallback inline, yang divalidasi dengan pengujian aksesibilitas yang sama.
Jawaban mendalam langkah demi langkah
Langkah 1: Tangani semantik dan fokus terlebih dahulu
Menu memerlukan item menu yang dapat menerima fokus dan status ekspansi yang eksplisit; tooltip tidak boleh memuat tindakan wajib; panel perintah yang kompleks bisa menyerupai dialog. Saat dibuka, catat pemicunya; saat ditutup, pulihkan fokus. Aturan Escape dan klik di luar harus selaras. CSS mengontrol penempatan, bukan jaminan interaksi ini.
Langkah 2: Buat relasi anchor
Beri nama pemicu sebagai anchor dan arahkan popover ke position anchor tersebut. Jaga agar relasi tetap stabil atau dicakup per instans sehingga beberapa item daftar tidak berbagi satu nama yang sama. Penghancuran komponen, penggunaan kembali, dan virtual scrolling harus menghapus asosiasi yang sudah usang.
Langkah 3: Tentukan posisi default dan fallback
Deklarasikan posisi umum di bawah pemicu, lalu cantumkan kandidat di atas, sisi awal (start-side), dan sisi akhir (end-side). Urutan kandidat mengekspresikan preferensi produk, seperti mempertahankan perataan horizontal sebelum memperkecil konten. Gunakan mekanisme position-try untuk membiarkan peramban memilih kandidat yang memungkinkan dan menampilkan kandidat yang gagal untuk debugging.
Langkah 4: Tangani batas dan scroll
Periksa pemotongan oleh kontainer scroll, elemen leluhur yang ditransformasi, dan stacking context baru. Jika popover harus melintasi batas kontainer, rendernya di lapisan tingkat atas sambil mempertahankan relasi anchor tingkat instans. Uji scroll dan zoom saat pemicu meninggalkan viewport, kontainer bersarang, dan teks kanan-ke-kiri (RTL).
Langkah 5: Pertahankan progressive enhancement
Gunakan penempatan CSS setelah deteksi kemampuan; aktifkan adaptor JavaScript hanya saat diperlukan. Adaptor membaca persegi panjang pemicu, mengevaluasi kandidat, dan hanya mengamati sinyal scroll, ukuran, dan tata letak yang diperlukan. Jangan biarkan kedua implementasi menulis gaya posisi secara bersamaan, karena dapat menyebabkan perlombaan (race) dan flicker.
Langkah 6: Batasi ukuran dan konten
Tentukan lebar dan tinggi maksimum, padding, serta area scroll internal. Pemilihan kandidat harus mempertimbangkan ruang yang tersedia dan ukuran minimum yang dapat dibaca; konten yang panjang harus bergulir di dalam popover alih-alih meluap ke halaman. Evaluasi ulang setelah konten dinamis dimuat karena pengukuran awal mungkin sudah basi.
Langkah 7: Tangani gerakan dan perangkat input
Berikan durasi eksplisit pada perubahan posisi dan jalur untuk reduced-motion. Input keyboard, sentuh, dan penunjuk harus berbagi aturan buka, tutup, dan fokus yang sama; tooltip hover tidak dapat menggantikan bantuan yang dapat diakses keyboard. Animasi tidak boleh menunda pemulihan fokus atau menampilkan status yang salah ke teknologi asistif.
Langkah 8: Bangun matriks verifikasi
Uji posisi default, setiap fallback, viewport sempit, scroll bersarang, zoom, teks kanan-ke-kiri, konten panjang, konten dinamis, dan peramban yang tidak didukung. Pastikan tidak ada pemotongan, relasi pemicu-konten benar, penutupan dengan Escape berfungsi, fokus dipulihkan, dan status accessibility-tree konsisten. Bandingkan jalur CSS dan fallback alih-alih hanya menerima tangkapan layar layar lebar.
Contoh jawaban
Saya akan membedakan semantik menu, tooltip, dan dialog serta menetapkan perilaku fokus dan penutupan terlebih dahulu. Pemicu diberi nama anchor; popover menggunakan position-anchor, default di bawah, dan mencantumkan fallback position-try di atas dan di samping. Jika kontainer scroll memotongnya, saya akan merendernya di lapisan tingkat atas sambil mempertahankan relasi instans. Peramban yang tidak didukung menggunakan satu adaptor JavaScript dengan semantik yang sama. Saya akan menguji viewport sempit, scroll bersarang, teks kanan-ke-kiri, konten dinamis, keyboard, dan pembaca layar, sambil tetap menghormati preferensi reduced motion.
Kesalahan umum
- Menghitung koordinat hanya sekali → scroll dan zoom merusak penempatan → buat CSS atau adaptor bereaksi terhadap perubahan tata letak.
- Memperlakukan tooltip sebagai menu → keyboard dan teknologi asistif gagal → tentukan semantik dan fokus terlebih dahulu.
- Hanya menyediakan posisi di bawah → tepi viewport meluap → urutkan beberapa kandidat.
- Mengabaikan
overflow: hidden→ elemen leluhur memotong popover → pilih batas perenderan tingkat atas yang tepat. - Membiarkan CSS dan JavaScript sama-sama mengatur posisi → konflik dan flicker → aktifkan tepat satu jalur setelah deteksi kemampuan.
- Hanya menguji layar lebar dengan mouse → perangkat seluler dan keyboard gagal → cakup perangkat input, arah teks, dan aksesibilitas.
Pertanyaan lanjutan dan jawaban
Bisakah Anchor Positioning menggantikan setiap pustaka elemen melayang (floating-element)?
Tidak. Fitur ini menangani relasi tata letak dan penempatan fallback, bukan fokus, peran (roles), penutupan, penyeretan (dragging), atau aturan tabrakan bisnis yang kompleks. Komponen masih membutuhkan lapisan interaksi dan kompatibilitas.
Bagaimana jika kontainer scroll memotong popover?
Tentukan apakah melintasi batas diperlukan. Jika ya, gunakan lapisan perenderan tingkat atas dengan relasi instans; jika tidak, batasi kandidat dan gulir konten di dalam kontainer.
Bagaimana cara menghindari tabrakan anchor-name dalam sebuah daftar?
Hasilkan relasi per-instans yang stabil atau kelola nama dengan siklus hidup komponen. Hapus asosiasi saat node yang divirtualisasi didaur ulang.
Apa fallback ketika CSS tidak didukung?
Gunakan deteksi kemampuan untuk mengaktifkan satu adaptor penentuan posisi JavaScript dengan semantik, fokus, dan penutupan yang identik. Untuk konten non-kritis, blok inline di bawah pemicu bisa menjadi fallback yang lebih sederhana.
Bagaimana jika konten dinamis mengubah posisinya?
Biarkan perubahan ukuran memicu tata letak kembali; pada jalur fallback, amati hanya sinyal ukuran dan scroll yang diperlukan. Jangan menyembunyikan tata letak yang tidak stabil di balik batas waktu (timeout) tetap.
Bagaimana Anda membuktikan bahwa kandidat fallback berfungsi?
Buat viewport dan status scroll yang dapat direproduksi di setiap tepi, lalu pastikan penempatan akhir, tidak adanya pemotongan, ukuran yang terbaca, dan jarak anchor alih-alih hanya memeriksa nama kelas CSS.
Kapan Anda masih akan memilih pustaka floating JavaScript?
Pilih salah satunya ketika dukungan peramban yang luas, aturan tabrakan tingkat lanjut, penempatan lintas dokumen, atau perilaku aksesibilitas yang matang lebih berharga daripada jalur CSS bawaan. CSS dapat tetap menjadi lapisan tata letak progresif.