الخلاصة

  • ميزت أول مسودة علنية لوحدة CSS Containment Level 3، الصادرة في 21 ديسمبر 2021، بين السؤال عن بيئة العرض والسؤال عن عناصر داخل الصفحة. تحدد container-type الحاوية القابلة للاستعلام، ويطبق @container أنماطاً على العناصر التابعة حين يتحقق الشرط.
  • نقحت مسودة 18 أغسطس 2022 أنواع الحاويات وأسماءها ووحدات القياس النسبية. ويوضح مثال المساحة الرئيسية والعمود الجانبي تغير ترتيب المكوّن نفسه مع عرض مكانه.

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

شرحت أول مسودة علنية نشرتها W3C في 21 ديسمبر 2021 فرق المقياس. تستعلم قواعد الوسائط عن بيئة العرض، ومنها أبعاد نافذة المتصفح. أما استعلامات الحاوية فتختبر جوانب عناصر داخل الوثيقة، مثل أبعاد الصندوق الذي يستضيف المكوّن. يمكن للبطاقة نفسها أن تظهر مرتين في الصفحة؛ إحداهما في مساحة عريضة والأخرى في هامش ضيق. لكل نسخة عنوان مختلف، ولو اشتركتا في النافذة نفسها.

يبدأ الحل بتعيين سلف مؤهل بواسطة container-type. يضع المؤلف قواعد تحت @container، فتعمل على العناصر التابعة عندما يطابق ذلك السلف شرط الحجم. في المكان الواسع تقف الصورة والنص جنباً إلى جنب؛ وفي المكان الضيق يترتبان رأسياً. يختار الموقع موضع البطاقة، ويقرأ المتصفح أبعاد المكان المختار. صار للمكوّن معيار محلي بدلاً من تعليمات عامة تصف الشاشة كلها.

الحد الفاصل مهم للحساب. لو تحدد عرض الحاوية بأبنائها، ثم قرر الأبناء ترتيبهم بسؤال الحاوية عن عرضها، دار القياس في حلقة. عرض W3C في 2021 حول بنية CSS شرح ضرورة تعريف حاويات الاستعلام وضبط اعتماد أبعادها على محتواها حيث يلزم. هذا القيد يمنح المتصفح قياساً مستقراً تستطيع العناصر التابعة أن تبني عليه مظهرها.

قدمت مسودة العمل في 18 أغسطس 2022 مثالاً مباشراً: مكوّن وسائط ينتقل بين ترتيب رأسي وآخر أفقي بحسب حجم حاويته في المتن أو في العمود الجانبي. تسمح container-type: inline-size باستعلام البعد في اتجاه السطر، ويمكن لاسم الحاوية أن يدل @container على السلف المطلوب. عندها تُطبق الأنماط على العناصر التابعة لذلك السلف حسب الشرط الذي تحقق هناك.

تساعد وحدات مثل cqw وcqi على ربط الأطوال بعرض الحاوية أو بعدها في اتجاه السطر. تتحرك التفاصيل مع البطاقة من غرفة إلى أخرى. وقد جمع إعلان فريق CSS في W3C عام 2022 بين الاحتواء في اتجاه السطر، ووحدات الحاوية، وقاعدة الاستعلام بوصفها أدوات لهذه المهمة.

وخضعت الصياغة نفسها للتفصيل. استكشفت مسودة 2021 أنواعاً منها block-size وstate؛ أزالت نسخة 2022 خيار block-size ذي المحور الواحد وعدلت القيم الأولية والاختصارات. يوثق سجل W3C للنشر مرحلتي ديسمبر 2021 وأغسطس 2022. الفكرة واحدة طوال الطريق: أن يعرف المكوّن قياس المساحة التي تحتويه، ثم يختار ترتيبه على هذا الأساس.

ظلت شاشة الحاسوب كبيرة، وظل العمود الجانبي صغيراً. الجديد أن CSS استطاع سماع شكوى البطاقة من العمود نفسه. لم تعد تحتاج إلى التظاهر بأن عرض الشاشة كلها متاح لها.