CSS dünyasında uzun zamandır beklenen bir yenilik nihayet geldi: `sibling-index()` ve `sibling-count()` fonksiyonları. Bu iki yeni araç, web geliştiricilerine DOM ağacındaki kardeş öğeler arasında gezinme ve sayma yeteneği kazandırarak, daha önce JavaScript veya karmaşık CSS seçiciler gerektiren birçok düzeni tek satırlık CSS ile çözme imkanı sunuyor. Bu makalede, bu fonksiyonların ne olduğunu, nasıl çalıştıklarını ve pratikte hangi senaryolarda kullanılabileceğini derinlemesine inceleyeceğiz.
`sibling-index()`, bir öğenin ebeveyninin çocukları arasındaki 1 tabanlı konumunu döndürür. Yani ilk çocuk 1, beşinci çocuk 5 değerini alır. `sibling-count()` ise ebeveynin toplam çocuk öğe sayısını verir. Her iki fonksiyon da `` türünde değer döndürür, bu da onları `calc()`, `min()`, `max()`, `round()`, `mod()`, hatta `sin()` ve `cos()` gibi trigonometrik fonksiyonlarla kullanılabilecek sayısal değerler haline getirir. Örneğin, `calc(sibling-index() * 100ms)` ifadesi geçerli bir `
Bu fonksiyonların en heyecan verici yanı, daha önce `:nth-child()` ile yapılan işleri çok daha basit hale getirmesidir. `:nth-child()` bir seçicidir; öğeleri seçer ancak bir değer üretmez. Oysa `sibling-index()` ve `sibling-count()`, bildirimler içinde kullanılarak hesaplama yapmanıza olanak tanır. Örneğin, bir liste öğelerine kademeli animasyon gecikmesi eklemek istediğinizde, artık her öğe için ayrı bir `:nth-child()` kuralı yazmanıza veya JavaScript ile inline stiller enjekte etmenize gerek kalmaz. Tek satırlık CSS yeterlidir: `li { animation-delay: calc(sibling-index() * 100ms); }`. Bu kod, 5 öğe için de 5000 öğe için de aynı şekilde çalışır.
Sonuç ve Değerlendirme
Bu fonksiyonların kullanım alanları oldukça geniştir. Örneğin, ters kademeli animasyon (reverse stagger) için `animation-delay: calc((sibling-count() - sibling-index()) * 80ms);` yazabilirsiniz. Bu sayede son öğe önce, ilk öğe en son animasyona başlar. Otomatik eşit genişlikler için `width: calc(100% / sibling-count());` kullanarak bir tab menüsündeki sekmelerin genişliğini dinamik olarak ayarlayabilirsiniz. Beş sekme varsa %20, altı sekme varsa %16.66 gibi. Renk dağılımı için `hsl(calc((360deg / sibling-count()) * sibling-index()) 70% 50%)` ile renk çarkında eşit aralıklarla renkler atayabilirsiniz. Dairesel menüler için ise `sin()` ve `cos()` ile birlikte kullanarak öğeleri bir daire etrafında konumlandırabilirsiniz.
Nasıl Önlem Alınmalı?
Bir diğer pratik kullanım alanı ise `z-index` yönetimidir. Aynı ebeveyn altındaki öğeleri üst üste bindirmek istediğinizde, her öğeye elle `z-index` değeri vermek yerine `z-index: sibling-index();` yazabilirsiniz. Bu, özellikle dinamik olarak eklenip çıkarılan öğelerin olduğu durumlarda büyük kolaylık sağlar. Ayrıca, `sibling-count()` ile öğe sayısına göre farklı stiller uygulamak da mümkündür. Örneğin, tek bir öğe varsa farklı bir düzen, çok sayıda öğe varsa kaydırma çubuğu eklemek gibi.
Sonuç olarak, `sibling-index()` ve `sibling-count()` fonksiyonları, CSS'in yeteneklerini önemli ölçüde genişleten ve geliştiricilere daha önce hayal bile edemedikleri bir esneklik sunan araçlardır. Bu fonksiyonlar sayesinde, daha temiz, daha bakımı kolay ve JavaScript bağımlılığı olmayan kodlar yazmak mümkün hale geliyor. Henüz tüm tarayıcılarda tam olarak desteklenmese de, modern web geliştirme süreçlerinde yerini almaya başlamıştır. Bu yenilikleri projelerinizde denemek, size hem zaman kazandıracak hem de daha yaratıcı çözümler üretmenize olanak tanıyacaktır.
Kaynak: smashingmagazine.com
