Memeriksa dan men-debug kueri penampung CSS

Sofia Emelianova

Jecelyn Yeen

Panduan ini menunjukkan cara memeriksa dan men-debug kueri container CSS di panel Elemen di Chrome DevTools.

Kueri penampung CSS memungkinkan Anda memanipulasi gaya elemen berdasarkan properti penampung induknya. Kemampuan ini mengubah konsep desain web responsif dari berbasis halaman menjadi berbasis container.

Screenshot dalam panduan ini diambil dari halaman demo ini.

Menemukan container dan turunannya

Setiap elemen yang ditentukan sebagai penampung kueri memiliki badge container di sampingnya di panel Elements. Badge membuat overlay garis putus-putus dari container dan turunannya.

Untuk beralih overlay:

1. Buka DevTools.
2. Di panel Elemen, klik badge container di samping elemen yang ditentukan sebagai penampung.

Dalam contoh ini, properti container-type: inline-size menentukan elemen penampung. Turunannya dapat melakukan kueri dimensi inline (sumbu horizontal) dan mengubah gayanya berdasarkan lebar penampung.

Memeriksa kueri penampung

Panel Elemen menampilkan deklarasi kueri @container ketika diterapkan ke elemen turunan, yaitu ketika penampung memenuhi kondisi kueri.

Untuk memahami kapan Anda dapat memeriksa deklarasi @container di halaman demo ini, periksa contoh kode berikut:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

Dalam contoh ini, jika lebar penampung melebihi jumlah piksel berikut, gaya yang sesuai akan diterapkan:

• Lebih dari 400px: elemen paragraf (p) muncul di halaman sebagai blok—dimulai di baris baru dan menggunakan seluruh lebar.
• Lebih dari 600px: turunan mengadopsi tata letak petak horizontal dengan judul (h1) di bagian atas, dan gambar (img) di sebelah kiri.

Untuk memeriksa deklarasi @container pertama:

1. Di panel Elemen, tetapkan lebar penampung ke 500px. Elemen p muncul.

2. Pilih elemen p. Di panel Gaya, Anda dapat melihat deklarasi @container bersama dengan link ke penampung induk article.card.

   

3. Setel lebar ke lebih dari 600px, lalu pilih elemen apa pun yang terpengaruh. Amati deklarasi @container yang mengimplementasikan tata letak horizontal.

   

Menemukan elemen container

Untuk menemukan dan memilih elemen penampung yang menyebabkan kueri diterapkan, arahkan kursor ke atas dan klik nama elemen di atas deklarasi @container.

Saat kursor diarahkan ke atasnya, nama akan berubah menjadi link ke elemen di panel Elements dan panel Styles akan menampilkan properti yang dikueri beserta nilainya saat ini.

Mengubah kueri penampung

Untuk men-debug kueri, Anda dapat mengubahnya seperti deklarasi CSS lainnya di panel Gaya seperti yang dijelaskan dalam Melihat dan mengubah CSS.

Dalam contoh ini, lebar penampung adalah 500px. Elemen paragraf (p) muncul di halaman.

1. Pilih elemen p. Di panel Styles. Anda dapat melihat deklarasi @container (inline-size > 400px).
2. Ubah inline-size dari 400px menjadi 520px.
3. Elemen paragraf (p) menghilang dari halaman karena tidak memenuhi kriteria kueri.