استعلامات الحاويات (Container Queries)

المشكلة التي تحلّها

تعلّمت في درس التصميم المتجاوب أن @media تستعلم عن عرض الشاشة. لكن المكوّن نفسه (بطاقة، شريط جانبي) قد يظهر بعرض 300px داخل شريط جانبي، وبعرض 900px داخل عمود رئيسي — على نفس الشاشة، في نفس الصفحة. @media لا ترى هذا الفرق، لأنها تسأل عن الشاشة لا عن مكان العنصر.

استعلامات الحاويات تسأل السؤال الصحيح: "كم عرض الحاوية التي يعيش بداخلها هذا العنصر؟"

الخطوة 1: عيّن عنصرًا كـ"حاوية"

أي عنصر أب يجب أن يُعلَن صراحة كحاوية queries عبر container-type:

.sidebar-slot {
  container-type: inline-size;   /* استعلم عن العرض فقط — الأكثر استخدامًا */
}

الخطوة 2: استعلم بـ @container

@container (width > 400px) {
  .card { display: flex; gap: 16px; }
}

@container (width <= 400px) {
  .card { display: block; }
}

الآن .card يتغيّر حسب عرض الحاوية .sidebar-slot، بغضّ النظر عن عرض الشاشة نفسها — نفس المكوّن يتصرّف بذكاء في أي مكان تضعه فيه.

تسمية الحاويات (لتفادي التداخل)

عند وجود حاويات متداخلة، سمِّ الحاوية المقصودة صراحة عبر container-name أو اختصار container:

.sidebar-slot {
  container: sidebar / inline-size;   /* الاسم / النوع */
}

@container sidebar (width > 400px) {
  .card { flex-direction: row; }
}

وحدات قياس نسبية للحاوية

مثل vw/vh للشاشة، توجد وحدات مكافئة بالنسبة للحاوية:

.card h2 {
  font-size: clamp(1rem, 5cqi, 2rem);
  /* 5cqi = 5% من عرض الحاوية (inline) */
}

Media Queries مقابل Container Queries

🔑 لا تُلغي @media — الاثنان يتكاملان: @media لتخطيط الصفحة العام (هل نعرض الشريط الجانبي أصلًا؟)، و@container لسلوك المكوّن الداخلي أينما ظهر.

الأخطاء الشائعة

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

خلاصة

container-type: inline-size على الحاوية الأب + @container (width > Npx) على أبنائها = مكوّنات تتكيّف حسب مكانها الفعلي، لا حسب عرض الشاشة فقط. أضف وحدات cqw/cqi لقياسات نسبية للحاوية نفسها.