منذ ظهور تصميم المواقع المتجاوب، طالب المطورون بإمكانية تنسيق عناصر DOM بناءً على حجمها الفعلي بدلاً من حجم نافذة المتصفح (باستخدام استعلامات الوسائط ). في الواقع، تُعد استعلامات الحاويات (التي كانت تُعرف سابقًا باستعلامات العناصر) على الأرجح أكثر ميزات CSS طلبًا والتي لا تزال المتصفحات تفتقر إليها .
هناك بالفعل العديد والعديد من المنشورات التي تشرح بالضبط سبب صعوبة تنفيذ استعلامات الحاوية في CSS ولماذا يتردد مصنعو المستعرضات في تنفيذها. إذا كنت ترغب في الاستمتاع به الآن ، يمكن أن يساعدك القليل من JavaScript:
c51c33e1533e68c3f8fd24633700789f
ثم يبدو الأمر برمته هكذا:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
يمكن استخدام سمات نقاط التوقف والمحدد والنمط لتحديد نقاط التوقف المختلفة والمحدد التلقائي ونوع الفئات المضافة. إذا كنت تستخدم البرنامج النصي ، فيمكنك معالجة الفئات التي تم إنشاؤها حديثًا على النحو التالي:
c51c33e1533e68c3f8fd24633700789f
يعد استخدام استعلامات الحاوية مفيدًا بشكل خاص للعناصر الموجودة في التراكبات أو النوافذ المنبثقة أو الأشرطة الجانبية أو العناصر المخصصة - حتى الآن، على سبيل المثال، مع البرنامج النصي أعلاه.