Web geliştiricilerin yıllardır karşılaştığı bir sorun var: Bir liste veya ızgaradaki öğeleri sırayla animasyonla göstermek (staggered cascade efekti). Bu efekti elde etmek için genellikle her bir öğeye ayrı ayrı :nth-child() kuralları yazmak veya JavaScript ile inline stiller eklemek gerekiyordu. Ancak bu yöntemler hem bakımı zor hem de ölçeklenebilirlik açısından sorunluydu. Örneğin, 10 öğeli bir liste için 10 farklı CSS kuralı yazmak, liste büyüdüğünde ise ya sınırlamak ya da Sass gibi araçlarla yüzlerce kural üretmek gerekiyordu. JavaScript yaklaşımı ise DOM'a bağımlılık yaratıyor ve altı ay sonra yapılan bir refactoring sırasında sessizce bozulabiliyordu.
CSS'in yeni sibling-index() ve sibling-count() fonksiyonları bu sorunu kökünden çözüyor. Bu fonksiyonlar, bir öğenin kardeşleri arasındaki sırasını (1'den başlayarak) ve toplam kardeş sayısını döndürüyor. Böylece tek bir satır CSS ile, örneğin bir listenin her öğesine artan gecikmelerle animasyon ekleyebilirsiniz: `animation-delay: calc(sibling-index() * 100ms);`. Bu kod 5 öğe için de 5.000 öğe için de aynı şekilde çalışır. Sadece element düğümlerini sayar, metin düğümleri veya yorumları yok sayar. Bu fonksiyonlar CSS Values and Units Module Level 5 spesifikasyonunun bir parçasıdır ve doğrudan calc(), min(), max(), hatta sin() ve cos() gibi trigonometrik fonksiyonlarla kullanılabilir.
Bu fonksiyonların en heyecan verici yanı, yaratıcı düzenler için sunduğu olanaklar. Örneğin, öğeleri tersten sıralamak için `animation-delay: calc((sibling-count() - sibling-index()) * 80ms);` kullanarak son öğenin ilk animasyonla başlamasını sağlayabilirsiniz. Otomatik eşit genişlikler için `width: calc(100% / sibling-count());` yazmanız yeterli; beş sekme %20, altı sekme %16.66 genişlik alır. Renkleri dağıtmak için HSL renk uzayında `background-color: hsl(calc((360deg / sibling-count()) * sibling-index()), 70%, 50%);` ile her öğeye farklı bir renk verebilirsiniz. Ayrıca, sin() ve cos() ile birleştirerek saf CSS ile dairesel menüler oluşturmak da mümkün: her öğe açısını otomatik hesaplar ve konumlandırır.
Peki bu fonksiyonlar :nth-child()'in yerini mi alıyor? Hayır, aslında farklı amaçlara hizmet ediyorlar. :nth-child() bir seçicidir ve belirli öğeleri seçer; sibling-index() ise bir değer üretir ve bildirimler içinde kullanılır. Daha önce :nth-child()'i değer üretmek için kullanmak zorunda kalıyorduk, bu da onu asıl amacının dışında kullanmak anlamına geliyordu. Şimdi ise doğru araçlara sahibiz. Bu fonksiyonlar henüz tüm tarayıcılarda tam desteklenmese de, modern web geliştirmede önemli bir adım. Artık tarayıcının zaten bildiği bir bilgiyi (bir öğenin kardeşleri arasındaki sırası) JavaScript veya karmaşık CSS kuralları olmadan kullanabiliyoruz. Bu, daha temiz, daha bakımı kolay ve daha performanslı kod anlamına geliyor.
