استخدم استعلامات الحاوية اليوم

منذ أن كان هناك تصميم ويب سريع الاستجابة ، كان المطورون يسألون عن إمكانية تصميم عناصر DOM بناءً على حجمها الفعلي وليس على حجم منفذ العرض في المتصفح (بمساعدة استعلامات الوسائط ). في الواقع ، من المحتمل أن تكون استعلامات الحاوية ( استعلامات العناصر في البداية) هي أكثر وظائف CSS المطلوبة والتي لا تمتلكها المتصفحات حتى الآن .


هناك بالفعل العديد والعديد من المنشورات التي تشرح بالضبط سبب صعوبة تنفيذ استعلامات الحاوية في CSS ولماذا يتردد مصنعو المستعرضات في تنفيذها. إذا كنت ترغب في الاستمتاع به الآن ، يمكن أن يساعدك القليل من JavaScript:

c51c33e1533e68c3f8fd24633700789f

ثم يبدو الأمر برمته هكذا:

See the Pen by David Vielhuber (@vielhuber) on CodePen.

يمكن استخدام سمات نقاط التوقف والمحدد والنمط لتحديد نقاط التوقف المختلفة والمحدد التلقائي ونوع الفئات المضافة. إذا كنت تستخدم البرنامج النصي ، فيمكنك معالجة الفئات التي تم إنشاؤها حديثًا على النحو التالي:

c51c33e1533e68c3f8fd24633700789f

يعد استخدام استعلامات الحاوية مفيدًا بشكل خاص للعناصر الموجودة في التراكبات أو النوافذ المنبثقة أو الأشرطة الجانبية أو العناصر المخصصة - حتى الآن ، على سبيل المثال ، مع البرنامج النصي أعلاه.

عودة