W przeszłości stosowanie unikalnych stylów do każdego elementu podrzędnego na liście wymagało złożonych pętli :nth-child lub kodu JavaScript do wstrzykiwania stylów wbudowanych. Nowoczesny CSS udostępnia funkcje sibling-index() i sibling-count(), które umożliwiają wykonywanie tych obliczeń bezpośrednio w arkuszu stylów, co pozwala na tworzenie dynamicznych układów i systemów kolorów, które automatycznie dostosowują się do dodawania lub usuwania elementów.
Systemy kolorów dynamicznych
Możesz utworzyć spektrum kolorów w grupie elementów równorzędnych, obliczając unikalną wartość odcienia lub jasności dla każdego elementu podrzędnego. Zapewnia to spójny efekt gradientu niezależnie od liczby elementów.
.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%
);
}
Symetryczny układ i efekty wachlarza
Aby uzyskać efekty symetryczne (np. „wachlarz” lub wyśrodkowanie elementów), użyj łącznej liczby, aby znaleźć środek listy.
.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))));
}
Pozycjonowanie cykliczne i złożone
Łącząc te funkcje z trygonometrią CSS (sin(), cos()), możesz umieszczać elementy w idealnym okręgu bez ręcznego wpisywania współrzędnych.
.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))
);
}
Strategie zastępcze
Jeśli właściwości sibling-index() i sibling-count() nie są obsługiwane, podaj właściwość zastępczą, wstrzykując właściwości niestandardowe CSS za pomocą JavaScriptu. OBOWIĄZKOWO: użyj wykrywania funkcji za pomocą CSS.supports(), aby skrypt był uruchamiany tylko wtedy, gdy jest to konieczne.
/* 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);
});
}
W kodzie CSS użyj tych zmiennych jako podstawy i zastąp je funkcjami natywnymi w bloku @supports. OBOWIĄZKOWO: MUSISZ opakować zastąpienia funkcji natywnych w @supports, aby zmienne pozostały prawidłowe w starszych przeglądarkach.
.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();
}
}