استعلامات الحاويات @container

الصياغة

.slot { container-type: inline-size; }

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

.card h2 { font-size: clamp(1rem, 5cqi, 2rem); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .slot { container-type: inline-size; border: 1px dashed #94a3b8; padding: 8px; resize: horizontal; overflow: auto; width: 500px; max-width: 100%; }
  .card { background: #ede9fe; padding: 10px; border-radius: 8px; }
  @container (width < 350px) { .card { background: #fee2e2; } }
</style>
<div class="slot"><div class="card">قلّص عرض هذا الصندوق (اسحب من الزاوية) لترى تغيّر اللون حسب عرض الحاوية لا الشاشة.</div></div>

أهم القيم

💡 نصائح عملية

• استخدمهما معًا: media query لتخطيط الصفحة العام، وcontainer query لسلوك المكوّن الداخلي
• container-type: inline-size كافٍ في أغلب الحالات؛ size يفرض احتواءً أوسع قد يكسر التخطيط

⚠️ أخطاء شائعة

• كتابة @container بلا container-type على أب → الاستعلام يُتجاهَل بصمت
• الاستعلام عن عرض العنصر من داخل نفسه بدل عرض أبيه

خصائص ذات صلة