CSS berkembang cepat dan banyak fitur yang dulu butuh library kini bawaan browser. Section ini merangkum fitur modern yang paling berdampak beserta strategi progressive enhancement agar halaman tetap aman di browser lama.

# Nesting

Tulis selector anak dan varian di dalam aturan induknya dengan nesting bawaan CSS, lengkap dengan tanda & untuk konteks eksplisit.

Buka → # Custom Properties dan Theming

Bangun tema terang dan gelap dengan custom properties pada :root, lalu tukar seluruh palet lewat satu atribut data-tema.

Buka → # Cascade Layers

Organisasi stylesheet proyek nyata dengan @layer — reset, base, components di dalam layer, utilities unlayered sebagai lapisan penimpa.

Buka → # :is(), :where(), dan :has()

Gabungkan :is() untuk pengelompokan ringkas, :where() untuk gaya nol specificity, dan :has() untuk memilih elemen berdasarkan isinya.

Buka → # Aspect Ratio

Kunci rasio lebar-terhadap-tinggi sebuah kotak dengan properti aspect-ratio sehingga tata letak stabil sebelum konten maupun gambar selesai dimuat.

Buka → # Object Fit dan Object Position

Kendalikan cara gambar mengisi kotaknya dengan object-fit — fill, cover, contain, none — dan arahkan fokusnya dengan object-position.

Buka → # Scroll Snap

Kunci posisi gulir ke titik-titik tertentu dengan scroll-snap-type pada container dan scroll-snap-align pada item, tanpa JavaScript.

Buka → # Scroll-driven Animations

Jalankan animasi yang digerakkan posisi gulir dengan animation-timeline: scroll() dan view(), tanpa event scroll dan tanpa JavaScript.

Buka → # Anchor Positioning

Tempatkan tooltip dan popover pada elemen pemicunya dengan anchor positioning — anchor-name, position-anchor, dan position-area.

Buka → # Progressive Enhancement

Susun stylesheet berlapis dengan pendekatan progressive enhancement — gaya dasar yang selalu aktif, lalu peningkatan di dalam @supports.

Buka →