Perintah dan konteks
Sebuah tombol aksi pada tabel data membuka menu atau gelembung bantuan. Panel melayang harus mengikuti tombol saat menggulir, menjauh dari tepi viewport, dan menghindari pemotongan oleh elemen leluhur; pengguna perangkat seluler, keyboard, dan peramban tanpa CSS baru harus tetap didukung. Rancang ini dengan CSS Anchor Positioning dan jelaskan kapan harus mempertahankan skrip atau Popover API.
Pertanyaan ini cocok untuk peran frontend, sistem desain, dan platform komponen. Kuncinya adalah menggabungkan penempatan geometris, fallback luapan (overflow), semantik interaksi, dan batasan kompatibilitas.
Apa yang dievaluasi oleh pewawancara
Jawaban yang kuat membedakan antara elemen jangkar (anchor) dan elemen yang diposisikan berdasarkan jangkar, serta menjelaskan bagaimana anchor-name, position-anchor, anchor(), atau position-area membuat relasi tersebut. Jawaban tersebut juga mencakup urutan position-try, keputusan luapan, perilaku penyembunyian, kontainer gulir, konteks penumpukan (stacking contexts), fokus keyboard, dan fallback.
Klarifikasi yang perlu ditanyakan terlebih dahulu
- Apakah panel berupa menu, tooltip, picker, atau penjelasan non-interaktif? Apakah memerlukan semantik Popover atau dialog?
- Apa posisi yang disukai dan posisi alternatif yang diizinkan, ukuran keterbacaan minimum, serta batas aman viewport?
- Apakah pemicu berada di dalam kontainer gulir atau pemotongan, atau di dalam elemen yang ditransformasikan?
- Jika konten membesar, apakah panel harus berpindah sisi, mengecil, menggulir secara internal, atau menjadi tampilan layar penuh?
- Peramban mana yang menjadi target, dan penempatan stabil apa yang menjadi fallback untuk peramban lama?
Jawaban 30 detik
"Saya akan menjadikan pemicu sebagai anchor dan panel sebagai elemen yang diposisikan secara absolut atau tetap. Saya akan menempatkannya dengan anchor() atau position-area, lalu mendeklarasikan alternatif atas dan samping dengan position-try. Komponen tetap membutuhkan batas ukuran, inset viewport, serta semantik fokus dan penutupan; peramban yang tidak mendukung akan menggunakan Popover yang ada atau fallback berbasis pengukuran. Saya akan menguji pengguliran, zoom, konten panjang, navigasi keyboard, dan tepi viewport baik dalam mode peningkatan maupun mode fallback."
Solusi langkah demi langkah
Langkah 1: Buat relasi jangkar
Ekspos nama dari pemicu dengan anchor-name, lalu pilih nama tersebut dari panel dengan position-anchor. Untuk asosiasi implisit, verifikasi cakupan DOM dan aturan nama duplikat agar baris yang berulang tidak terikat ke tombol yang salah.
Langkah 2: Pilih ekspresi penempatan
anchor() membaca tepi atau titik tengah anchor di dalam properti inset; position-area mengekspresikan wilayah logis seperti block-start atau inline-end. Keduanya memerlukan posisi eksplisit, batas ukuran, dan celah (gap), bukan sekadar offset piksel yang di-hardcode.
.action {
anchor-name: --action;
}
.menu {
position: absolute;
position-anchor: --action;
top: anchor(bottom);
inset-inline-start: anchor(start);
margin-block-start: 0.5rem;
}Langkah 3: Deklarasikan urutan fallback
Posisi default adalah di bawah tombol; jika ruang tidak mencukupi, position-try dapat menguji posisi atas dan sisi inline-end. Urutan harus mencerminkan prioritas produk dan menggunakan arah logis baik untuk lokal kiri-ke-kanan maupun kanan-ke-kiri.
.menu {
position-try: flip-block, flip-inline;
max-inline-size: min(90vw, 24rem);
max-block-size: min(70vh, 32rem);
overflow: auto;
}Langkah 4: Tentukan status penempatan yang mustahil
Ketika setiap kandidat meluap, pilihlah dengan sengaja: perkecil dan gulir, sembunyikan petunjuk non-kritis, atau beralih ke tampilan layar penuh. Jangan biarkan separuh menu berada di luar viewport atau mengacaukan luapan dengan penutupan (dismissal).
Langkah 5: Perhitungkan kontainer dan penumpukan
overflow: hidden, lapisan pemotongan, transform, contain, dan z-index dapat mengubah batas yang terlihat atau blok penampung (containing block). Verifikasi konteks pemosisian yang sebenarnya; jika diperlukan, render di top layer yang sesuai sambil mempertahankan hubungan pemicu-panel.
Langkah 6: Pertahankan semantik interaksi dan aksesibilitas
Anchor Positioning menyediakan geometri, bukan semantik menu, tooltip, atau popup. Komponen interaktif tetap memerlukan peran dan nama yang tepat, navigasi keyboard, penutupan dengan Escape, dan pengembalian fokus; petunjuk non-interaktif tidak boleh hanya bergantung pada hover.
Langkah 7: Rencanakan fallback kompatibilitas
MDN menandai bagian-bagian dari Anchor Positioning sebagai kemampuan yang lebih baru. Pertahankan gaya default yang dapat digunakan, lalu aktifkan peningkatan setelah deteksi dukungan; peramban lama dapat menggunakan Popover API, utilitas penempatan komponen yang sudah ada, atau fallback pengukuran kecil. Jangan mengorbankan keterjangkauan menu demi zero-script.
Langkah 8: Bangun validasi yang dapat diulang
Cakup semua sudut viewport, kontainer gulir, zoom, ukuran teks dinamis, label panjang, RTL, keyboard virtual, navigasi keyboard, dan pembaca layar. Catat posisi kandidat, pemotongan, fokus, penguncian gulir, dan pergeseran tata letak (layout shift) baik di lingkungan yang didukung maupun lingkungan fallback.
Pertukaran (trade-offs) dan batasan
Anchor Positioning memindahkan aturan penambatan dan pembalikan posisi umum ke dalam CSS dan dapat mengurangi pengukuran per frame. Ini tetap dibatasi oleh implementasi peramban, konteks penempatan, dan semantik komponen. Aturan tabrakan yang rumit, penempatan lintas top-layer, atau pengukuran spesifik bisnis mungkin masih memerlukan skrip.
position-try memilih di antara kandidat; ini tidak menjamin konten dapat dibaca. Batas ukuran, pengguliran, fokus, dan penutupan tetap menjadi tanggung jawab komponen. Popover menyediakan beberapa perilaku interaksi tetapi tidak menggantikan setiap desain menu atau dialog.
Rencana peluncuran dan bukti
Uji coba satu menu aksi dengan posisi yang disukai, tiga fallback, ukuran maksimum, dan inset viewport. Catat matriks dukungan peramban dan pertahankan penempatan default yang stabil untuk lingkungan yang tidak didukung.
Dokumentasikan penamaan anchor, urutan fallback, arah logis, batas pemotongan, peran, fokus, dan kasus pengujian. Verifikasi perubahan posisi dengan pengguliran nyata dan konten panjang daripada mengandalkan tangkapan layar statis.
Kesalahan umum dan tindak lanjut
Menulis anchor() tanpa fallback
Panel dapat terpotong di tepi. Deklarasikan prioritas kandidat dan tentukan permukaan yang dapat digulir atau alternatif ketika setiap kandidat gagal.
Memperlakukan penempatan sebagai semantik interaksi
CSS tidak mengubah panel menjadi menu atau tooltip. Tambahkan peran, nama, alur keyboard, penanganan Escape, dan pengembalian fokus.
Mengabaikan leluhur pengguliran dan pemotongan
Nilai z-index yang lebih besar tidak dapat meloloskan elemen dari blok penampung yang salah. Periksa overflow, transform, contain, dan konteks gulir sebelum mengubah lapisan rendering.
Hanya menguji di Chromium
Matriks dukungan terus berkembang. Jalankan kasus tepi, keyboard, RTL, dan konten panjang yang sama dalam mode peningkatan maupun fallback.
Bagaimana jika panel masih tidak terbaca?
Periksa posisi kandidat dan ukuran maksimum terlebih dahulu, lalu pilih pengguliran internal, pengecilan ukuran, tampilan layar penuh, atau menyembunyikan konten yang tidak kritis; jangan hanya menaikkan z-index atau menonaktifkan pemeriksaan luapan.