Wawancara Frontend: Apa Perbedaan CSS Container Queries dan Media Queries?

Petunjuk dan konteks

Sebuah komponen kartu muncul di kolom utama, sidebar, dan grid. Jelaskan bagaimana perbedaan CSS container queries dari media queries, tulis CSS yang mengubah tata letak berdasarkan lebar kontainer kartu, dan jelaskan containment, cakupan, fallback, serta pengujian.

Media queries mengevaluasi fitur viewport atau perangkat; container queries mengevaluasi ukuran, gaya, atau status gulir dari container kueri leluhur (ancestor query container). Panduan wawancara CSS dari GreatFrontEnd mencantumkan container queries sebagai pertanyaan wawancara, daftar pertanyaan HTML/CSS dari Hack Frontend mencakup topik ini, dan MDN mendokumentasikan container-type, @container, serta unit container query. Pertanyaan ini tidak terikat pada perusahaan tertentu.

Hal yang dinilai pewawancara

Pewawancara ingin kandidat mengidentifikasi target respons sebelum menulis CSS. Jawaban yang kuat menjelaskan bahwa container-type: inline-size membentuk konteks kueri ukuran (size-query context), bahwa aturan kueri menata gaya elemen turunan (descendant) daripada kontainer itu sendiri, bahwa leluhur yang memenuhi syarat terdekat digunakan secara default, dan mengapa lebar kartu yang berbeda memerlukan container queries bahkan pada satu lebar viewport yang sama.

Mereka juga memeriksa pemahaman tentang efek samping penahanan ukuran (size-containment), batasan kontainer bernama, fallback peramban, dan pengujian. Hanya mengganti @media dengan @container tanpa menetapkan kontainer atau menangani nesting tidak akan berfungsi dengan andal.

Pertanyaan klarifikasi

• Apa yang harus mendorong respons? Petunjuk ini merespons ukuran inline kartu, bukan seluruh viewport.
• Apakah kueri gaya atau status gulir diperlukan? Tidak; jawaban ini berfokus pada kueri ukuran dan memperlakukan yang lain sebagai ekstensi.
• Apa target dukungan peramban? Konfirmasikan terlebih dahulu, lalu pertahankan tata letak dasar yang dapat digunakan serta fallback.
• Bisakah batas komponen bertingkat (nested)? Jika ya, gunakan container-name untuk memperjelas batasan yang dimaksud.

Jawaban 30 detik

“Media queries mengamati viewport dan cocok untuk breakpoint tingkat halaman; container queries mengamati leluhur komponen dan cocok untuk komponen yang dapat digunakan kembali (reusable) yang ditempatkan di berbagai slot. Saya menyetel container-type: inline-size pada daftar kartu, lalu menggunakan @container untuk mengubah tata letak kartu pada ambang batas ukuran inline. Kueri tersebut menata gaya turunan dan menggunakan kontainer terdekat yang memenuhi syarat secara default; saya menggunakan container-name untuk nesting yang kompleks. Saya menyediakan gaya dasar dan fallback @supports, lalu membiarkan viewport tetap sementara mengubah ukuran induk di kolom utama, sidebar, grid, dan peramban yang tidak didukung.”

Jawaban langkah demi langkah

Langkah 1: Bandingkan target respons dan cakupan

Media queries cocok secara langsung untuk navigasi, kolom halaman, pencetakan, dan preferensi pengguna. Container queries menyelesaikan kasus di mana suatu komponen tidak mengetahui seberapa lebar slotnya: kolom utama dan sidebar dapat menggunakan tata letak yang berbeda pada lebar viewport yang sama.

Langkah 2: Menetapkan konteks kueri ukuran

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

.card {
  display: grid;
  gap: 0.75rem;
}

@container card-list (inline-size > 40rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: center;
  }
}

inline-size membentuk kontainer kueri ukuran sumbu inline (inline-axis) dan bekerja dengan baik saat mode penulisan (writing modes) diperhitungkan. size membentuk containment dua sumbu yang lebih kuat dan sebaiknya dipilih hanya ketika kueri sumbu blok diperlukan. normal tidak membentuk konteks kueri ukuran. Kondisi ditulis dalam @container, dan aturan yang cocok diterapkan ke turunan.

Langkah 3: Memahami kontainer terdekat, nama, dan unit

Tanpa nama, peramban akan mencari leluhur terdekat yang memenuhi syarat; oleh karena itu, komponen bertingkat dapat membaca batasan yang salah. Sebuah nama membuat maksud menjadi eksplisit: @container card-list (...) hanya cocok dengan kontainer bernama card-list. Satuan panjang container query seperti cqw dan cqi menyesuaikan skala dari lebar kontainer kueri atau ukuran inline, tetapi harus dikombinasikan dengan batas minimum dan maksimum yang masuk akal sehingga kontainer yang sangat kecil tidak menghasilkan teks yang tidak terbaca.

Sebuah kueri tidak boleh membuat kontainer mengubah ukurannya sendiri berdasarkan hasilnya, atau loop umpan balik (feedback loop) dapat terjadi; aturan containment dan scoping mencegah loop tersebut. Penahanan ukuran (size containment) juga dapat mengubah penentuan ukuran otomatis (automatic sizing), jadi periksa konten kosong, gambar yang belum dimuat, dan tinggi yang bergantung pada konten.

Langkah 4: Merancang fallback dan progressive enhancement

.card {
  display: block;
}

@supports (container-type: inline-size) {
  .card-list {
    container-type: inline-size;
  }

  @container (inline-size > 40rem) {
    .card {
      display: grid;
      grid-template-columns: 8rem 1fr;
    }
  }
}

Tata letak dasar harus tetap terbaca tanpa container queries. Media query dapat memberikan fallback tingkat halaman, tetapi breakpoint viewport tidak dapat mewakili setiap lebar sidebar atau sel grid secara akurat. Ketika peramban target tidak memiliki kemampuan yang diuji, peramban tersebut harus mempertahankan gaya dasar tanpa kehilangan konten inti atau interaksi.

Langkah 5: Menguji skenario dan batasan

Biarkan viewport peramban tetap. Tempatkan komponen yang sama di kolom utama, sidebar, dan grid dua kolom, lalu ubah hanya lebar induknya dan pastikan bahwa kartu merespons kontainer, bukan viewport. Uji kontainer bernama yang bertingkat, berbagai mode penulisan, gambar sebelum dan sesudah dimuat, kontainer yang sangat sempit, slot dinamis, dan peramban tanpa dukungan container-query. Verifikasi juga bahwa komponen tidak bergantung pada kedalaman DOM dari satu halaman, yang dapat secara tidak sengaja memilih kontainer yang salah saat digunakan kembali.

Batasan implementasi yang dapat diterima

Jawaban tidak perlu mencakup setiap jenis kueri, tetapi harus secara akurat membedakan viewport dari kontainer leluhur dan membuat contoh dapat dijalankan dengan konteks kueri yang nyata. Jika kandidat memilih size, kueri gaya, atau kueri status gulir, mereka harus menjelaskan efek penahanan tambahan, target peramban, dan batasan pengujian. Ketika dukungan tidak pasti, tata letak dasar harus menjadi default yang aman.

Kesalahan umum dan contoh kontra

• Melupakan container-type: @container tanpa konteks kueri tidak akan merespons ukuran.
• Menjadikan kontainer sebagai target kuerinya sendiri: kueri yang stabil menata gaya turunan; penentuan ukuran mandiri dari hasil kueri dapat menciptakan loop.
• Menggunakan size secara default: containment dua sumbu dapat memengaruhi penentuan ukuran otomatis; pilih inline-size untuk kebutuhan horizontal saja.
• Hanya menguji pada layar lebar: sidebar dan kolom utama berbeda pada satu lebar viewport, jadi ubah ukuran induk dengan viewport tetap.
• Melewatkan fallback dasar: peramban yang tidak didukung memerlukan tata letak dasar yang dapat digunakan sebelum peningkatan (enhancement).

Pertanyaan lanjutan dan tanggapan

Kapan Anda masih akan menggunakan media queries?

Gunakan media queries saat navigasi, kolom halaman, pencetakan, atau preferensi pengguna bergantung pada viewport atau fitur media. Gunakan container queries ketika breakpoint internal suatu komponen bergantung pada induknya.

Bagaimana Anda memilih inline-size versus size?

Pilih inline-size saat komponen hanya merespons ruang horizontal yang tersedia. Pertimbangkan size jika sumbu blok dan inline diperlukan, lalu verifikasi penentuan ukuran otomatis, konten kosong, dan perilaku pasca-pemuatan gambar.

Bagaimana Anda menangani peramban yang tidak didukung?

Sediakan tata letak kolom tunggal atau fleksibel (fluid) sebagai dasar dan tingkatkan secara progresif dengan @supports (container-type: inline-size). Media queries dapat melengkapi perilaku tingkat halaman, tetapi tidak dapat menggantikan setiap breakpoint tingkat kontainer.