Gesaan dan konteks
Halaman ini mempunyai pautan ke bahagian artikel atau item karusel dan harus menyerlahkan sasaran semasa semasa menatal. CSS scroll-target-group boleh mengisytiharkan bekas navigasi sedia ada sebagai kumpulan penanda tatal, menyambungkan sasaran serpihan dengan kandungan yang kelihatan. Terangkan batasannya dengan IntersectionObserver, sauh tradisional dan scroll-marker-group, kemudian reka bentuk peningkatan progresif.
Perkara yang dinilai oleh penemu duga
Penemu duga mencari pautan sebenar yang berfungsi sebelum keadaan visual ditambah. Jawapan yang kukuh membezakan kedudukan tatal, kedudukan fokus dan penggayaan item semasa; mengendalikan sasaran pendua, kandungan dinamik, penatalan mendatar dan pengurangan pergerakan (reduced motion); serta menerangkan sandaran apabila sifat eksperimen tidak tersedia. Satu deklarasi CSS tidak membuktikan sistem navigasi yang boleh dikendalikan.
Soalan untuk dijelaskan sebelum menjawab
Apakah sasaran navigasi?
Sahkan sama ada setiap pautan menyasarkan ID bahagian yang stabil, kad karusel atau item senarai maya. Sasaran mesti boleh dialamatkan oleh pelayar dan mengekalkan maknanya apabila senarai disusun semula.
Bagaimanakah "semasa" (current) ditakrifkan?
Jelaskan sama ada ia bermaksud memasuki port pandang (viewport), melintasi ambang, menerima fokus atau menjadi item terakhir yang diklik. Keadaan tatal dan fokus boleh berbeza, jadi satu peraturan warna tidak boleh mewakili kedua-duanya.
Sokongan dan alternatif
Senaraikan pelayar sasaran, pembaca skrin dan keperluan papan kekunci. scroll-target-group adalah bersifat eksperimen; sauh tradisional dan sebarang logik pemerhatian yang diperlukan mesti masih berfungsi secara bebas.
Kerangka jawapan 30 saat
"Saya mula-mula menggunakan navigasi semantik dan sauh yang stabil untuk lompatan asas, kemudian mengisytiharkan bekas navigasi sebagai scroll-target-group supaya sasaran boleh menerima penggayaan semasa apabila ia memasuki port pandang. Penanda tatal tidak menguruskan fokus, jadi saya menguji susunan Tab, fokus selepas lompatan dan laluan kembali secara berasingan. Selepas kandungan dinamik mencipta sasaran, saya menyemak semula hubungan tersebut. Dalam pelayar yang tidak disokong, saya mengekalkan pautan biasa dan hanya menambah peningkatan IntersectionObserver yang diperlukan, kemudian menguji papan kekunci, pembaca skrin, penatalan mendatar dan tetapan reduced-motion dari hujung ke hujung."
Jawapan mendalam langkah demi langkah
Langkah 1: Cipta sauh yang stabil
Hasilkan ID yang unik dan boleh diramal untuk setiap bahagian atau item dan gunakan sasaran serpihan sebenar dalam pautan navigasi. Jangan hanya bergantung pada indeks tatasusunan kerana penapisan, penomboran halaman dan pemaparan bahagian pelayan boleh mengubahnya.
Langkah 2: Isytiharkan kumpulan penanda tatal
Dalam pelayar yang disokong, tetapkan scroll-target-group: auto pada bekas jadual kandungan atau kawalan karusel. Ini membolehkan pautan serpihan mengambil bahagian dalam hubungan penanda tatal, tetapi ia tidak mereka bentuk fokus atau semantik untuk anda.
Langkah 3: Asingkan penggayaan semasa dan fokus
Gunakan keadaan current-target atau yang setara untuk menyatakan kedudukan tatal, dan :focus-visible untuk menyatakan fokus papan kekunci. Apabila kedua-duanya hadir, kekalkan kontras, label yang mudah difahami dan peralihan yang terkawal.
Langkah 4: Kendalikan bekas dinamik dan berbilang
Selepas bahagian dimuatkan, karusel bergelung atau bekas tatal bersarang berubah, semak semula keunikan sasaran dan kestabilan item semasa. Jangan biarkan satu pautan ditafsirkan oleh berbilang bekas tatal; bahagikan kumpulan apabila perlu.
Langkah 5: Reka bentuk sandaran dan pengesahan
Apabila sifat tersebut tidak disokong, sauh biasa mesti masih boleh melompat. Tambahkan IntersectionObserver hanya sebagai peningkatan untuk petunjuk item semasa. Uji papan kekunci, pembaca skrin, butang kembali pelayar, zum, tatal mendatar dan prefers-reduced-motion.
Contoh jawapan berkualiti tinggi
Saya mula-mula akan menjana ID yang stabil untuk bahagian artikel dan menggunakan pautan jadual kandungan sebenar supaya lompatan berfungsi tanpa CSS. Jika pelayar sasaran menyokongnya, saya akan menetapkan scroll-target-group: auto pada bekas navigasi dan menyerlahkan sasaran semasa sambil memastikan fokus papan kekunci kelihatan dengan :focus-visible. Penanda tatal tidak memindahkan fokus ke dalam kandungan, jadi saya akan mengesahkan tingkah laku fokus dan laluan kembali selepas pengaktifan pautan yang disengajakan. Untuk pemuatan tak terhingga atau karusel, saya akan menyemak keunikan ID dan kestabilan item semasa setiap kali sasaran ditambah. Pelayar yang tidak disokong akan mengekalkan sauh dengan peningkatan pemerhati untuk status; saya akan menyelesaikannya dengan ujian tugas pada tetapan desktop, mudah alih, pembaca skrin dan reduced-motion.
Kesilapan lazim
- Kesilapan: Menyediakan keadaan CSS tanpa pautan sauh sebenar. → Sebab ia gagal: Pelayar yang tidak disokong dan teknologi bantuan kehilangan navigasi. → Penyelesaian: Bina pautan semantik yang berfungsi secara bebas.
- Kesilapan: Menganggap item yang kelihatan sebagai fokus papan kekunci. → Sebab ia gagal: Pengguna boleh memfokuskan navigasi tanpa menatal kandungan, jadi keadaan bercanggah. → Penyelesaian: Reka bentuk keadaan semasa dan
:focus-visiblesecara berasingan. - Kesilapan: Menjana ID sasaran daripada indeks tatasusunan. → Sebab ia gagal: Penapisan dan pemuatan bergelung menghasilkan pendua atau hanyutan (drift). → Penyelesaian: Gunakan pengecam perniagaan yang stabil dan semak keunikan selepas kemas kini.
- Kesilapan: Mengeluarkan sifat eksperimen sebagai keperluan mandatori. → Sebab ia gagal: Sokongan pelayar dan tingkah laku tatal bersarang berbeza-beza. → Penyelesaian: Kekalkan sauh, tingkatkan mengikut keupayaan dan pantau penyiapan tugas.
Soalan susulan dan respons
Susulan 1: Mengapa tidak menggunakan IntersectionObserver sahaja?
Observer berguna untuk sokongan pelayar sedia ada atau ambang perniagaan yang kompleks; scroll-target-group boleh mengurangkan kod keadaan ini. Ia boleh dilapisi: kekalkan pautan dan fokus terlebih dahulu, kemudian bandingkan kos penyelenggaraan.
Susulan 2: Bolehkah karusel mendatar dan jadual kandungan menegak berkongsi satu kumpulan?
Biasanya tidak. Paksi tatal, keterlihatan sasaran dan model papan kekunci mereka berbeza, jadi makna satu item semasa menjadi kabur. Bahagikan kumpulan mengikut bekas tatal dan labelkannya secara berasingan.
Susulan 3: Patutkah fokus beralih secara automatik apabila bahagian semasa berubah?
Jangan alihkan fokus untuk penatalan pasif kerana ia mengganggu pengguna papan kekunci. Alihkan fokus hanya selepas pengaktifan navigasi yang disengajakan, mengikut kontrak komponen, dan berikan hasil yang jelas kepada pembaca skrin.
Susulan 4: Bagaimanakah anda mengendalikan reduced motion?
Kurangkan atau alih keluar penatalan lancar dan peralihan penanda sambil mengekalkan keadaan semasa yang jelas dan penunjuk fokus. Navigasi mesti kekal boleh difahami tanpa animasi.