Temu Duga Frontend: Bagaimanakah Perbezaan antara CSS Container Queries dan Media Queries?

Gesaan dan konteks

Komponen kad muncul dalam lajur utama, bar sisi, dan grid. Terangkan bagaimana perbezaan CSS container queries daripada media queries, tulis CSS yang mengubah reka letak berdasarkan lebar kontena kad, dan huraikan containment, skop, fallback, serta pengujian.

Media queries menilai ciri viewport atau peranti; container queries menilai saiz, gaya, atau keadaan tatal (scroll state) kontena pertanyaan leluhur (ancestor query container). Panduan temu duga CSS GreatFrontEnd menyenaraikan container queries sebagai soalan temu duga, senarai soalan HTML/CSS Hack Frontend merangkumi topik ini, dan MDN mendokumenkan container-type, @container, serta unit container query. Soalan ini tidak terikat dengan mana-mana syarikat tertentu.

Perkara yang dinilai oleh penemu duga

Penemu duga mahu calon mengenal pasti sasaran tindak balas sebelum menulis CSS. Jawapan yang kukuh menjelaskan bahawa container-type: inline-size mewujudkan konteks size-query, bahawa peraturan query menggayakan keturunan (descendants) dan bukannya kontena itu sendiri, bahawa leluhur layak yang terdekat digunakan secara lalai, dan mengapa lebar kad yang berbeza memerlukan container queries walaupun pada satu lebar viewport yang sama.

Mereka juga menyemak pemahaman tentang kesan sampingan size-containment, sempadan kontena dinamakan, fallback pelayar, dan pengujian. Sekadar menggantikan @media dengan @container tanpa mewujudkan kontena atau mengendalikan nesting tidak akan berfungsi dengan andal.

Soalan penjelasan

• Apakah yang harus memacu tindak balas? Gesaan ini bertindak balas terhadap saiz sebaris (inline size) kad, bukan keseluruhan viewport.
• Adakah pertanyaan gaya atau keadaan tatal diperlukan? Tidak; jawapan ini memfokuskan pada size queries dan menganggap yang lain sebagai lanjutan.
• Apakah sasaran sokongan pelayar? Sahkannya terlebih dahulu, kemudian kekalkan reka letak asas yang boleh digunakan dan fallback.
• Bolehkah sempadan komponen bersarang (nested)? Jika ya, gunakan container-name untuk menjadikan sempadan yang dimaksudkan jelas.

Jawapan 30 saat

“Media queries memerhati viewport dan sesuai untuk titik henti (breakpoints) peringkat halaman; container queries memerhati leluhur komponen dan sesuai untuk komponen boleh guna semula yang diletakkan dalam slot berbeza. Saya menetapkan container-type: inline-size pada senarai kad, kemudian menggunakan @container untuk menukar reka letak kad pada ambang saiz sebaris. Pertanyaan tersebut menggayakan keturunan dan menggunakan kontena layak yang terdekat secara lalai; saya menggunakan container-name untuk nesting yang kompleks. Saya menyediakan gaya asas dan fallback @supports, kemudian mengekalkan viewport tetap semasa mengubah saiz induk dalam lajur utama, bar sisi, grid, dan pelayar yang tidak disokong.”

Jawapan langkah demi langkah

Langkah 1: Bandingkan sasaran tindak balas dan skop

Media queries sangat sesuai untuk navigasi, lajur halaman, percetakan, dan keutamaan pengguna. Container queries menyelesaikan kes di mana komponen tidak mengetahui berapa lebar slotnya: lajur utama dan bar sisi boleh menggunakan reka letak yang berbeza pada lebar viewport yang sama.

Langkah 2: Wujudkan konteks size-query

.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 mewujudkan kontena kueri saiz paksi sebaris (inline-axis) dan berfungsi dengan baik apabila mod penulisan (writing modes) diambil kira. size mewujudkan containment dua paksi yang lebih kuat dan hanya perlu dipilih apabila pertanyaan paksi blok diperlukan. normal tidak mewujudkan konteks size-query. Syarat ditulis dalam @container, dan peraturan yang sepadan digunakan pada keturunan.

Langkah 3: Fahami kontena terdekat, nama, dan unit

Tanpa nama, pelayar mencari leluhur layak yang terdekat; oleh itu, komponen bersarang boleh membaca sempadan yang salah. Nama menjadikan niat jelas: @container card-list (...) hanya sepadan dengan kontena bernama card-list. Unit panjang container query seperti cqw dan cqi berskala daripada lebar kontena pertanyaan atau saiz sebaris, tetapi harus digabungkan dengan nilai minimum dan maksimum yang munasabah supaya kontena yang terlalu kecil tidak menghasilkan teks yang tidak boleh dibaca.

Sesuatu query tidak boleh menyebabkan kontena mengubah saiznya sendiri berdasarkan hasilnya, jika tidak, gelung maklum balas (feedback loop) boleh berlaku; peraturan containment dan scoping menghalang gelung tersebut. Size containment juga boleh mengubah pensaizan automatik (automatic sizing), jadi periksa kandungan kosong, imej yang belum dimuatkan, dan ketinggian yang bergantung pada kandungan.

Langkah 4: Reka bentuk fallback dan peningkatan progresif (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;
    }
  }
}

Reka letak asas harus kekal boleh dibaca tanpa container queries. Media query boleh menyediakan fallback peringkat halaman, tetapi titik henti viewport tidak dapat mewakili setiap lebar bar sisi atau sel grid dengan tepat. Apabila pelayar sasaran tidak mempunyai keupayaan yang diuji, ia harus mengekalkan gaya asas tanpa kehilangan kandungan teras atau interaksi.

Langkah 5: Uji senario dan sempadan

Kekalkan viewport pelayar tetap. Letakkan komponen yang sama dalam lajur utama, bar sisi, dan grid dua lajur, kemudian tukar hanya lebar induk dan sahkan bahawa kad bertindak balas kepada kontena dan bukannya viewport. Uji kontena dinamakan yang bersarang, mod penulisan berbeza, imej sebelum dan selepas dimuatkan, kontena yang sangat sempit, slot dinamik, dan pelayar tanpa sokongan container-query. Sahkan juga bahawa komponen tidak bergantung pada kedalaman DOM sesuatu halaman, yang boleh memilih kontena yang salah secara senyap apabila diguna semula.

Sempadan pelaksanaan yang boleh diterima

Jawapan tidak perlu merangkumi setiap jenis query, tetapi ia mesti membezakan viewport daripada kontena leluhur dengan tepat dan menjadikan contoh boleh dijalankan dengan konteks query yang sebenar. Jika calon memilih size, pertanyaan gaya, atau pertanyaan keadaan tatal, mereka harus menerangkan kesan containment tambahan, sasaran pelayar, dan sempadan ujian. Apabila sokongan tidak pasti, reka letak asas harus menjadi lalai yang selamat.

Kesilapan biasa dan contoh bertentangan

• Terlupa container-type: @container tanpa konteks query tidak bertindak balas kepada saiz.
• Menjadikan kontena sebagai sasaran querynya sendiri: query yang stabil menggayakan keturunan; pensaizan kendiri daripada hasil query boleh mencipta gelung.
• Menggunakan size secara lalai: containment dua paksi boleh menjejaskan pensaizan automatik; pilih inline-size untuk keperluan mendatar sahaja.
• Hanya menguji pada skrin lebar: bar sisi dan lajur utama berbeza pada satu lebar viewport, jadi ubah saiz induk dengan viewport tetap.
• Melangkau fallback asas: pelayar yang tidak disokong memerlukan reka letak asas yang boleh digunakan sebelum peningkatan.

Soalan susulan dan respons

Bilakah anda masih akan menggunakan media queries?

Gunakan media queries apabila navigasi, lajur halaman, percetakan, atau keutamaan pengguna bergantung pada ciri viewport atau media. Gunakan container queries apabila titik henti dalaman komponen bergantung pada induknya.

Bagaimanakah anda memilih antara inline-size dan size?

Pilih inline-size apabila komponen hanya bertindak balas kepada ruang mendatar yang tersedia. Pertimbangkan size apabila kedua-dua paksi blok dan sebaris diperlukan, kemudian sahkan pensaizan automatik, kandungan kosong, dan tingkah laku selepas muatan imej.

Bagaimanakah anda mengendalikan pelayar yang tidak disokong?

Sediakan reka letak asas satu lajur atau bendalir (fluid) dan tingkatkannya secara progresif dengan @supports (container-type: inline-size). Media queries boleh melengkapkan tingkah laku peringkat halaman, tetapi ia tidak boleh menggantikan setiap titik henti peringkat kontena.