CSS Modern yang Harus Kamu Tahu: Container Queries, :has(), dan Cascade Layers

CSS 2024 jauh berbeda dari CSS yang kamu pelajari 5 tahun lalu. Ini bukan tentang tren visual — ini fitur fundamental yang mengubah cara pendekatan styling.

1. Container Queries — Game Changer untuk Responsive Design

Selama ini kita responsive berdasarkan lebar viewport. Container queries memungkinkan komponen responsive berdasarkan lebar container induknya sendiri.

/* Definisikan container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Style berdasarkan ukuran container, bukan viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    flex-direction: column;
  }
}

Artinya: komponen Card-mu bisa di-reuse di sidebar yang sempit dan di area konten yang lebar, dan tampilnya otomatis menyesuaikan — tanpa perlu tahu ukuran viewport.

2. :has() — CSS yang Bisa "Lihat ke Bawah"

Ini yang developer CSS minta selama lebih dari satu dekade. :has() memungkinkan kamu select parent berdasarkan anak-anaknya.

/* Style form yang punya input dengan error */
.form-group:has(input:invalid) {
  border-color: red;
}

/* Card yang punya gambar — beri padding berbeda */
.card:has(img) {
  padding: 0;
}

/* Navigation dengan submenu yang sedang di-hover */
.nav-item:has(.submenu:hover) {
  background: var(--accent);
}

3. CSS Cascade Layers — Kontrol Spesifisitas yang Sesungguhnya

Ini solusi untuk masalah spesifisitas CSS yang selama ini bikin !important bertebaran di mana-mana.

/* Definisikan urutan layer — layer terakhir menang */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  h1 { font-size: 2rem; }
}

@layer components {
  .btn { padding: 8px 16px; border-radius: 4px; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}
/* .mt-4 akan selalu override .btn meski spesifisitas lebih rendah,
   karena layer utilities didefinisikan setelah components */

4. CSS Nesting — Tidak Perlu Sass Lagi untuk Ini

.card {
  padding: 1rem;
  border-radius: 8px;

  /* Nested selector — sudah native! */
  & .title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  &:hover {
    transform: translateY(-2px);
  }

  @media (max-width: 640px) {
    padding: 0.75rem;
  }
}

Browser Support

Semua fitur di atas sudah didukung Chrome 111+, Firefox 117+, dan Safari 17+. Coverage global sekitar 90%+. Tidak butuh polyfill untuk target browser modern.