Gesaan dan konteks
Anda memerlukan karusel kad produk mendatar dan mahu pelayar menjana butang tatal sebelumnya/seterusnya serta penanda kedudukan. Terangkan CSS Overflow Module Level 5, sandaran pelayar tidak disokong, kebolehcapaian dan kriteria keluaran.
CSS Overflow 5 mentakrifkan kawalan ::scroll-button() dan ::scroll-marker yang dijana oleh bekas tatal (scroll container), serta scroll-marker-group untuk mengumpulkannya. Sokongan pelayar masih berkembang, jadi temuduga ini menguji sempadan keupayaan dan peningkatan progresif (progressive enhancement) dan bukannya menganggap ciri tersebut sebagai asas universal.
Perkara yang dinilai oleh penemu duga
Penemu duga mahu anda membezakan bekas tatal, butang tatal dan kumpulan penanda; menerangkan pemilihan paksi, keadaan dinyahdayakan (disabled) dan tingkah laku penatalan; mengekalkan pautan asli dan laluan papan kekunci; menyediakan sandaran yang boleh digunakan; dan mengesahkan dengan peranti sebenar serta teknologi bantuan dan bukannya sekadar memeriksa piksel.
Soalan penjelasan
Kandungan dan reka letak
Tanya sama ada ini karusel kad berhalaman, galeri berterusan atau senarai tab; berapa banyak item yang muncul bagi setiap halaman; sama ada lebar item adalah tetap; dan sama ada penatalan bebas dibenarkan.
Skop pelayar
Sahkan pelayar sasaran, tetingkap versi yang disokong, dasar JavaScript dan sama ada produk boleh menyembunyikan peningkatan eksperimen dalam pelayar tanpa sokongan.
Interaksi dan kebolehcapaian
Sahkan susunan fokus papan kekunci, pengumuman pembaca skrin untuk item semasa, tingkah laku sentuhan dan roda tetikus, keutamaan pergerakan dikurangkan (reduced-motion), dan maklum balas apabila butang tidak tersedia.
Jawapan 30 saat
“Saya akan membina bekas tatal mendatar biasa dengan kad yang boleh difokuskan sebagai asas, kemudian mendayakan scroll-marker-group dan ::scroll-button() di mana CSS Overflow 5 disokong. Butang mencetuskan penatalan, tetapi kad mengekalkan semantik dan laluan papan kekuncinya sendiri. Saya akan mengehadkan peningkatan dengan @supports selector(::scroll-button(*)). Pelayar yang tidak disokong mengekalkan penatalan asli atau kawalan JavaScript kecil, dan ujian papan kekunci, pembaca skrin, sentuhan serta pergerakan dikurangkan dijadikan kriteria pelepasan.”
Penyelesaian langkah demi langkah
Langkah 1: Wujudkan asas yang boleh digunakan
Mulakan dengan reka letak biasa, overflow-x: auto, dasar scroll-snap yang jelas dan penggayaan fokus yang kelihatan. Setiap kad mempunyai tajuk, pautan atau butang, supaya kandungan tetap boleh dicapai tanpa penanda yang dijana.
Langkah 2: Dayakan kawalan asli
Dalam pelayar yang menyokong, tetapkan kumpulan penanda dan gunakan ::scroll-button(left) serta ::scroll-button(right) untuk kawalan sebelumnya dan seterusnya. Spesifikasi mengaitkan butang-butang ini dengan bekas tatal punca; ketersediaan mengikut baki kandungan yang boleh ditatal, jadi ia bukan unsur pseudo hiasan biasa.
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}Langkah 3: Kesan keupayaan
Kawal gaya peningkatan dengan @supports atau pengesanan keupayaan pemilih. Apabila pengesanan gagal, jangan sembunyikan bar tatal, kad atau sandaran binaan sendiri. Apabila ia berjaya, kekalkan dimensi yang stabil supaya kawalan yang dijana tidak mengubah julat kandungan yang kelihatan secara tidak dijangka.
Langkah 4: Kekalkan semantik dan laluan papan kekunci
Butang unsur pseudo yang dijana tidak sepatutnya menjadi satu-satunya laluan operasi. Tentukan pergerakan fokus yang konsisten, kekunci Home/End, kekunci anak panah dan tingkah laku sentuhan; tatal kad ke dalam paparan apabila fokus mencapainya. Pembaca skrin harus mengumumkan nama karusel, kad semasa dan tindakan, bukan sekadar “seterusnya”.
Langkah 5: Kendalikan paksi dan RTL
Argumen butang berkaitan dengan paksi tatal, jadi left dan right fizikal tidak secara automatik menjadi permulaan dan penamat logik. Uji RTL, mod penulisan menegak dan mod penulisan lain secara berasingan. Utamakan dimensi dan jarak logik, kemudian sahkan arah visual dan papan kekunci.
Langkah 6: Reka bentuk sandaran (fallback)
Tanpa sokongan, kekalkan penatalan mendatar asli. Jika butang eksplisit diperlukan, lapisan JavaScript kecil boleh memerhati kedudukan tatal dan mengemas kini disabled, item semasa dan keadaan aria. Kedua-dua laluan harus berkongsi data dan semantik kad daripada mengekalkan dua pepohon kandungan.
Langkah 7: Tetapkan kriteria keluaran
Uji pelayar yang menyokong dan tidak menyokong, papan kekunci, sentuhan, roda tetikus, zum 200%, kontras tinggi, pembaca skrin dan prefers-reduced-motion. Jejaki kad yang kelihatan pada paparan pertama (first paint), pengaktifan tidak sengaja, kehilangan fokus, kependaman tatal dan liputan sandaran; tangkapan skrin tidak dapat membuktikan bahawa kawalan boleh digunakan.
Jawapan model
Saya akan menganggap penatalan mendatar biasa dan semantik kad sebagai asas, kemudian melapiskan kawalan CSS Overflow 5 di atasnya. Pengesanan keupayaan mendayakan scroll-marker-group dan ::scroll-button() di mana tersedia; di tempat lain penatalan masih berfungsi, dengan sandaran JavaScript kecil hanya jika kawalan eksplisit diperlukan. Butang yang dijana tidak sekali-kali menggantikan pautan, fokus atau semantik pembaca skrin. Saya akan menguji RTL, penulisan menegak, keadaan tidak tersedia, fokus kelihatan, sentuhan dan pergerakan dikurangkan, kemudian menggunakan matriks pelayar dan teknologi bantuan sebenar untuk mengesahkan setiap kad kekal boleh dicapai.
Kesilapan lazim
- Kesilapan: Menganggap
::scroll-button()sebagai butang biasa yang tersedia di mana-mana. → Sebab ia gagal: Sokongan CSS Overflow 5 masih berkembang. → Penyelesaian: Kesan keupayaan dan kekalkan penatalan asli. - Kesilapan: Menyembunyikan bar tatal dan pautan kad, hanya meninggalkan titik penanda. → Sebab ia gagal: Pengguna papan kekunci dan teknologi bantuan boleh kehilangan laluan kandungan. → Penyelesaian: Jadikan semantik kad berfungsi secara bebas; penanda hanyalah navigasi tambahan.
- Kesilapan: Memetakan kiri/kanan fizikal secara terus kepada logik RTL. → Sebab ia gagal: Arah visual, mod penulisan dan arah logik boleh berbeza. → Penyelesaian: Uji butang, fokus dan hasil tatal secara berasingan dalam RTL dan penulisan menegak.
- Kesilapan: Menguji klik sahaja. → Sebab ia gagal: Kehilangan fokus, limpahan akibat zum dan isu pergerakan dikurangkan kekal tidak kelihatan. → Penyelesaian: Jadikan pemeriksaan papan kekunci, sentuhan, pembaca skrin dan zum 200% sebagai kriteria pelepasan.
Soalan susulan dan jawapan
Apakah sempadan antara ::scroll-button() dan butang biasa?
Ia dijana oleh bekas tatal dan terikat kepada konteks penatalan, yang menentukan gaya dan ketersediaannya. Tindakan khusus produk, analitik atau aliran pengesahan mungkin masih memerlukan butang sebenar atau JavaScript.
Mengapa mengekalkan penatalan asli?
Ia adalah laluan yang boleh digunakan apabila peningkatan tidak tersedia dan merangkumi sentuhan, roda tetikus serta keutamaan pengguna. Jika peningkatan gagal, pengguna masih boleh mencapai kandungan.
Bagaimanakah anda mengelakkan anjakan reka letak (layout shifts) daripada kawalan yang dijana?
Rizabkan ruang kawalan, gunakan dimensi bekas yang stabil dan penjarakan logik, serta bandingkan kiraan kad pada paparan pertama dan kedudukan snap merentasi cabang keupayaan.
Bilakah anda patut mengelakkan ciri ini?
Gunakan penatalan biasa dengan kawalan yang matang apabila pelayar sasaran tiada sokongan, keadaan karusel adalah kompleks atau pasukan tidak dapat mengekalkan sandaran yang boleh dipercayai. Mengurangkan JavaScript tidak berbaloi jika ia mengurangkan kebolehcapaian.