Geçmişte, bir listedeki her kardeşe benzersiz stiller uygulamak için karmaşık :nth-child döngüleri veya satır içi stiller eklemek için JavaScript kullanılması gerekiyordu. Modern CSS, bu hesaplamaları doğrudan stil sayfanızda gerçekleştirmek için sibling-index() ve sibling-count() işlevlerini sunar. Böylece, öğeler eklendikçe veya kaldırıldıkça otomatik olarak uyum sağlayan dinamik düzenler ve renk sistemleri oluşturabilirsiniz.
Dinamik renk sistemleri
Her alt öğe için benzersiz bir ton veya açıklık değeri hesaplayarak bir kardeş öğe grubu genelinde renk spektrumu oluşturabilirsiniz. Bu sayede, öğe sayısından bağımsız olarak tutarlı bir gradyan efekti elde edilir.
.swatch {
/* Calculate hue by dividing the full 360deg circle by total siblings */
/* and multiplying by the current element's 1-based index */
background-color: hsl(
calc(360deg / sibling-count() * sibling-index()),
70%,
50%
);
}
Simetrik düzen ve yelpaze efektleri
Simetrik efektler (ör. "yelpaze" veya öğeleri ortalama) oluşturmak için toplam sayıyı kullanarak listenin orta noktasını bulun.
.card {
/* Find the center index (e.g., 3 if there are 5 siblings) */
--center: calc((sibling-count() + 1) / 2);
/* Rotate items away from the center: negative for left, positive for right */
/* center element gets 0deg rotation */
transform: rotate(calc(10deg * (sibling-index() - var(--center))));
}
Dairesel ve karmaşık konumlandırma
Bu işlevleri CSS trigonometrisi (sin(), cos()) ile birleştirerek öğeleri manuel koordinatlar olmadan mükemmel bir daireye yerleştirebilirsiniz.
.orb {
/* Calculate the angle for this item's position on a 360deg circle */
--angle: calc(360deg / sibling-count() * sibling-index());
--radius: 150px;
/* Set the pre-transformed position for all items to be centered */
position: absolute;
place-self: center;
/* Position each element around the parent center */
transform: translate(
calc(cos(var(--angle)) * var(--radius)),
calc(sin(var(--angle)) * var(--radius))
);
}
Yedek stratejiler
sibling-index() ve sibling-count() desteklenmiyorsa JavaScript aracılığıyla CSS özel özellikleri ekleyerek bir yedek sağlayın. ZORUNLU: Komut dosyasının yalnızca gerektiğinde çalışmasını sağlamak için CSS.supports() ile özellik algılamayı kullanın.
/* MANDATORY: Check for native support before applying fallback */
if (!CSS.supports('top: calc(sibling-index() * 1px)')) {
const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
/* MANDATORY: Injected index must be 1-based to match native function */
item.style.setProperty('--sibling-index', index + 1);
item.style.setProperty('--sibling-count', items.length);
});
}
CSS'nizde bu değişkenleri temel olarak kullanın ve bir @supports bloğundaki yerel işlevlerle geçersiz kılın. ZORUNLU: Değişkenlerin eski tarayıcılarda geçerli kalmasını sağlamak için yerel işlev geçersiz kılmalarını @supports içine sarmalamanız GEREKİR.
.item {
/* 1. Set base values using variables (from JS fallback) */
--index: var(--sibling-index);
--count: var(--sibling-count);
/* 2. Use the computed variables - replace this with your implementation-specific styles */
background-color: hsl(calc(360deg / var(--count) * var(--index)), 70%, 50%);
}
@supports (top: calc(sibling-index() * 1px)) {
.item {
/* 3. Override with native functions ONLY if supported */
--index: sibling-index();
--count: sibling-count();
}
}