Temu duga frontend: Bagaimanakah anda akan menggunakan CSS sibling-index() dan sibling-count()?

Kehendak soalan dan skop

Satu senarai kad responsif ditambah dan dipadam oleh CMS. Setiap kad perlu mengira lebarnya daripada bilangan sibling dan melengahkan animasi mengikut kedudukannya, sambil mengekalkan kedudukan kebolehcapaian yang sebenar. Terangkan semantik, batasan, fallback, dan pengesahan untuk sibling-index() dan sibling-count().

Perkara yang diuji oleh penemu duga

• Sama ada anda tahu kedua-dua fungsi mengembalikan integer, dengan indeks berasaskan 1, merentasi flat tree.
• Sama ada anda memisahkan susunan visual CSS daripada susunan DOM dan teknologi bantuan.
• Sama ada anda mengambil kira Limited availability, @supports, fallback statik, dan prestasi.
• Sama ada anda merangkumi Shadow DOM, elemen pseudo, nod tersembunyi, dan senarai dinamik.

Soalan penjelasan yang perlu ditanya

1. Adakah matlamatnya lebar visual, masa animasi, atau kedudukan yang mesti didengari oleh pengguna? Fallback masing-masing adalah berbeza.
2. Adakah nod tersembunyi, templat, atau tervirtual wujud, dan adakah ia merupakan anak langsung dalam flat-tree?
3. Apakah julat sokongan pelayar dan dasar fallback JavaScript yang terpakai?
4. Adakah Shadow DOM, slot, atau pembilang CSS terlibat?

Kerangka jawapan 30 saat

sibling-count() mengembalikan jumlah bilangan anak langsung dan sibling-index() mengembalikan kedudukan berasaskan 1 bagi elemen; spesifikasi ini menggunakan flat tree. Ia boleh memacu calc(), lebar grid, atau lengahan animasi, tetapi ia bukan sumber teks boleh capai yang boleh dipercayai. Sediakan fallback CSS tetap terlebih dahulu, kemudian tingkatkan dengan @supports; gunakan HTML semantik atau pembilang yang telah diuji untuk kedudukan. Uji penambahan, pemadaman, slot, nod tersembunyi, pelayar yang tidak disokong, dan prefers-reduced-motion.

Huraian mendalam langkah demi langkah

1. Sahkan nilai yang dikembalikan

Kedua-dua fungsi mengembalikan integer. sibling-count() merangkumi elemen itu sendiri, dan sibling-index() bermula pada 1. Ia mengira anak langsung induk dalam flat tree; keturunan sebarangan dan susunan visual adalah konsep yang berbeza.

2. Gunakannya untuk saiz dan animasi

Kad boleh membahagikan lebar yang tersedia dengan bilangan sibling, dan lengahan animasi boleh meningkat mengikut kedudukan:

.card {
  --count: sibling-count();
  --index: sibling-index();
  flex-basis: calc(100% / var(--count));
  animation-delay: calc((var(--index) - 1) * 60ms);
}

Ini ialah pengiraan visual, bukan pengganti untuk susunan DOM atau pengecam perniagaan. Tentukan had untuk senarai kosong, satu item, dan bilangan yang sangat besar bagi mengelakkan pembahagian atau lengahan yang berlebihan.

3. Kendalikan sokongan dan fallback

MDN menandakan fungsi-fungsi ini sebagai Limited availability, jadi CSS pengeluaran tidak boleh menganggap sokongan tersedia. Sediakan reka letak tetap atau flex, kemudian tingkatkan dengan @supports (width: calc(100% / sibling-count())). JavaScript boleh mengemas kini custom properties apabila keperluan produk sebenar memerlukan nilai dinamik, tetapi first paint dan kandungan mesti berfungsi tanpanya.

4. Flat tree, slot, dan nod tersembunyi

Spesifikasi mentakrifkan hubungan sibling merentasi flat tree; oleh itu, penetapan slot Shadow DOM mengubah perkara yang mesti diuji. Sahkan sama ada display: none, nod templat, dan pemegang tempat senarai maya ialah anak langsung menggunakan DOM sebenar. Jangan buat inferens indeks fungsi daripada order visual.

5. Kebolehcapaian dan semantik

Lebar visual dan lengahan tidak menghasilkan kedudukan yang boleh didengari. Gunakan ol dan li, atau aria-posinset dan aria-setsize yang eksplisit, dan pastikan susunan pembaca skrin sejajar dengan DOM. CSS hiasan tidak boleh menjadikan kandungan tidak dapat difahami apabila animasi atau fungsi baharu dilumpuhkan.

6. Kemas kini dinamik dan prestasi

Penambahan dan pemadaman sibling mengubah nilai yang dikira dan boleh mencetuskan pengiraan semula gaya (style recalculation). Ukur kos gaya, reka letak, dan animasi untuk beribu-ribu nod dan bukannya mempercayai demo kecil semata-mata. Senarai maya mengehadkan saiz DOM, tetapi fungsi-fungsi tersebut kemudiannya hanya melihat tetingkap paparan, bukan keseluruhan set data.

Contoh jawapan berkualiti tinggi

Saya akan menganggap sibling-index() dan sibling-count() sebagai ciri pengiraan visual: yang pertama ialah kedudukan flat-tree berasaskan 1 dan yang kedua ialah bilangan anak langsung. Ia boleh meningkatkan lebar kad dan lengahan animasi, manakala kedudukan semantik diperoleh daripada ol, li, atau ARIA. Sediakan fallback reka letak tetap dan kawal peningkatan ciri dengan @supports. Uji tingkah laku DOM sebenar untuk Shadow DOM, slot, nod tersembunyi, dan pemayaan (virtualization). Ukur pengiraan semula gaya dan reka letak untuk senarai yang dinamik dan besar; pastikan kandungan kekal boleh digunakan tanpa sokongan ciri ini dan hormati prefers-reduced-motion.

Kesilapan lazim

• Menganggap sokongan universal → pelayar legasi kehilangan gaya → sediakan reka letak tetap dan fallback @supports.
• Membuat inferens indeks daripada order visual → susunan CSS berbeza daripada susunan flat-tree → uji DOM dan penetapan slot.
• Menggunakan pengiraan CSS sebagai kedudukan boleh capai → pembaca skrin tidak menerima kedudukan → kekalkan semantik HTML atau ARIA.
• Menganggap tetingkap maya sebagai bilangan penuh → fungsi hanya melihat DOM semasa → sediakan jumlah bilangan daripada data.
• Membiarkan lengahan animasi meningkat tanpa had → masa menunggu dan pengiraan semula menjadi mahal → hadkannya dan lumpuhkan untuk reduced motion.

Soalan susulan dan jawapan

Adakah sibling-count() merangkumi keturunan (descendants)?

Tidak. Ia mengira anak langsung induk dan merangkumi elemen semasa; keturunan seterusnya tidak terlibat.

Bagaimanakah elemen yang berada dalam slot (slotted) harus diuji?

Periksa Shadow DOM light tree, flat tree selepas penetapan slot, dan accessibility tree. Pengesahan pada peringkat pelayar adalah lebih boleh dipercayai berbanding melihat susunan kod sumber sahaja.

Bolehkah JavaScript menjadi satu-satunya fallback untuk pelayar yang tidak disokong?

Ia boleh menjadi peningkatan progresif (progressive enhancement), tetapi reka letak asas dan kandungan mesti berfungsi tanpa skrip. Skrip yang mengemas kini custom properties juga perlu mengendalikan penambahan, SSR, keadaan tanpa skrip (no-script), dan reduced-motion.