مقدمة
زمان قبل 2010، كان مصممي الويب يقدروا يعملوا مواقع تناسب الديسكتوب بس. لحد ما جه Ethan Marcotte وقدم لنا مفهوم الـ Responsive Web Design (RWD)، واللي عرفه موقع MDN بأنه طريقة لتصميم الويب عشان يناسب كل الأجهزة. وده خلى الـ media queries عنصر أساسي في الـ RWD.
لكن دلوقتي في تحول ناحية حاجة جديدة عرفتها Jen Simmons بـ Intrinsic Web Design – اللي بتركز على عمل مكونات بتفهم السياق اللي هي فيه. وContainer Queries هي اللي بتخلي ده ممكن.
مقارنة بين Media Queries و Container Queries في CSS
الـ web development بيتطور بسرعة، وعشان تواكب التطورات دي لازم تكون فاهم الأدوات الجديدة زي Container Queries وكمان الأدوات التقليدية زي Media Queries. في البوست دا، هنوضح بالتفصيل استخدامات كل أداة، المزايا والعيوب، وازاي تقدر تستفيد منها بأفضل شكل في مشاريعك.
Media Queries
Media Queries هي واحدة من أدوات CSS الأساسية اللي بنستخدمها عشان نخلي التصميم responsive ويتغير بناءً على حجم الشاشة أو نوع الجهاز. لما نستخدم Media Queries، بنحدد نقاط معينة (breakpoints) اللي عندها التصميم يتغير.
مزايا Media Queries
- بتسمح لك تعمل تصميم يناسب كل أحجام الشاشات والأجهزة.
- أغلب مصممي الويب بيكونوا عارفينها ومتعودين عليها.
عيوب Media Queries
- مش بتديك تحكم كبير في تعديل العناصر الداخلية لوحدها.
- لو عندك تصميمات معقدة، ممكن تلاقي نفسك مضطر تكتب كود كتير عشان تغطي كل الحالات.
مثال على Media Queries
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
نيجي بقي لل Container Queries
جديدة في CSS وبتديك إمكانية تغير التصميم بناءً على حجم الكونتينر اللي العنصر جواه، مش حجم الشاشة. ده بيساعد في تصميم مكونات (components) أكثر مرونة واستقلالية - حلو دا عشان Reusability.
- بتقدر تغير التصميم بناءً على المساحة المتاحة للعنصر بشكل مستقل.
- ممتازة لتصميمات المكونات اللي بتكون جزء من تصميم أكبر.
لكن Container Queries لسه جديدة ومش مدعومة في كل المتصفحات، وبتحتاج شوية وقت عشان تتعود عليها - شوف بقالك قد إيه بتكتب Media Queries 😄.
مثال بالكود
.header {
container: mysite / inline-size;
}
@container mysite (min-width: 600px) {
.maincard {
grid-template-columns: 1fr 1fr;
}
.item {
background-color: green;
}
}
Syntax الخاص بـ Container Queries
container: [name] / [type];
- [name]: اسم الكونتينر اللي هتستخدمه في الـ Container Queries.
- [type]: نوع القياس اللي هتستخدمه (مثلاً، inline-size لعرض الكونتينر أو block-size لطول الكونتينر).
inline-size vs block-size
خاصية inline-size في CSS بتحدد الحجم الأفقي أو الرأسي لكتلة العنصر بناءً على نمط الكتابة المستخدم. لو نمط الكتابة بيكون من اليسار لليمين (مثل اللغة الإنجليزية)، فالـ inline-size هتكون العرض. ولو نمط الكتابة بيكون من الأعلى للأسفل (مثل اللغة الصينية التقليدية)، فالـ inline-size هتكون الطول.
خاصية block-size في CSS بتحدد الحجم الرأسي أو الأفقي لكتلة العنصر بناءً على نمط الكتابة المستخدم. لو نمط الكتابة بيكون من اليسار لليمين، فالـ block-size هتكون الطول. ولو نمط الكتابة بيكون من الأعلى للأسفل، فالـ block-size هتكون العرض.
معلش دي شوية حاجات لازم توضح في المثال ده، احنا عرفنا كونتينر اسمه mysite ونوع القياس هو inline-size.
لما عرض الكونتينر يبقى 600 بيكسل أو أكتر، هتتغير خصائص العناصر جوا الكونتينر.
الميزة بقي في ال Container Queries ال Modularity and Flexibility يعني كمثال علي دا تخيل عندك Card component اللي ممكن تستخدمه في أماكن مختلفة في الموقع. باستخدام Container Queries، تقدر تخلي التصميم بتاع الكارد يتغير بناءً على حجم الكونتينر اللي هو فيه. سهولة إعادة الاستخدام، المكونات اللي بتستخدم Container Queries بتكون سهلة في إعادة الاستخدام في مشاريع مختلفة أو في أجزاء مختلفة من نفس المشروع.
إمتى تستخدم Media Queries و Container Queries؟
تستخدم Media Queries لما تكون بتشتغل على تصميم استجابي تقليدي وعاوز تغييرات بناءً على حجم الشاشة
Container Queries: لو عندك تصميم معقد فيه مكونات كتير بأحجام مختلفة عاوز تعدلها بشكل مستقل.