Tips DevTools: Cara memeriksa kueri penampung CSS
bookmark_borderbookmark
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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.

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

Untuk mempelajari lebih lanjut dukungan kueri penampung di DevTools, lihat Memeriksa dan men-debug kueri penampung CSS.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2022-06-30 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2022-06-30 UTC."],[],[]]