عند بناء CSS متجاوب، أغلبنا اتعلّم @media كأداة وحيدة للتجاوب. لكن فيه أداة أحدث بتحل مشكلة كانت عالقة لسنين: Container Queries.
Media Queries — بتسأل عن الشاشة
@media بتفحص عرض نافذة المتصفح كلها، وبتطبّق الأنماط بناءً على هيك.
@media (max-width: 600px) {
.card { flex-direction: column; }
}
المشكلة: نفس .card ممكن يظهر جوّا شريط جانبي ضيّق وجوّا عمود رئيسي واسع — بنفس الشاشة بالضبط. @media ما بتفرّق بين الحالتين، لأنها بتسأل عن الشاشة مش عن مكان العنصر.
Container Queries — بتسأل عن الحاوية
@container بتفحص عرض عنصر أب محدَّد بدل الشاشة. أول شي لازم تعلن هالعنصر كحاوية:
.slot {
container-type: inline-size;
}
@container (width > 400px) {
.card { flex-direction: row; }
}
هلق .card بيتصرّف حسب عرض .slot يلي هو جواته — بغض النظر عن عرض الشاشة. نفس المكوّن، بيتصرّف بذكاء أينما حطّيته بالصفحة.
جدول المقارنة
| الجانب | Media Queries | Container Queries |
|---|---|---|
| بتستعلم عن | عرض الشاشة/النافذة | عرض حاوية أب محدَّدة |
| إعداد مسبق | ولا شي، تشتغل مباشرة | لازم container-type عالأب |
| المكوّن بيتصرّف | نفس الشكل بكل مكان بالصفحة | حسب مكانه الفعلي |
| الأنسب لـ | تخطيط الصفحة العام | مكوّنات قابلة لإعادة الاستخدام |
كيف تختار؟
- عم تقرر تخطيط الصفحة كلها (هل نعرض القائمة الجانبية أصلًا على موبايل)؟ → Media Query.
- عندك مكوّن (بطاقة، ويدجت) لازم يتصرف بذكاء بغض النظر وين حطّيته؟ → Container Query.
- الأفضل: استخدمهما مع بعض — media query للقرار الكبير، container query لتفاصيل المكوّن.
الخلاصة
مش منافسة، الاثنان بيكملوا بعض: @media تسأل "شو عرض الشاشة؟"، و@container تسأل "شو عرض المكان يلي أنا فيه؟". إتقانهما مع بعض بيخليك تبني مكوّنات فعلًا قابلة لإعادة الاستخدام بأي مكان بالصفحة.