CSS'de Devrim: sibling-index() ve sibling-count() ile Matematiksel Layoutlar

CSS dünyasında uzun zamandır ihtiyaç duyulan iki yeni fonksiyon, sibling-index() ve sibling-count(), artık kullanıma hazır. Bu fonksiyonlar sayesinde bir elemanın kardeşleri arasındaki sırasını ve toplam kardeş sayısını CSS içinde doğrudan kullanabiliyoruz. Örneğin, bir listedeki her elemana sırasına göre farklı gecikme süreleri vermek için artık :nth-child() ile tek tek kural yazmak veya JavaScript ile style enjekte etmek zorunda değiliz. Tek bir satırla: animation-delay: calc(sibling-index() * 100ms); işlemi 5 eleman için de 5000 eleman için de aynı şekilde çalışır.

Bu fonksiyonlar CSS Values and Units Module Level 5 spesifikasyonunun bir parçasıdır ve CSSWG issue #4559 ile onaylanmıştır. sibling-index() 1-tabanlı sıra numarasını döndürürken, sibling-count() toplam eleman sayısını verir. Her ikisi de tipinde değer ürettiği için calc(), min(), max(), sin(), cos() gibi matematiksel fonksiyonlarla rahatça kullanılabilir. :nth-child()'ten farklı olarak bu fonksiyonlar seçici değil, değer üreten yapılar olduğu için doğrudan hesaplamalarda kullanılabilir.

Pratik kullanım örnekleri oldukça çeşitlidir. Örneğin, ters staggered efekt için animation-delay: calc((sibling-count() - sibling-index()) * 80ms); yazarak son elemanın önce animasyona girmesini sağlayabilirsiniz. Otomatik eşit genişlikler için width: calc(100% / sibling-count()); kullanarak eleman sayısına göre dinamik genişlik ayarlayabilirsiniz. Renk dağılımında ise background-color: hsl(calc((360deg / sibling-count()) * sibling-index()), 70%, 50%); ile eleman sayısına göre otomatik olarak renk tekerleğinde eşit aralıklarla dağılım yapabilirsiniz.

Uzmanların Görüşleri

Dairesel menüler gibi daha karmaşık layoutlarda da bu fonksiyonlar büyük kolaylık sağlar. Açıyı hesaplamak için --angle: calc((360deg / sibling-count()) * sibling-index()); kullanarak her elemanın konumunu trigonometrik fonksiyonlarla belirleyebilirsiniz. Ayrıca z-index yığınlama, grid yerleşimi gibi birçok alanda da kullanılabilir. Bu fonksiyonlar, geliştiricilerin tarayıcının zaten bildiği bilgilere erişmesini sağlayarak daha temiz, bakımı kolay ve dinamik CSS yazılmasına olanak tanır.