استعلامات الحاويات مقابل استعلامات الوسائط
افهم متى تستخدم استعلامات الحاويات بدلًا من استعلامات وسائط إطار العرض لتصميم قائم على المكوّنات.
استعلامات الحاويات مقابل استعلامات الوسائط درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
الفرق الجوهري
تستجيب استعلامات الوسائط لأبعاد نافذة العرض، بينما تستجيب استعلامات الحاوية لأبعاد الحاوية الأصل. ويحدد هذا الفرق الأداة المناسبة لكل مشكلة.
متى تستخدم استعلامات الوسائط
استخدم استعلامات الوسائط من أجل:
- تغييرات تخطيط الصفحة العامة (عمود واحد مقابل عمودين)
- إظهار أقسام كبيرة من الصفحة أو إخفاؤها (درج التنقل على الأجهزة المحمولة)
- ضبط مقياس أساس الطباعة على مستوى الصفحة
- أنماط الطباعة
- استعلامات تفضيلات المستخدم (الوضع الداكن، وتقليل الحركة)
متى تستخدم استعلامات الحاوية
استخدم استعلامات الحاوية من أجل:
- تغييرات التخطيط على مستوى المكوّن (بطاقة أفقية مقابل بطاقة عمودية)
- المكوّنات الموضوعة داخل حاويات غير معروفة (شريط جانبي، ومساحة رئيسية، وشريط جانبي داخل المساحة الرئيسية)
- مكوّنات نظام التصميم القابلة لإعادة الاستخدام
- الأدوات المضمّنة في صفحات تابعة لجهات خارجية
حجة قابلية النقل
تعمل بطاقة منسقة باستخدام استعلامات الوسائط عند نقطة توقف واحدة في صفحة عرضها 1200px. وإذا نُقلت هذه البطاقة إلى شريط جانبي، فقد تحتاج إلى نقاط توقف مختلفة. أما باستخدام استعلامات الحاوية، فتعمل البطاقة نفسها مباشرة، إذ تتكيف مع المساحة المتاحة لها.
الاستخدام المشترك
تستخدم التطبيقات الفعلية كليهما. تحدد استعلامات الوسائط التخطيط العام (وجود الشريط الجانبي عند عروض سطح المكتب)، بينما تحدد استعلامات الحاوية سلوك المكوّن داخل ذلك التخطيط.
<div class="layout">
<div class="sidebar"><div class="card">Sidebar card</div></div>
<div class="main-content"><div class="card">Main card</div></div>
</div>
خصوصية استعلامات الحاوية
على خلاف استعلامات الوسائط (التي لا تضيف أي خصوصية)، تضيف استعلامات الحاوية خصوصية مرتبطة بالسياق. تتمتع قاعدة داخل @container (min-width: 400px) بالخصوصية نفسها التي تتمتع بها القاعدة نفسها خارجه، لكنها لا تُطبّق إلا داخل سياق تلك الحاوية.
دعم المتصفحات
تدعم جميع المتصفحات الحديثة استعلامات الحاوية منذ عام 2023 (Chrome 105+ وFirefox 110+ وSafari 16+). ويمكن استخدامها بأمان اليوم في المشاريع الجديدة من دون حلول بديلة عند استهداف المتصفحات الحديثة.
التحسين التدريجي باستخدام @supports
بالنسبة إلى المشاريع التي تتطلب دعم المتصفحات الأقدم، استخدم @supports لاختبار دعم استعلامات الحاوية:
<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>
مقارنة الأداء
لاستعلامات الحاوية خصائص أداء خاصة بها: إذ ينشئ كل عنصر من نوع container-type حدًا لعزل التخطيط. ويمنع ذلك تغييرات الحجم داخل العنصر من التأثير في خارجه، وهو ما يمثل فائدة فعلية للأداء. أما تغييرات استعلامات الوسائط فقد تؤدي إلى إعادة حساب التخطيط على مستوى الصفحة.
تصحيح أخطاء استعلامات الحاوية
يعرض Chrome DevTools شارة "cq" بجانب عناصر الحاوية في لوحة Elements. انقر عليها لعرض حدود الحاوية بصريًا واختبار شروط استعلام الحاوية باستخدام مفتش التخطيط في DevTools.
تحقق سريع
يحتاج مكوّن بطاقة في نظام تصميم إلى التبديل من تخطيط مكدس إلى تخطيط جنبًا إلى جنب، اعتمادًا على العرض المتاح في أي سياق. ما النهج الأفضل؟
خلاصة
تستجيب استعلامات الوسائط لنافذة العرض العامة، بينما تستجيب استعلامات الحاوية لحجم الحاوية الأصل. استخدم استعلامات الوسائط لاتخاذ قرارات التخطيط العام واستعلامات تفضيلات المستخدم. واستخدم استعلامات الحاوية للمكوّنات القابلة لإعادة الاستخدام التي تحتاج إلى التكيف مع سياقها. اجمع بينهما: استعلامات الوسائط للتخطيط العام للصفحة، واستعلامات الحاوية لتكييف المكوّنات داخل ذلك التخطيط.
الأسئلة الشائعة
هل درس «استعلامات الحاويات مقابل استعلامات الوسائط» مجاني؟
نعم — نص درس «استعلامات الحاويات مقابل استعلامات الوسائط» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «استعلامات الحاويات مقابل استعلامات الوسائط»؟
افهم متى تستخدم استعلامات الحاويات بدلًا من استعلامات وسائط إطار العرض لتصميم قائم على المكوّنات. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «استعلامات الحاويات مقابل استعلامات الوسائط»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- container-type وcontainer-name
- قواعد @container ونقاط التوقف
- وحدات استعلام الحاوية: cqw وcqh
- استعلامات الحاويات مقابل استعلامات الوسائط