Kueri penampung CSS adalah fitur CSS baru yang disukai developer web. Hal ini dapat memicu revolusi dalam desain web—dari desain responsif berbasis halaman hingga desain responsif berbasis container.
Chrome DevTools hadir untuk membantu Anda mengadopsi pola desain tata letak baru dan agar dapat terus mengikuti tren terbaru. Dengan dukungan fitur CSS ini, sekarang Anda bisa memeriksa dan men-debug kueri container di DevTools.
Video di atas memberi Anda ringkasan kueri container, sintaksisnya, dan cara memeriksanya di DevTools.
Anda sekarang dapat menemukan elemen penampung dan turunannya dengan badge yang sesuai yang mengalihkan overlay garis putus-putus.
Memeriksa aturan @container yang diterapkan ke turunan saat container memenuhi kondisi kueri.
Untuk mempelajari lebih lanjut dukungan kueri container di DevTools, lihat Memeriksa dan men-debug kueri penampung CSS.