1. Fungsi sibling-index() dan sibling-count() – Manipulasi Elemen Berdasarkan Posisi

Salah satu fitur paling menarik yang kini tersedia di Chrome dan Safari stable adalah fungsi sibling-index() dan sibling-count(). Fungsi-fungsi ini memungkinkan kita menggunakan posisi relatif sebuah elemen terhadap saudara kandungnya (siblings) sebagai nilai dalam kalkulasi CSS.

Apa itu sibling-index() dan sibling-count()?

sibling-index() mengembalikan posisi indeks elemen relatif terhadap elemen sibling lainnya dalam container yang sama. Sementara sibling-count() mengembalikan jumlah total sibling dalam container tersebut.

Implementasi Praktis: Animasi Stagger

Salah satu penggunaan paling populer adalah untuk membuat efek animasi stagger (berurutan) tanpa perlu JavaScript. Contohnya, kita bisa memberikan delay yang berbeda untuk setiap item list berdasarkan urutannya:

li {
  transition: opacity .3s ease;
  transition-delay: calc((sibling-index() - 1) * 100ms);
}

Dengan kode di atas, item pertama akan langsung muncul (delay 0ms), item kedua akan muncul 100ms kemudian, item ketiga 200ms kemudian, dan seterusnya. Pengurangan 1 pada formula memastikan elemen pertama dimulai tanpa delay.

Kombinasi dengan @starting-style

Untuk membuat efek entrance yang lebih dramatis, kita bisa mengombinasikan dengan @starting-style:

li {
  transition: opacity .3s ease;
  transition-delay: calc((sibling-index() - 1) * 100ms);
  
  @starting-style {
    opacity: 0;
  }
}

Fitur ini membuka banyak kemungkinan kreatif seperti rotasi hue warna berdasarkan posisi, penomoran otomatis elemen, dan berbagai efek visual menarik lainnya tanpa perlu JavaScript tambahan.

2. Container Query dengan scroll-state() – Kontrol Layout Berdasarkan Status Scroll

Container queries dengan scroll-state() adalah game-changer dalam responsive design. Fitur ini memungkinkan kita untuk menerapkan style berdasarkan kondisi scroll dari sebuah container, bukan hanya ukuran viewport seperti media queries tradisional.

Persiapan: Mendefinisikan Container

Sebelum menggunakan scroll-state queries, kita perlu mendefinisikan elemen sebagai container dengan tipe scroll-state:

.container {
  container-type: scroll-state;
}

Penting: Sebuah elemen tidak bisa query dirinya sendiri, tapi child elements-nya bisa. Namun, pseudo-elements dari elemen tersebut dapat melakukan query terhadap elemen induknya.

A. Status “stuck” – Deteksi Sticky Elements

Fitur ini sempurna untuk mendeteksi kapan elemen dengan position: sticky sedang dalam keadaan “menempel”:

@container scroll-state(stuck) {
  .navbar-inner {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
  }
}

Dengan cara ini, kita bisa memberikan visual feedback seperti shadow atau backdrop blur ketika navbar menempel di bagian atas, membantu user memahami bahwa navbar sedang overlay konten yang di-scroll.

B. Status “snapped” – Kontrol Scroll Snap

Untuk carousel atau slider dengan scroll-snap, kita bisa mendeteksi item mana yang sedang aktif:

/* Ketika parent elemen sedang snapped */
@container scroll-state(snapped) {
  .slide {
    scale: 1.1;
    z-index: 10;
  }
}

/* Ketika TIDAK snapped */
@container not scroll-state(snapped) {
  .slide figcaption {
    translate: 0 100%;
    opacity: 0;
  }
}

Ini sangat berguna untuk carousel produk, galeri foto, atau testimonial slider. Item yang aktif bisa di-highlight, sementara yang lain di-demote secara visual.

C. Status “scrollable” – Deteksi Overflow

Mengetahui kapan konten overflow sangat penting untuk UX. Kita bisa menampilkan scroll indicator hanya ketika diperlukan:

@container scroll-state(scrollable) {
  .scroll-hint {
    opacity: 1;
    pointer-events: auto;
  }
}

@container not scroll-state(scrollable) {
  .scroll-hint {
    opacity: 0;
    pointer-events: none;
  }
}

D. Status “scrolled” – Tracking Arah Scroll

Fitur ini memungkinkan kita membuat navbar yang muncul/hilang berdasarkan arah scroll:

@container scroll-state(scrolled: bottom) {
  header {
    translate: 0 -100%;
  }
}

@container scroll-state(scrolled: top) {
  header {
    translate: 0 0;
  }
}

3. Property text-box – Kontrol Presisi Tipografi

Property text-box memungkinkan kita untuk “memotong” whitespace vertikal (half-leading) dari text box, memberikan kontrol presisi tinggi untuk alignment tipografi.

Masalah dengan Rendering Font Tradisional

Secara default, rendering web font menyertakan whitespace di atas dan di bawah glyphs untuk “safe spacing”. Ini bagus untuk readability secara umum, tetapi menjadi masalah ketika kita ingin:

• Alignment pixel-perfect ke baseline
• Alignment ke x-height untuk konsistensi visual
• Integrasi sempurna dengan grid system
• Spacing yang konsisten dalam design system

Solusi dengan text-box

Property text-box memberikan kontrol penuh atas whitespace ini:

h1 {
  text-box: trim-both cap alphabetic;
}

Satu baris kode ini akan:

• trim-both: Memotong spacing di atas dan di bawah
• cap: Memotong hingga cap height (tinggi huruf kapital)
• alphabetic: Memotong hingga baseline alfabetik

Variasi Trimming

/* Trim hanya atas */
.trim-top {
  text-box: trim-start cap;
}

/* Trim hanya bawah */
.trim-bottom {
  text-box: trim-end alphabetic;
}

/* Trim ke x-height untuk body text */
.body-text {
  text-box: trim-both ex alphabetic;
}

Kapan Menggunakan text-box?

Fitur ini sangat berguna untuk:

• Headings dan Hero Text: Alignment sempurna dengan elemen visual lainnya
• Button Text: Vertical centering yang akurat
• Card Titles: Spacing konsisten dalam komponen
• Design System: Standardisasi tipografi di seluruh aplikasi

4. Typed attr() – Type-Safe Attributes dalam CSS

Versi advanced dari fungsi attr() kini hadir dengan type checking dan dukungan yang lebih powerful. Fitur ini menciptakan jembatan yang kuat antara HTML dan CSS dengan type safety.

Konsep Dasar

Fungsi attr() yang baru memungkinkan kita menggunakan HTML attributes secara langsung dalam CSS dengan type checking dan fallback values:

/* Sintaks: attr(attribute-name type, fallback) */
.element {
  property: attr(data-value number, 0);
}

Use Case 1: Passing Colors

/* HTML */
<div class="theme-box" data-bg="white" data-fg="deeppink">
  Konten dengan tema custom
</div>

/* CSS */
.theme-box {
  background: attr(data-bg color, black);
  color: attr(data-fg color, white);
}

Dengan cara ini, setiap elemen bisa memiliki skema warna sendiri yang didefinisikan melalui HTML attributes, sangat berguna untuk theming dinamis atau personalisasi konten.

Use Case 2: Dynamic Grid Columns

/* HTML */
<div class="grid" data-columns="3">
  <!-- grid items -->
</div>

<div class="grid" data-columns="4">
  <!-- grid items -->
</div>

/* CSS */
.grid {
  --_columns: attr(data-columns number, 3);
  display: grid;
  grid-template-columns: repeat(var(--_columns), 1fr);
  gap: 1rem;
}

Setiap grid instance bisa memiliki jumlah kolom berbeda tanpa perlu class tambahan atau inline styles.

Use Case 3: Type-Safe Enums dengan type()

Fungsi type() memvalidasi attribute values terhadap keyword yang diizinkan:

/* HTML */
<li scroll-snap="start">Item 1</li>
<li scroll-snap="center">Item 2</li>
<li scroll-snap="end">Item 3</li>
<li scroll-snap="invalid">Item 4</li>

/* CSS */
[scroll-snap] {
  scroll-snap-align: attr(scroll-snap type(start | center | end));
}

CSS mengontrol enum yang valid, dan jika HTML memberikan nilai invalid, akan gracefully fallback. Item keempat dengan nilai “invalid” tidak akan mendapat scroll-snap-align karena tidak termasuk dalam type yang diizinkan.

Manfaat Typed attr()

• Type Safety: Validasi tipe data langsung di CSS
• Fallback Values: Nilai default jika attribute tidak ada
• Dynamic Styling: Style berdasarkan data HTML tanpa JavaScript
• Single Source of Truth: CSS mengontrol aturan, HTML menyediakan data
• Performance: Lebih cepat dari JavaScript untuk styling dinamis sederhana

Contoh Lanjutan: Responsive Spacing

/* HTML */
<section data-spacing="large">...</section>
<section data-spacing="small">...</section>

/* CSS */
section {
  --spacing-small: 1rem;
  --spacing-medium: 2rem;
  --spacing-large: 3rem;
  
  padding-block: attr(data-spacing 
    type(small | medium | large), 
    --spacing-medium
  );
}