Memeriksa dan men-debug kueri penampung CSS

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Halaman beranda

Panduan ini menunjukkan cara memeriksa dan men-debug kueri penampung CSS di panel Elements 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 penampung.

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 Elemen. Badge mengalihkan overlay garis putus-putus penampung dan turunannya.

Untuk mengganti overlay:

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

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

Memeriksa kueri container

Panel Elements menampilkan deklarasi kueri @container saat diterapkan ke elemen turunan, yaitu saat container 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 mengisi 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 beserta link ke penampung induk article.card.

   

3. Tetapkan lebar ke lebih dari 600px, lalu pilih elemen yang terpengaruh. Amati deklarasi @container yang menerapkan 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 dan nilainya saat ini.

Mengubah kueri container

Untuk men-debug kueri, Anda dapat mengubahnya sebagai deklarasi CSS lain di panel Gaya seperti yang dijelaskan di 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.