Sejak ada desain web yang responsif, pengembang telah menanyakan tentang kemungkinan mendesain elemen DOM berdasarkan ukuran sebenarnya dan bukan pada ukuran area pandang di browser (dengan bantuan kueri media ). Faktanya, kueri penampung (awalnya kueri elemen) mungkin merupakan fungsi CSS yang paling banyak diminta yang masih belum dimiliki 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 penampung sangat bermanfaat untuk elemen di hamparan, munculan, bilah sisi, atau elemen khusus - bahkan sekarang, misalnya, dengan skrip di atas.