09:30
\n\n
\n Container Queries in Production
\nCards that adapt to the slot they're in, not the screen.
\nتستخدم Waypoint بطاقة الجلسة نفسها في ثلاثة أماكن: شبكة الجدول الرئيسية، وشريط جانبي ضيّق بعنوان «Up next»، وواجهة عريضة بكامل العرض للـ keynote. الـ media query لا تستطيع إلا أن تسأل «ما عرض الشاشة؟»، والشاشة بالعرض نفسه في الحالات الثلاث. فحصلت البطاقة في الشريط الجانبي على التخطيط العريض، مضغوطًا في 280px، إلى أن أضاف أحدهم تجاوزًا .sidebar .session-card، ثم تجاوزًا .hero .session-card، وهكذا.
لا ينبغي أن تهتم البطاقة بمكانها. ينبغي أن تهتم بالمساحة المتاحة لها. والـ container queries (استعلامات الحاوية) تتيح لها أن تسأل عن ذلك بالضبط.
\nخطوتان. الأولى أن تعلن أيّ عنصر هو الحاوية، أي الخانة التي تجلس فيها البطاقة:
\n.slot {\n container: session / inline-size;\n}هذا الاختصار يضبط container-name: session وcontainer-type: inline-size. النوع يخبر المتصفّح أنك ستستعلم عن الحجم الأفقي (inline size) لهذا العنصر، أي عرضه في الكتابة الأفقية، لذا يجب أن يستطيع حساب هذا العرض دون النظر إلى المحتوى بداخله.
والثانية أن تكتب تخطيط البطاقة على شكل استعلام عن تلك الحاوية:
\n.session-card {\n display: block;\n}\n\n@container session (width >= 400px) {\n .session-card {\n display: grid;\n grid-template-columns: 6rem 1fr;\n gap: 1rem;\n }\n}الآن تتراصّ البطاقة عموديًا في الشريط الجانبي بعرض 280px، وتنتقل إلى عمودين في الشبكة بعرض 640px، دون أن تعرف شيئًا عن أيٍّ منهما. الاسم اختياري؛ و@container (width >= 400px) بلا اسم تستخدم أقرب سلف له نوع حاوية حجم. والأسماء تفيد حين تتداخل الحاويات وتريد تخطّي إحداها.
لا يستطيع العنصر أن يستعلم عن نفسه. الاستعلام يبحث عن حاوية بين الأسلاف، لذا فإن container-type على .session-card مع @container { .session-card { … } } لا تفعل شيئًا للبطاقة نفسها. ضع الحاوية على غلاف.
الاحتواء يغيّر طريقة تحديد حجم الحاوية. احتواء inline-size يعني أن عرض الحاوية لا يمكن أن يعتمد على أبنائها؛ وإلا لاستطاع الاستعلام أن يغيّر المحتوى، فيتغيّر العرض، فيتغيّر الاستعلام، إلى ما لا نهاية.
داخل الحاوية تحصل على وحدات نسبية إليها: cqi تساوي 1% من الحجم الأفقي للحاوية، وcqb تساوي 1% من حجمها الرأسي (block size)، وcqmin/cqmax الأصغر أو الأكبر بينهما. إنها تجعل الـ component يتدرّج بسلاسة، لا عند نقاط التحوّل فقط:
.session-card h3 {\n font-size: clamp(1rem, 0.75rem + 2cqi, 1.5rem);\n}في الشريط الجانبي بعرض 280px يبقى العنوان قرب 1rem؛ وفي خانة بعرض 640px يكبر نحو 1.5rem. وإن لم يكن أيّ سلف حاوية حجم، ترجع وحدات الحاوية إلى وحدات الـ viewport الصغيرة، فلا تنكسر أبدًا.
\nالحجم ليس الشيء الوحيد الذي قد تستجيب له البطاقة. بطاقة الـ keynote في الواجهة الرئيسية variant (شكل مختلف)، واستعلامات نمط الحاوية تتيح للعنصر الأب أن يعلن ذلك عبر custom property:
\n.hero { --variant: featured; }\n\n@container style(--variant: featured) {\n .session-card {\n border-inline-start: 6px solid #6d28d9;\n }\n}لا تحتاج إلى container-type هنا: كل عنصر حاوية نمط افتراضيًا، فيفحص الاستعلام قيمة --variant المحسوبة على أقرب سلف. واستعلامات النمط تعمل اليوم مع الـ custom properties فقط؛ أما الاستعلام عن الخصائص العادية مثل style(display: grid) فغير مدعوم في أيّ مكان بعد.
في التمرين تستخدم البطاقة media query، فتحصل على التخطيط الخاطئ في خانة واحدة على الأقل. حوّل .slot إلى حاوية مسمّاة، وانقل التخطيط إلى container query عند 400px، وأضف استعلام نمط للشكل المميّز. تغيّر الفحوصات عرض الخانة وتضبط --variant عليها لترى استجابة البطاقة. وبهذا يُغلق قسم التخطيط؛ وبعده ستجعل الخطوط والمسافات تتدرّج بمرونة عبر كل أحجام الخانات هذه.
container-type: inline-size تحوّل العنصر إلى حاوية (container)، و@container (width >= 400px) تنسّق العناصر داخله بحسب عرض ذلك العنصر، لا عرض الـ viewport.","لا يستطيع العنصر أن يستعلم عن نفسه؛ ضع container-type على غلاف واكتب الاستعلام للعناصر التي بداخله.","احتواء الحجم الأفقي (inline-size containment) يعني أن عرض الحاوية لا يمكن أن يأتي من محتواها، لذا تنهار الحاوية الموضوعة في سياق يتقلّص على محتواه ما لم يعطها شيءٌ ما عرضًا.","وحدات الحاوية مثل cqi (1% من الحجم الأفقي للحاوية) تتيح للخطوط والمسافات أن تتدرّج مع الـ component.","استعلامات النمط على الـ custom properties، مثل @container style(--variant: featured)، دخلت Baseline في مايو 2026؛ أما استعلامات الحجم فضمن Baseline منذ 2023."],"further":[{"title":"Container size and style queries (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries"},{"title":"@container (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container"},{"title":"Container queries (web.dev Learn CSS)","url":"https://web.dev/learn/css/container-queries"}],"quiz":[{"q":"لماذا لا تنطبق هذه القاعدة أبدًا؟
\n.session-card { container-type: inline-size; }\n@container (width >= 400px) {\n .session-card { display: grid; }\n}@container تحتاج إلى اسم حاوية لتعمل.","why":"الأسماء اختيارية. الاستعلام بلا اسم يستخدم أقرب حاوية من الأسلاف."},{"text":"يجب أن يستخدم الاستعلام min-width بدل صيغة المدى.","why":"الـ container queries تدعم صيغة المدى (width >= 400px) في كل متصفّح يدعمها."},{"text":"inline-size لا تعمل إلا على حاويات grid.","why":"أيّ عنصر يمكن أن يكون حاوية حجم، أيًّا كان نوع الـ display فيه."},{"text":"البطاقة تستعلم عن نفسها، لكن الـ container query لا تنسّق إلا العناصر داخل الحاوية.","why":"صحيح. البطاقة تبحث عن حاوية بين أسلافها فلا تجد. ضع container-type على الغلاف (الخانة) ونسّق البطاقة من داخل الاستعلام."}],"answer":3},{"q":"وضعت container-type: inline-size على عنصر flex بلا عرض مضبوط، فانهار إلى عرض صفر. لماذا؟
flex: 1 أو عرضًا، أو ضع الحاوية على عنصر يحدّد حجمَه أبوه."},{"text":"الـ container queries لا تعمل داخل flexbox.","why":"إنها تعمل في كل مكان؛ المشكلة في كيفية حصول الحاوية نفسها على حجمها."},{"text":"يخفي المتصفّح الحاويات حتى يطابق أحد الاستعلامات.","why":"الحاويات تُرسم بشكل طبيعي سواء طابق أيّ استعلام أم لا."}],"answer":0},{"q":"لعنوان بطاقة font-size: clamp(1rem, 4cqi, 1.5rem). إلامَ تشير 4cqi؟
4vw. وحدات cqi تُحسب نسبةً إلى أقرب حاوية، لا إلى الـ viewport."},{"text":"4% من الحجم الأفقي لأقرب حاوية حجم.","why":"صحيح. في خانة عرضها 400px تساوي 4cqi 16px؛ وفي خانة عرضها 600px تساوي 24px (وتُحدّ عند 1.5rem)."},{"text":"4% من عرض العنوان نفسه.","why":"لا يستطيع العنصر قياس نفسه بهذه الطريقة؛ وحدات الحاوية تنظر دائمًا إلى حاوية من الأسلاف."},{"text":"أربعة أضعاف حجم خط البطاقة.","why":"مضاعفات حجم الخط تُكتب 4em؛ وcqi لا علاقة لها بحجم الخط."}],"answer":1},{"q":"أيّ استعلام يطبّق الأنماط حين يضبط العنصر الأب --variant: featured؟
@media (--variant: featured)","why":"الـ media queries تختبر الجهاز والـ viewport؛ ولا تستطيع قراءة الـ custom properties."},{"text":"@supports (--variant: featured)","why":"@supports تختبر ما إذا كان المتصفّح يفهم تصريحًا ما، لا القيمة التي يحملها عنصر."},{"text":"@container style(--variant: featured)","why":"صحيح. استعلامات النمط تختبر القيمة المحسوبة لـ custom property على أقرب حاوية، وكل عنصر حاوية نمط افتراضيًا."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"09:30
\nCards that adapt to the slot they're in, not the screen.
\n09:30
\nCards that adapt to the slot they're in, not the screen.
\nتنتقل البطاقة إلى عمودين باستخدام media query، فتقيس الشاشة بدل خانتها. تضبط الفحوصات عرض .slot بين 300px و500px.
.slot حاوية حجم اسمها session تتتبّع حجمها الأفقي (inline size).session بعرض 400px أو أكثر، تصبح البطاقة شبكة من عمودين؛ وتحت ذلك تبقى متراصّة.--variant بقيمة featured، يصبح حدّ البطاقة في جهة البداية (inline-start) بلون #6d28d9.container: name / type تضبط الاسم والنوع معًا في تصريح واحد.","يمكن نقل قواعد الـ grid كما هي إلى @container session (width >= 400px) { … }.","للشكل المميّز: @container style(--variant: featured) { .session-card { border-inline-start-color: #6d28d9; } }."],"explanation":"container: session / inline-size تجعل الخانة حاوية حجم مسمّاة، فتقارن @container session (width >= 400px) عرض الخانة بـ 400px أيًّا كان الـ viewport. ولا يمكن أن تكون البطاقة نفسها هي الحاوية، لأن الاستعلام لا ينسّق إلا العناصر داخل الحاوية التي يقيسها. واستعلام النمط لا يحتاج إلى نوع حاوية: كل عنصر حاوية نمط، والبطاقة تلتقط قيمة --variant من خانتها الأب. وفي المتصفّحات التي لا تدعم استعلامات النمط، تحتفظ البطاقة ببساطة بحدّها الرمادي الافتراضي.