Wawancara frontend: Bagaimana Anda akan menggunakan CSS sibling-index() dan sibling-count()?

Konteks dan cakupan

Daftar kartu yang responsif ditambahkan dan dihapus oleh CMS. Setiap kartu harus menghitung lebarnya dari jumlah saudara (sibling count) dan menunda animasinya berdasarkan posisinya, sambil tetap mempertahankan posisi aksesibel yang nyata. Jelaskan semantik, batasan, fallback, dan verifikasi untuk sibling-index() dan sibling-count().

Hal yang diuji oleh pewawancara

• Apakah Anda mengetahui bahwa kedua fungsi mengembalikan bilangan bulat (integer), dengan indeks berbasis 1 (1-based), di atas flat tree.
• Apakah Anda memisahkan urutan visual CSS dari urutan DOM dan teknologi asistif.
• Apakah Anda memperhitungkan Limited availability, @supports, static fallback, dan performa.
• Apakah Anda mencakup Shadow DOM, pseudo-element, node tersembunyi, dan daftar dinamis.

Pertanyaan klarifikasi yang perlu diajukan

1. Apakah tujuannya adalah lebar visual, waktu animasi, atau posisi yang harus didengar pengguna? Masing-masing memiliki fallback yang berbeda.
2. Apakah ada node yang tersembunyi, template, atau divirtualisasi, dan apakah node tersebut merupakan anak langsung dari flat-tree?
3. Cakupan dukungan browser dan kebijakan fallback JavaScript apa yang berlaku?
4. Apakah Shadow DOM, slot, atau CSS counter terlibat?

Kerangka jawaban 30 detik

sibling-count() mengembalikan jumlah total anak langsung dan sibling-index() mengembalikan posisi elemen berbasis 1; spesifikasi menggunakan flat tree. Keduanya dapat menggerakkan calc(), lebar grid, atau delay animasi, tetapi keduanya bukan sumber teks aksesibel yang dapat diandalkan. Luncurkan fallback CSS tetap terlebih dahulu, lalu tingkatkan dengan @supports; gunakan HTML semantik atau counter yang telah diuji untuk penentuan posisi. Uji penyisipan, penghapusan, slot, node tersembunyi, browser yang tidak didukung, dan prefers-reduced-motion.

Pembahasan mendalam langkah demi langkah

1. Konfirmasikan nilai yang dikembalikan

Kedua fungsi mengembalikan integer. sibling-count() menyertakan elemen itu sendiri, dan sibling-index() dimulai dari 1. Keduanya menghitung anak langsung dari induk pada flat tree; keturunan arbitrer dan urutan visual adalah konsep yang berbeda.

2. Gunakan untuk ukuran dan animasi

Kartu dapat membagi lebar yang tersedia dengan jumlah saudara, dan delay animasi dapat bertambah sesuai posisi:

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

Ini adalah perhitungan visual, bukan pengganti urutan DOM atau identifier bisnis. Tentukan batas untuk daftar kosong, satu item, dan jumlah yang sangat besar untuk menghindari pembagian dengan nol atau delay yang berlebihan.

3. Tangani dukungan dan fallback

MDN menandai fungsi-fungsi ini sebagai Limited availability, sehingga CSS produksi tidak dapat mengasumsikan dukungan penuh. Sediakan tata letak tetap atau flex, lalu tingkatkan dengan @supports (width: calc(100% / sibling-count())). JavaScript dapat memperbarui custom properties ketika ada kebutuhan produk nyata yang memerlukan nilai dinamis, tetapi first paint dan konten harus tetap berfungsi tanpanya.

4. Flat tree, slot, dan node tersembunyi

Spesifikasi mendefinisikan hubungan saudara di atas flat tree; oleh karena itu, penetapan slot Shadow DOM mengubah hal yang harus diuji. Verifikasi apakah display: none, node template, dan placeholder daftar virtual merupakan anak langsung menggunakan DOM sebenarnya. Jangan menyimpulkan indeks fungsi dari order visual.

5. Aksesibilitas dan semantik

Lebar visual dan delay tidak menciptakan posisi yang dapat didengar. Gunakan ol dan li, atau aria-posinset dan aria-setsize secara eksplisit, dan jaga agar urutan pembaca layar (screen reader) tetap selaras dengan DOM. CSS dekoratif tidak boleh membuat konten menjadi tidak dapat dipahami saat animasi atau fungsi-fungsi baru dinonaktifkan.

6. Pembaruan dinamis dan performa

Penyisipan dan penghapusan saudara mengubah nilai terhitung dan dapat memicu penghitungan ulang gaya (style recalculation). Ukur biaya style, tata letak, dan animasi untuk ribuan node alih-alih hanya mengandalkan demo kecil. Daftar yang divirtualisasi membatasi ukuran DOM, tetapi fungsi-fungsi tersebut kemudian hanya melihat viewport/jendela tampilan, bukan total dataset.

Model jawaban berkualitas tinggi

Saya akan memperlakukan sibling-index() dan sibling-count() sebagai fitur kalkulasi visual: yang pertama adalah posisi flat-tree berbasis 1 dan yang kedua adalah jumlah anak langsung. Keduanya dapat meningkatkan lebar kartu dan delay animasi, sementara posisi semantik berasal dari ol, li, atau ARIA. Luncurkan fallback tata letak tetap dan batasi peningkatan fitur dengan @supports. Uji perilaku DOM nyata untuk Shadow DOM, slot, node tersembunyi, dan virtualisasi. Ukur style recalculation dan layout untuk daftar yang dinamis dan besar; jaga agar konten tetap dapat digunakan tanpa dukungan fungsi ini dan hormati prefers-reduced-motion.

Kesalahan umum

• Mengasumsikan dukungan universal → browser lawas kehilangan gaya → sediakan tata letak tetap dan fallback @supports.
• Menyimpulkan indeks dari order visual → urutan CSS berbeda dari urutan flat-tree → uji DOM dan penetapan slot.
• Menggunakan kalkulasi CSS sebagai posisi aksesibel → pembaca layar tidak mendapatkan posisi → pertahankan semantik HTML atau ARIA.
• Memperlakukan jendela virtual sebagai jumlah total → fungsi hanya melihat DOM saat ini → sediakan jumlah total dari data.
• Membiarkan delay animasi bertambah tanpa batas → waktu tunggu dan penghitungan ulang menjadi mahal → batasi nilainya dan nonaktifkan untuk reduced motion.

Pertanyaan lanjutan dan jawabannya

Apakah sibling-count() menyertakan keturunan (descendants)?

Tidak. Fungsi ini menghitung anak langsung dari induk dan menyertakan elemen saat ini; keturunan lebih dalam tidak ikut dihitung.

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

Periksa Shadow DOM light tree, flat tree setelah penetapan slot, dan accessibility tree. Verifikasi tingkat browser lebih dapat diandalkan daripada hanya melihat urutan kode sumber.

Bisakah JavaScript menjadi satu-satunya fallback untuk browser yang tidak didukung?

Ini bisa menjadi progressive enhancement, tetapi tata letak dasar dan konten harus tetap berfungsi tanpa skrip. Skrip yang memperbarui custom properties juga perlu menangani penyisipan, SSR, kondisi tanpa skrip (no-script), dan reduced-motion.