Sejak munculnya desain web responsif, para pengembang telah meminta kemampuan untuk menata elemen DOM berdasarkan ukuran sebenarnya, bukan ukuran viewport browser (menggunakan media queries ). Bahkan, container queries (awalnya element queries) mungkin merupakan fitur CSS yang paling banyak diminta namun masih belum dimiliki oleh browser.
Sudah ada banyak , banyak , banyak posting yang menjelaskan dengan tepat mengapa kueri kontainer sulit diterapkan di CSS dan mengapa produsen browser ragu untuk mengimplementasikannya. Jika Anda ingin menikmatinya sekarang, sedikit JavaScript dapat membantu:
c51c33e1533e68c3f8fd24633700789f
Semuanya kemudian terlihat seperti ini:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Atribut breakpoints , selector dan style dapat digunakan untuk mendefinisikan berbagai breakpoints, pemilih otomatis dan jenis kelas yang ditambahkan. Jika Anda menggunakan skrip, Anda dapat menangani kelas yang baru dibuat sebagai berikut::
c51c33e1533e68c3f8fd24633700789f
Penggunaan kueri kontainer sangat berguna untuk elemen dalam overlay, pop-up, sidebar, atau elemen khusus - bahkan sekarang, misalnya, dengan skrip di atas.