Tips DevTools: Cara memeriksa kueri penampung CSS

Sofia Emelianova
Sofia Emelianova

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

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

Video di atas memberikan ringkasan tentang kueri penampung, sintaksisnya, 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 saat penampung memenuhi kondisi kueri.

Aturan @container.

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