Tips DevTools: Cara memeriksa kueri penampung CSS

Sofia Emelianova
Sofia Emelianova

Kueri penampung CSS adalah fitur CSS baru yang disukai developer web. Hal ini dapat memicu revolusi dalam desain web—mulai dari desain responsif berbasis halaman hingga desain responsif berbasis container.

Chrome DevTools hadir untuk membantu Anda mengadopsi pola desain tata letak baru dan terus mengikuti tren terbaru. Dengan dukungan fitur CSS ini, kini Anda bisa memeriksa dan men-debug kueri container di DevTools.

Video di atas memberikan ringkasan mengenai kueri container, sintaksnya, dan cara memeriksanya di DevTools.

Anda kini dapat menemukan elemen penampung dan turunannya dengan badge yang sesuai yang mengalihkan overlay garis putus-putus.

Badge penampung.

Periksa aturan @container yang diterapkan ke turunan jika container memenuhi kondisi kueri.

@penampung.

Untuk mempelajari lebih lanjut dukungan kueri container di DevTools, lihat Memeriksa dan men-debug kueri container CSS.