Petunjuk dan konteks
Anda mengelola komponen tooltip yang sangat sering digunakan kembali. Pemosisian anchor CSS menghubungkannya ke pemicu (trigger) dan fallback position-try mencegah luapan (overflow), tetapi ketika popover berpindah ke sisi lain, panah, area gulir, dan padding-nya tetap salah.
Rancang solusi yang mengutamakan CSS yang memungkinkan penempatan fallback menentukan gaya, mengisolasi instans yang berulang, dan terdegradasi secara aman saat pemosisian anchor tidak tersedia.
Hal yang diuji oleh pewawancara
- Apakah Anda memahami hubungan pemosisian anchor dan pemilihan fallback.
- Apakah anchored container query dapat membaca penempatan aktual alih-alih menyalin status JavaScript.
- Apakah aksesibilitas, batas gulir, penumpukan (stacking), dan isolasi komponen berulang ditangani dengan baik.
- Apakah deteksi fitur, tata letak statis, dan peningkatan progresif (progressive enhancement) disertakan.
Pertanyaan untuk klarifikasi
- Apakah tooltip berupa teks biasa, menu, atau dialog interaktif?
- Apakah fallback berpindah sisi atau masuk ke dalam kontainer bergulir?
- Apakah peramban target mendukung pemosisian anchor dan container queries?
- Bolehkah JavaScript membaca dimensi, atau solusinya harus murni CSS?
Jawaban 30 detik
Saya akan menjadikan pemicu sebagai anchor dan tooltip sebagai kontainer berposisi anchor dengan fallback position-try yang berurutan. Setiap fallback menggunakan anchored container query untuk mengubah panah, padding, dan tinggi maksimum; gaya internal hanya bergantung pada kontainer komponen. Gunakan @supports untuk deteksi fitur, dengan tata letak statis atau pemosisian JavaScript yang ada sebagai fallback sambil tetap mempertahankan hubungan deskripsi yang dapat diakses. Uji tepi viewport, zoom, kontainer gulir, dan teks panjang untuk memastikan tidak ada luapan atau pemotongan fokus.
Pembahasan mendalam langkah demi langkah
Tetapkan anchor dan posisi kandidat
Deklarasikan anchor-name pada pemicu dan hubungkan tooltip dengan position-anchor serta inset/anchor(). Jelaskan urutan kandidat dengan fallback position-try alih-alih menuliskan arah secara hard-code dalam logika komponen.
Jadikan popover sebagai kontainer kueri
Atur container-type agar anchored container query di dalam popover dapat beradaptasi dengan fallback yang dipilih. Kueri kondisi kontainer yang terkait dengan hasil anchor alih-alih menebak dari lebar viewport.
Sinkronkan panah dan pengguliran
Gunakan tepi panah, transform-origin, max-block-size, dan overflow yang berbeda untuk setiap penempatan. Konten yang panjang akan bergulir di dalam popover; tooltip tidak boleh melebar ke luar viewport atau memotong fokus keyboard.
Isolasi instans yang berulang
Berikan setiap instans nama anchor atau cakupan penamaan tersendiri agar item daftar tidak cocok dengan anchor milik instans lain. Jaga aturan penumpukan, position-area, dan scrim tetap lokal.
Deteksi fitur dan degradasi
Deteksi dukungan dengan @supports (anchor-name: --x) dan kemampuan container-query yang diperlukan. Fallback dapat menggunakan konten statis yang berdekatan atau pemosisian JavaScript yang sudah ada, tetapi tetap mempertahankan aria-describedby, penutupan dengan keyboard, dan urutan fokus.
Verifikasi batas dan aksesibilitas
Uji viewport sempit, zoom, RTL, kontainer gulir, sentuhan, dan reduced motion. Gunakan keyboard dan pembaca layar untuk memastikan tooltip tidak merebut fokus, terpotong, atau menjadi tidak terbaca saat penempatan fallback berubah.
Jawaban model
Saya akan mendeklarasikan pemicu sebagai anchor, menjadikan tooltip sebagai kontainer, dan menyediakan fallback position-try yang berurutan. Anchored container query di dalam popover menyesuaikan panah, padding, tinggi maksimum, dan arah gulir ke penempatan aktual; setiap instans mengisolasi nama anchor dan aturan penumpukannya. @supports menyediakan peningkatan progresif, sementara peramban yang tidak didukung menggunakan penempatan statis atau JavaScript yang ada dengan aria-describedby, penutupan dengan keyboard, dan urutan fokus yang sama. Uji viewport sempit, zoom, RTL, kontainer gulir, teks panjang, dan pembaca layar.
Kesalahan umum
- Menebak fallback dari lebar viewport di JavaScript alih-alih merespons penempatan aktual.
- Berbagi satu nama anchor di semua tooltip dan menghubungkan instans secara tidak sengaja.
- Mengubah top/left tanpa menyinkronkan panah, gulir, atau transform-origin.
- Menghilangkan
@supportsdan membiarkan peramban yang tidak didukung memiliki popover yang tidak dapat digunakan. - Hanya menguji viewport normal dan mengabaikan RTL, zoom, kontainer gulir, serta fokus keyboard.
- Memperlakukan tooltip sebagai dialog tanpa semantik aksesibilitas yang eksplisit.
Pertanyaan lanjutan
Apa perbedaan antara anchored container query dan container query biasa?
Fitur ini memilih gaya dari penempatan fallback elemen yang diposisikan secara anchor; container query biasa terutama menggunakan ukuran kontainer atau kondisi gaya.
Apa yang terjadi jika pemosisian anchor tidak didukung?
Gunakan tata letak statis yang berdekatan atau pemosisian JavaScript yang ada dengan nama aksesibel, mekanisme penutupan, dan urutan konten yang sama; jangan mengandalkan jalur sintaks parsial.
Bagaimana cara mencegah popover menutupi fokus?
Batasi ukurannya dan buat pengguliran secara internal, lalu uji Tab, Escape, pembaca layar, dan induk gulir agar elemen yang difokuskan tetap terlihat.
Mengapa tidak menggunakan empat media queries terarah?
Media queries menggambarkan viewport, bukan ruang anchor dan kontainer yang sebenarnya; fallback juga bergantung pada kontainer gulir, font, dan panjang konten.