container-type وcontainer-name

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

باستخدام استعلامات الوسائط، لا يستطيع مكوّن بطاقة في شريط جانبي بعرض 300px معرفة أنه صغير؛ فهو يعرف فقط أن إطار العرض عريض. أما استعلامات الحاويات فتتيح للمكوّن الاستجابة لحجم حاويته الخاصة، لا لحجم إطار العرض العام.

للاستعلام عن حاوية، عرّفوها أولًا باعتبارها حاوية استعلام باستخدام container-type:

القيم المتاحة:

• inline-size — يتيح الاستعلام عن البعد المضمّن للحاوية، أي العرض في اتجاه الكتابة الأفقي
• size — يتيح الاستعلام عن البعدين المضمّن والكتلي، أي العرض والارتفاع
• normal — القيمة الافتراضية؛ لا تتيح استعلامات الحجم، لكن تظل استعلامات الأنماط ممكنة

امنحوا الحاوية اسمًا للإشارة إليها في الاستعلامات. ويكون ذلك ضروريًا عند وجود حاويات متداخلة ورغبتكم في الاستعلام عن سلف محدد:

يعيّن الاختصار container الاسم والنوع معًا:

يمكن الاستعلام عن حاوية غير مسمّاة أيضًا؛ إذ تستهدف قاعدة @container أقرب سلف من الحاويات افتراضيًا. ولا تكون الأسماء ضرورية إلا عندما تريدون الانتقال إلى سلف محدد.

يحصل كل عنصر من نوع container-type على احتواء تخطيط خاص به. وهذا يعني أن تغيّرات الحجم داخل الحاوية لا تؤثر في الأسلاف، مما يحقق فائدة للأداء. فلا يحتاج المتصفح إلى إعادة حساب الصفحة بأكملها عند تغيّر الحاوية.

يعيّن container-type: inline-size ضمنيًا contain: inline-size layout style على العنصر. ويمنع ذلك حجم الحاوية من التأثير في تخطيطها الخاص، وهو أمر مطلوب حتى تعمل استعلامات الحجم.

إعداد كامل لاستعلام الحاوية:

استخدموا الحاويات من أجل: التكيّف على مستوى المكوّن، والمكوّنات القابلة لإعادة الاستخدام في سياقات تخطيط مختلفة، والبطاقات أو الأدوات في مواضع غير معروفة. واستخدموا استعلامات الوسائط من أجل: تغييرات التخطيط العام، وتغيير حجم الخطوط، وإظهار الأقسام الكبيرة أو إخفائها.

ما قيمة الخاصية التي تجعل العنصر قابلًا للاستعلام عن عرضه باستخدام قواعد @container؟

يعرّف container-type: inline-size العنصر باعتباره حاوية استعلام لعرضه. استخدموا container-name لتسمية الحاويات بهدف استهدافها بشكل انتقائي. ويعيّن الاختصار container كلاً من الاسم والنوع. وتحلّ استعلامات الحاويات مشكلة المكوّن الموضوع في سياق غير معروف، وهي المشكلة التي لا تستطيع استعلامات وسائط إطار العرض التعامل معها.