Gesaan dan konteks
Butang tindakan jadual data membuka menu atau buih bantuan. Panel terapung mesti mengikut butang semasa menatal, menjauhi tepi viewport dan mengelakkan keratan oleh leluhur; pengguna mudah alih, papan kekunci dan pelayar tanpa CSS baharu mesti kekal disokong. Reka bentuk ini dengan CSS Anchor Positioning dan terangkan bila perlu mengekalkan skrip atau Popover API.
Soalan ini sesuai untuk peranan frontend, sistem reka bentuk dan platform komponen. Kuncinya ialah menggabungkan peletakan geometri, sandaran limpahan, semantik interaksi dan kekangan keserasian.
Perkara yang dinilai oleh penemu duga
Jawapan yang kukuh membezakan elemen anchor daripada elemen yang diletakkan secara anchor dan menerangkan cara anchor-name, position-anchor, anchor() atau position-area mewujudkan hubungan tersebut. Ia juga merangkumi susunan position-try, keputusan limpahan, tingkah laku penyembunyian, bekas tatal, konteks susunan (stacking contexts), fokus papan kekunci dan sandaran.
Penjelasan untuk ditanya terlebih dahulu
- Adakah panel itu menu, tooltip, pemilih atau penjelasan bukan interaktif? Adakah ia memerlukan semantik Popover atau dialog?
- Apakah kedudukan pilihan dan alternatif yang dibenarkan, saiz boleh dibaca minimum dan inset viewport yang selamat?
- Adakah pencetus berada di dalam bekas tatal atau keratan, atau di dalam elemen yang ditransformasikan?
- Sekiranya kandungan yang bertambah perlu beralih posisi, mengecut, menatal secara dalaman atau menjadi paparan skrin penuh?
- Pelayar manakah yang disasarkan, dan apakah peletakan stabil yang menjadi sandaran pelayar lama?
Jawapan 30 saat
"Saya akan menjadikan pencetus sebagai anchor dan panel sebagai elemen berkedudukan mutlak atau tetap. Saya akan meletakkannya dengan anchor() atau position-area, kemudian mengisytiharkan alternatif atas dan sisi dengan position-try. Komponen masih memerlukan had saiz, inset viewport, semantik fokus dan penutupan; pelayar yang tidak disokong menggunakan Popover sedia ada atau sandaran yang diukur. Saya akan menguji penatalan, zum, kandungan panjang, navigasi papan kekunci dan tepi viewport dalam kedua-dua mod dipertingkat dan sandaran."
Penyelesaian langkah demi langkah
Langkah 1: Cipta hubungan anchor
Dedahkan nama daripada pencetus dengan anchor-name, kemudian pilihnya daripada panel dengan position-anchor. Untuk perkaitan tersirat, sahkan skop DOM dan peraturan nama pendua supaya baris yang berulang tidak terikat pada butang yang berbeza.
Langkah 2: Pilih ungkapan peletakan
anchor() membaca tepi atau tengah anchor di dalam sifat inset; position-area menyatakan kawasan logik seperti block-start atau inline-end. Kedua-duanya memerlukan kedudukan eksplisit, had saiz dan jarak dan bukannya satu ofset piksel yang dikodkan secara kekal.
.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: Isytiharkan susunan sandaran
Pilihan lalai adalah di bawah butang; apabila ruang tidak mencukupi, position-try boleh menguji bahagian atas dan sisi inline-end. Susunan harus mencerminkan keutamaan produk dan menggunakan arah logik untuk kedua-dua lokal kiri-ke-kanan dan 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 keadaan peletakan yang mustahil
Apabila setiap calon melimpah, buat pilihan secara sengaja: kecilkan dan tatal, sembunyikan petunjuk bukan kritikal, atau beralih ke paparan skrin penuh. Jangan biarkan separuh menu berada di luar viewport atau mengelirukan limpahan dengan penutupan.
Langkah 5: Ambil kira bekas dan susunan
overflow: hidden, lapisan keratan, transform, contain dan z-index boleh mengubah sempadan yang kelihatan atau blok yang mengandungi (containing block). Sahkan konteks peletakan sebenar; jika perlu, paparkan dalam top layer yang sesuai sambil mengekalkan hubungan pencetus-panel.
Langkah 6: Kekalkan semantik interaksi dan kebolehcapaian
Anchor Positioning membekalkan geometri, bukan semantik menu, tooltip atau popup. Komponen interaktif masih memerlukan peranan dan nama yang sesuai, navigasi papan kekunci, penutupan Escape dan pengembalian fokus; petunjuk bukan interaktif tidak boleh bergantung pada hover sahaja.
Langkah 7: Rancang sandaran keserasian
MDN menandakan bahagian Anchor Positioning sebagai keupayaan yang lebih baharu. Kekalkan gaya lalai yang boleh digunakan, kemudian dayakan peningkatan selepas pengesanan sokongan; pelayar lama boleh menggunakan Popover API, utiliti peletakan komponen sedia ada atau sandaran pengukuran kecil. Jangan korbankan kebolehcapaian menu demi sifar skrip.
Langkah 8: Bina pengesahan yang boleh diulang
Liputi semua penjuru viewport, bekas tatal, zum, saiz teks dinamik, label panjang, RTL, papan kekunci maya, navigasi papan kekunci dan pembaca skrin. Rekod kedudukan calon, keratan, fokus, penguncian tatal dan anjakan reka letak (layout shift) dalam kedua-dua persekitaran yang disokong dan sandaran.
Pertukaran (trade-offs) dan batasan
Anchor Positioning memindahkan peraturan penambatan dan pembalikan biasa ke dalam CSS serta boleh mengurangkan pengukuran bagi setiap bingkai. Ia kekal dikekang oleh pelaksanaan pelayar, konteks peletakan dan semantik komponen. Peraturan pertembungan yang kompleks, peletakan merentas top-layer atau pengukuran khusus perniagaan mungkin masih memerlukan skrip.
position-try memilih antara calon; ia tidak menjamin kandungan yang boleh dibaca. Had saiz, penatalan, fokus dan penutupan kekal menjadi tanggungjawab komponen. Popover membekalkan beberapa tingkah laku interaksi tetapi tidak menggantikan setiap reka bentuk menu atau dialog.
Pelan pelancaran dan bukti
Rintis satu menu tindakan dengan kedudukan pilihan, tiga sandaran, saiz maksimum dan inset viewport. Rekod matriks sokongan pelayar dan kekalkan peletakan lalai yang stabil untuk persekitaran yang tidak disokong.
Dokumentasikan penamaan anchor, susunan sandaran, arah logik, sempadan keratan, peranan, fokus dan kes ujian. Sahkan perubahan kedudukan dengan penatalan sebenar dan kandungan panjang dan bukannya bergantung pada tangkapan skrin statik.
Kesilapan lazim dan tindakan susulan
Menulis anchor() tanpa sandaran
Panel boleh dikerat pada bahagian tepi. Isytiharkan keutamaan calon dan tentukan permukaan boleh tatal atau alternatif apabila setiap calon gagal.
Memperlakukan peletakan sebagai semantik interaksi
CSS tidak menukar panel menjadi menu atau tooltip. Tambahkan peranan, nama, laluan papan kekunci, pengendalian Escape dan pengembalian fokus.
Mengabaikan leluhur tatal dan keratan
z-index yang lebih besar tidak boleh melarikan diri daripada blok yang mengandungi yang salah. Periksa overflow, transform, contain dan konteks tatal sebelum menukar lapisan pemaparan.
Menguji Chromium sahaja
Matriks sokongan sentiasa berkembang. Jalankan kes tepi, papan kekunci, RTL dan kandungan panjang yang sama dalam mod dipertingkat dan sandaran.
Bagaimana jika panel masih tidak boleh dibaca?
Semak kedudukan calon dan saiz maksimum terlebih dahulu, kemudian pilih penatalan dalaman, mengecutkan saiz, paparan skrin penuh atau menyembunyikan kandungan bukan kritikal; jangan hanya menaikkan z-index atau melumpuhkan pemeriksaan limpahan.