وداعاً لمشاكل الـ Media Queries: اكتشف قوة الـ Container Queries في CSS

لو كنت مبرمج واجهات أمامية (Frontend Developer)، أكيد عانيت قبل كدة من "كابوس" الـ Media Queries. بتعمل كومبوننت (Component) شكله زي الفل في الصفحة الرئيسية، ولما تروح تحطه في الـ Sidebar أو في مساحة ضيقة، تلاقي التصميم باظ، والخطوط دخلت في بعضها، والـ Layout قلب زحمة. إحنا متعودين دايماً نبني تصميماتنا بناءً على عرض الشاشة (Viewport)، لكن الحقيقة إن الكومبوننت مش لازم يهتم بالشاشة، هو لازم يهتم بالمساحة المتاحة ليه جوه الـ Container بتاعه. هنا بيجي دور الـ Container Queries اللي يعتبر نقلة نوعية في عالم الـ CSS.

يعني إيه أصلاً Container Queries؟

ببساطة، الـ Container Queries بتخليك تعمل تصميم مرن (Responsive Design) للمكونات بناءً على حجم "الحاوية" (Container) اللي هي جواها، مش بناءً على حجم الشاشة. يعني لو عندك "كارت" (Card) معين، تقدر تخليه يعرض الصورة جنب النص لو الـ Container بتاعه واسع، ويحولهم فوق بعض لو الـ Container بقى ضيق، بغض النظر الشاشة موبايل ولا ديسكتوب.

خطوات تفعيل الخاصية: الـ Container Type

عشان نستخدم الميزة دي، محتاجين نحدد العنصر الأب (Parent) ونقول للمتصفح: "يا معلم، العنصر ده هيكون هو الـ Container بتاعي". ده بيتم عن طريق خاصية container-type.

.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
}

هنا إحنا استخدمنا inline-size عشان المتصفح يراقب عرض الـ Container، وادينا له اسم اختياري عشان نقدر ننده عليه بسهولة.

إزاي نكتب الـ Query ونبدأ الشغل؟

بعد ما حددنا الأب، نقدر نستخدم الـ @container عشان نغير خصائص العناصر اللي جواه بناءً على المساحة الحقيقية المتاحة ليها، كأنك بتعمل Media Query بس على مستوى الكومبوننت.

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

في المثال ده، أي كومبوننت كلاس بتاعته .card، لو اتحط جوه حاوية عرضها أكبر من 400 بيكسل، هيتحول تلقائياً لـ Flex Row. لو الحاوية أصغر، هيفضل زي ما هو من غير ما نلمس الشاشة نهائياً.

ليه الـ Container Queries هي المستقبل؟

• إعادة الاستخدام (Reusability): الكومبوننت بقى "مستقل بذاته". تقدر تحطه في أي مكان في الموقع وهيتصرف لوحده.
• نظافة الكود (Clean Code): مش محتاج تقعد تكتب Media Queries معقدة لكل حجم شاشة في ملفات الـ CSS الرئيسية.
• أداء أفضل: المتصفح بيفهم إن التغيير محصور في جزء معين من الصفحة مش محتاج يعيد حسابات الـ Layout للشاشة كلها.

خاتمة: نصيحة من أخ

يا بطل، التكنولوجيا في الـ CSS بتتطور بسرعة، والـ Container Queries بقت مدعومة في كل المتصفحات الحديثة بشكل ممتاز. نصيحتي ليك، بلاش تفضل متمسك بالطرق القديمة لمجرد إنك "متعود عليها". حاول في مشروعك الجاي تكسر القاعدة وتجرب تبني أي كومبوننت معقد باستخدام الـ Container Queries. في الأول الموضوع ممكن يبان غريب، بس بمجرد ما إيدك تاخد عليه، هتكتشف إنك بقيت بتبني واجهات احترافية بجهد أقل بكتير.

ذاكروا الـ Docs، طبقوا بإيديكم، والأهم من ده كله، خلي عندك فضول دايماً تعرف "إيه الجديد" عشان تفضل منافس قوي في سوق العمل. بالتوفيق!