CSS Container Queries: Selamat Tinggal Media Queries?

Kelemahan Terbesar Media Queries (@media)

Selama belasan tahun, kita menggunakan @media (max-width: 768px) untuk membuat website responsif (tampil rapi di HP). TAPI, Media Queries memiliki satu kelemahan fatal: Ia hanya peduli pada ukuran layar monitor (Viewport) pengguna.

Misalnya, kamu mendesain sebuah Kartu Produk (Product Card). Saat layar lebar, desainnya menyamping. Saat layar HP, desainnya menurun. Tapi bagaimana jika kamu meletakkan kartu itu di dalam area Sidebar yang sempit pada layar Laptop? Karena layar laptop itu lebar, Media Query akan memaksakan desain menyamping, padahal ruang Sidebar-nya sangat sempit! Hasilnya? Desain kartumu hancur dan keluar batas.

Sihir Bernama Container Queries (@container)

Dunia CSS modern akhirnya menyelesaikan masalah ini dengan Container Queries. Alih-alih bertanya "Berapa lebar layar HP-mu?", komponen kini bertanya: "Berapa lebar WADAH (Kotak Induk) tempat saya diletakkan saat ini?"

Cara Menggunakannya (Sangat Mudah)

Pertama, kamu harus mendeklarasikan kotak pembungkus (Induk/Parent) sebagai sebuah *Container* di CSS.

/* 1. Jadikan pembungkusnya sebagai Container */
.sidebar-wrapper {
  container-type: inline-size;
  container-name: sidebar;
}

Kedua, kamu mengatur desain elemen anak di dalamnya berdasarkan ukuran si pembungkus tersebut menggunakan @container.

/* Desain default kartu (Menyamping) */
.kartu-produk {
  display: flex;
  flex-direction: row;
}

/* 2. Jika WADAHNYA lebih sempit dari 400px, ubah jadi menurun! */
@container sidebar (max-width: 400px) {
  .kartu-produk {
    flex-direction: column;
  }
}

Dampak Luar Biasa Bagi Frontend Developer

Berkat Container Queries, kamu bisa membuat Satu Komponen Kartu, lalu meletakkannya di Sidebar sempit, di Header luas, atau di Footer, dan kartu tersebut akan Otomatis Mengubah Bentuk Dirinya Sendiri menyesuaikan tempat ia ditaruh. Ini adalah pilar utama dari konsep Micro-Frontends dan Component-Driven Design yang sempurna!