Gesaan dan konteks
Anda menyelenggara komponen tooltip yang kerap diguna semula. Kedudukan anchor CSS menghubungkannya kepada pencetus (trigger) dan fallback position-try mengelakkan limpahan (overflow), tetapi apabila popover beralih ke sisi lain, anak panah, kawasan skrol dan padding kekal salah.
Reka bentuk penyelesaian berorientasikan CSS yang membolehkan kedudukan fallback memacu gaya, mengasingkan tika yang berulang, dan merosot secara selamat apabila kedudukan anchor tidak tersedia.
Perkara yang diuji oleh penemu duga
- Sama ada anda memahami hubungan kedudukan anchor dan pemilihan fallback.
- Sama ada anchored container query boleh membaca kedudukan sebenar dan bukannya menyalin keadaan JavaScript.
- Sama ada kebolehcapaian, sempadan skrol, susunan bertindan (stacking), dan pengasingan komponen berulang ditangani.
- Sama ada pengesanan ciri, reka letak statik, dan peningkatan progresif disertakan.
Soalan untuk penjelasan
- Adakah tooltip ini teks biasa, menu, atau dialog interaktif?
- Adakah fallback bertukar sisi atau memasuki bekas berskrol?
- Adakah pelayar sasaran menyokong kedudukan anchor dan container query?
- Bolehkah JavaScript membaca dimensi, atau adakah penyelesaian mestilah berasaskan CSS sahaja?
Jawapan 30 saat
Saya akan menjadikan pencetus sebagai anchor dan tooltip sebagai bekas berkedudukan anchor dengan fallback position-try yang tersusun. Setiap fallback menggunakan anchored container query untuk mengubah anak panah, padding, dan ketinggian maksimum; gaya dalaman hanya bergantung pada bekas komponen. Gunakan @supports untuk pengesanan ciri, dengan reka letak statik atau kedudukan JavaScript sedia ada sebagai fallback sambil mengekalkan hubungan penerangan yang boleh diakses. Uji tepi viewport, zum, bekas skrol dan teks panjang untuk membuktikan tiada limpahan atau pemotongan fokus.
Analisis terperinci langkah demi langkah
Wujudkan anchor dan kedudukan calon
Isytiharkan anchor-name pada pencetus dan sambungkan tooltip dengan position-anchor serta inset/anchor(). Terangkan susunan calon dengan fallback position-try dan bukannya mengekod keras arah dalam logik komponen.
Jadikan popover sebagai bekas pertanyaan
Tetapkan container-type supaya anchored container query di dalam popover menyesuaikan dengan fallback yang dipilih. Buat pertanyaan pada syarat bekas yang dikaitkan dengan hasil anchor berbanding meneka daripada lebar viewport.
Segerakkan anak panah dan tatalan
Gunakan tepi anak panah, transform-origin, max-block-size, dan overflow yang berbeza untuk setiap penempatan. Kandungan yang panjang diskrol di dalam popover; tooltip tidak boleh mengembang ke luar viewport atau memotong fokus papan kekunci.
Asingkan tika berulang
Berikan setiap tika nama anchor atau skop penamaan tersendiri supaya item senarai tidak sepadan dengan anchor tika lain. Pastikan peraturan susunan bertindan, position-area, dan skrim kekal setempat.
Kesan ciri dan lakukan degradasi
Kesan sokongan dengan @supports (anchor-name: --x) dan keupayaan container-query yang diperlukan. Fallback boleh menggunakan kandungan statik bersebelahan atau penentu kedudukan JavaScript sedia ada, tetapi ia tetap mengekalkan aria-describedby, penolakan papan kekunci dan susunan fokus.
Sahkan sempadan dan kebolehcapaian
Uji viewport sempit, zum, RTL, bekas skrol, sentuhan dan pergerakan dikurangkan (reduced motion). Gunakan papan kekunci dan pembaca skrin untuk memastikan tooltip tidak mengambil fokus secara salah, terpotong, atau menjadi sukar dibaca apabila kedudukan fallback berubah.
Jawapan model
Saya akan mengisytiharkan pencetus sebagai anchor, menjadikan tooltip sebagai bekas, dan menyediakan fallback position-try yang tersusun. Anchored container query di dalam popover menyesuaikan anak panah, padding, ketinggian maksimum, dan arah skrol kepada kedudukan sebenar; setiap tika mengasingkan nama anchor dan peraturan susunan bertindannya. @supports menyediakan peningkatan progresif, manakala pelayar yang tidak disokong menggunakan kedudukan statik atau JavaScript sedia ada dengan aria-describedby, penolakan papan kekunci, dan susunan fokus yang sama. Uji viewport sempit, zum, RTL, bekas skrol, teks panjang, dan pembaca skrin.
Kesilapan biasa
- Meneka fallback daripada lebar viewport dalam JavaScript dan bukannya bertindak balas kepada kedudukan sebenar.
- Berkongsi satu nama anchor merentasi setiap tooltip dan memautkan tika bersama-sama.
- Mengubah top/left tanpa menyegerakkan anak panah, skrol, atau transform-origin.
- Meninggalkan
@supportsdan menyebabkan pelayar yang tidak disokong mempunyai popover yang tidak boleh digunakan. - Menguji viewport biasa sahaja dan mengabaikan RTL, zum, bekas skrol dan fokus papan kekunci.
- Menganggap tooltip sebagai dialog tanpa semantik kebolehcapaian yang eksplisit.
Soalan susulan
Bagaimanakah anchored container query berbeza daripada container query biasa?
Ia memilih gaya daripada kedudukan fallback elemen yang berkedudukan anchor; container query biasa terutamanya menggunakan saiz bekas atau syarat gaya.
Apakah yang berlaku apabila kedudukan anchor tidak disokong?
Gunakan reka letak statik bersebelahan atau penentu kedudukan JavaScript sedia ada dengan nama boleh diakses, penolakan dan susunan kandungan yang sama; jangan bergantung pada laluan sintaks separa.
Bagaimanakah anda menghentikan popover daripada menutupi fokus?
Hadkan saiznya dan skrol secara dalaman, kemudian uji Tab, Escape, pembaca skrin, dan induk skrol supaya elemen yang difokuskan kekal kelihatan.
Mengapa tidak menggunakan empat media query berarah?
Media query menerangkan viewport, bukan ruang anchor dan bekas yang sebenar; fallback juga bergantung pada bekas skrol, fon dan panjang kandungan.