Menata gaya elemen seinduk berdasarkan jumlah dan indeks

Fitur web: sibling-count() dan sibling-index() Fungsi trigonometri (CSS)

Secara historis, menerapkan gaya unik ke setiap elemen seinduk dalam daftar memerlukan loop :nth-child yang kompleks atau JavaScript untuk memasukkan gaya inline. CSS modern menyediakan sibling-index() dan sibling-count() untuk melakukan penghitungan ini langsung di stylesheet Anda, sehingga memungkinkan tata letak dan sistem warna dinamis yang otomatis beradaptasi saat elemen ditambahkan atau dihapus.

Sistem warna dinamis

Anda dapat membuat spektrum warna di seluruh grup elemen seinduk dengan menghitung hue atau nilai kecerahan yang unik untuk setiap elemen turunan. Hal ini memastikan efek gradien yang konsisten, berapa pun jumlah itemnya.

.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%
  );
}

Tata letak simetris dan efek kipas

Untuk membuat efek simetris (seperti "kipas" atau item di tengah), gunakan jumlah total untuk menemukan titik tengah daftar.

.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))));
}

Pemosisian melingkar dan kompleks

Dengan menggabungkan fungsi ini dengan trigonometri CSS (sin(), cos()), Anda dapat menempatkan elemen dalam lingkaran sempurna tanpa koordinat manual.

.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))
  );
}

Strategi penggantian

Jika sibling-index() dan sibling-count() tidak didukung, berikan penggantian dengan memasukkan properti kustom CSS melalui JavaScript. WAJIB: Gunakan deteksi fitur dengan CSS.supports() untuk memastikan skrip hanya berjalan saat diperlukan.

/* 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);
  });
}

Dalam CSS Anda, gunakan variabel ini sebagai dasar dan ganti dengan fungsi native di dalam blok @supports. WAJIB: Anda HARUS menggabungkan penggantian fungsi native dalam @supports untuk memastikan variabel tetap valid di browser lama.

.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();
  }
}