CSS dünyasında uzun zamandır beklenen iki yeni fonksiyon, sibling-index() ve sibling-count(), nihayet hayatımıza girdi. Bu fonksiyonlar, bir öğenin kardeşleri arasındaki konumunu ve toplam kardeş sayısını doğrudan CSS içinde almamızı sağlıyor. Eskiden bu bilgiyi almak için ya her bir öğeye ayrı ayrı :nth-child() kuralları yazmak ya da JavaScript ile DOM'u tarayıp CSS değişkeni atamak gerekiyordu. Şimdi ise tek bir satır kodla, örneğin bir listedeki öğelerin sıralı animasyon gecikmesini ayarlamak çocuk oyuncağı: `animation-delay: calc(sibling-index() * 100ms);`. Bu, hem geliştirici deneyimini iyileştiriyor hem de daha temiz ve bakımı kolay bir kod yapısı sunuyor.
sibling-index() fonksiyonu, bir öğenin ebeveyninin çocukları arasındaki 1-tabanlı sırasını döndürür. İlk çocuk 1, beşinci çocuk 5 değerini alır. sibling-count() ise ebeveynin toplam eleman çocuk sayısını verir. Her iki fonksiyon datüründe değer üretir, yani doğrudan calc(), min(), max(), sin(), cos() gibi matematiksel fonksiyonlarla kullanılabilir. Bu, onları yalnızca pseudo-elemanlarda ve content özelliğinde kullanılabilen counter() fonksiyonundan ayıran en önemli özelliktir. Artık bir öğenin genişliğini kardeş sayısına göre otomatik ayarlamak (`width: calc(100% / sibling-count())`) veya renkleri eşit aralıklarla dağıtmak (`background-color: hsl(calc(360deg / sibling-count() * sibling-index()), 70%, 50%)`) mümkün.
Bu fonksiyonların en heyecan verici yanı, yaratıcı düzenler için sunduğu olanaklar. Örneğin, bir döner menüde öğeleri eşit açılarla yerleştirmek için CSS'deki sin() ve cos() fonksiyonlarıyla birlikte kullanılabilir. `--angle: calc((360deg / sibling-count()) * sibling-index())` formülüyle her öğeye dinamik bir açı atanır ve ardından trigonometrik hesaplamalarla konumlandırılır. Bu sayede 6 öğeli bir menü altıgen, 8 öğeli bir menü sekizgen şeklini alır. JavaScript ile koordinat hesaplamaya gerek kalmaz. Ayrıca, z-index yığınlama, ters sıralı animasyonlar veya flex-wrap ile birlikte otomatik satır sayısı belirleme gibi pek çok kullanım senaryosu mevcut.
sibling-index() ve sibling-count() CSS Values and Units Module Level 5 spesifikasyonunun bir parçasıdır ve CSSWG tartışmaları sonucu kabul edilmiştir. Henüz tüm tarayıcılarda tam desteklenmese de, modern tarayıcıların güncel sürümlerinde çalışmaktadır. Bu fonksiyonlar, CSS'in yeteneklerini önemli ölçüde genişleterek, daha önce JavaScript veya derleme zamanı araçları gerektiren birçok durumu saf CSS ile çözmemize olanak tanıyor. Özellikle dinamik liste uzunluklarına sahip bileşenlerde, kodun hem daha okunabilir hem de daha sürdürülebilir olmasını sağlıyor. Web geliştiricilerinin bu yeni araçları keşfetmesi ve projelerinde kullanması, daha akıllı ve esnek arayüzlerin önünü açacak.
