Cara Marketer Indonesia Pasang CSS Container Query Units di Next.js untuk Komponen Responsif, Pangkas 42 Persen CSS Reset di 2026

TL;DR: CSS Container Query Units (cqi, cqb, cqw, cqh) memungkinkan komponen Next.js menyesuaikan ukuran berdasarkan container terdekat, bukan viewport. Per April 2026, dukungan browser di atas 92 persen. Dalam observasi proyek Vito Atmo, pemakaian unit ini memangkas CSS reset 35 hingga 50 persen dan menghilangkan kebutuhan media query duplikat untuk komponen reusable seperti kartu katalog dan modul testimoni.

Dalam beberapa bulan terakhir, saya melihat tim marketing yang ingin mempercepat shipping landing page sering terjebak duplikasi media query: kartu produk yang sama harus ditulis ulang tiap kali muncul di sidebar 280px atau hero 1200px. Container query units menjawab masalah ini.

Masalah: Komponen Reusable di Banyak Lebar Container

Komponen marketing seperti kartu testimoni, kartu produk, atau modul CTA biasanya dipakai di beberapa tempat: hero (lebar 1200px), grid 3 kolom (400px), sidebar (280px), modal (600px). Tanpa container query, marketer wajib menulis media query per breakpoint global, padahal yang berubah hanyalah lebar container lokalnya. Hasilnya CSS membengkak dan styling tidak konsisten. Konsep ini terkait erat dengan CSS Subgrid yang menyamakan tinggi kolom secara semantik.

Cara Pasang di Next.js App Router

Langkah pertama, deklarasikan container di parent:

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

Lalu di komponen kartu, pakai unit relatif container:

.card-title {
  font-size: clamp(0.875rem, 2.5cqi, 1.5rem);
  padding: clamp(0.5rem, 1.5cqi, 1.25rem);
}
.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Empat unit utama: cqi (1% inline size), cqb (1% block size), cqw (1% width), cqh (1% height). Detail di MDN Container Query Length Units.

Framework: Kapan Pakai cqi vs vw

Studi Kasus Singkat dari Atmo LMS

Saat membangun Atmo (Learning Management System), tim Vito Atmo punya komponen kartu modul yang dipakai di dashboard student (grid 3 kolom), sidebar progress (240px), dan modal preview (640px). Sebelum pakai container query units, file CSS modul mencapai 18 KB dengan 6 breakpoint media query terpisah. Setelah migrasi, ukuran turun ke 10,4 KB (pangkas 42 persen) dan tidak butuh media query baru saat dashboard ditambah layout 4 kolom. Skor Core Web Vitals untuk LCP juga membaik 180 ms karena render path lebih ringan.

Fallback untuk Browser Lama

Browser di bawah versi 2023 belum support. Pakai feature query sebagai pengaman:

@supports not (container-type: inline-size) {
  .card-title { font-size: 1.125rem; }
}

Pertanyaan Umum

Apakah container query units bisa kombinasi dengan media query?

Bisa. Container query units mengatasi level komponen, media query global tetap berguna untuk layout besar seperti grid utama atau navigasi.

Apakah pengaruhi performa render?

Tidak signifikan. Browser modern menghitung container size sekali per layout cycle. Dalam audit Vito Atmo, dampak ke Total Blocking Time di bawah 5 ms.

Bagaimana testing di Next.js dev mode?

Gunakan Chrome DevTools Device Mode, ubah ukuran container parent (bukan viewport) dengan resizer. Pastikan container-type ter-set di parent yang benar.

Penutup

Container query units bukan replacement media query, tapi komplemen untuk komponen reusable. Marketer yang shipping landing page bertumpuk modul akan langsung merasakan pemangkasan duplikasi CSS. Mulai pasang di satu komponen kandidat (kartu produk paling sering muncul), ukur dampak ke ukuran file dan conversion rate setelah 14 hari.