ما هي استراتيجية Mobile-First للتجاوب مع الشاشات، وكيف تندرج Container Queries فيها؟

Question

Accepted Answer

**Mobile-first** تعني كتابة أنماطك الأساسية للشاشة **الأصغر**، ثم *إضافة* التعقيد للشاشات الأكبر باستخدام `min-width` media queries — بدلاً من البدء من سطح المكتب وإزالة الأشياء.

## Mobile-first في الممارسة

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**لماذا mobile-first يفوز:** CSS الأساسي يبقى بسيطاً (الهاتف يحصل فقط على ما يحتاجه — جيد للأداء على الأجهزة الأضعف)، وأنت *تضيف* التعقيد، وهذا أسهل في الفهم من تجاوز أو إزالة الأشياء. كما أنه يتطابق مع كيفية انسيابية المحتوى بشكل طبيعي من عمود واحد إلى عدة أعمدة.

## قيود media queries

media queries تستجيب لـ **viewport** — النافذة بأكملها. لكن مكون قابل لإعادة الاستخدام (مثل بطاقة) قد يظهر في منطقة رئيسية واسعة *أو* شريط جانبي ضيق على نفس الصفحة. عرض viewport لا يمكنه أن يخبرك بمقدار المساحة التي يملكها *المكون* بالفعل.

## Container queries تحل هذا

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

الآن نفس البطاقة تتبدل تلقائياً إلى تخطيط أفقي كلما كان *حاويتها* ≥400px — سواء كان ذلك لأن الشاشة كبيرة أو لأنها في عمود واسع. يصبح المكون حقاً **مستقلاً عن السياق وقابلاً لإعادة الاستخدام**.

## يتكاملان معاً

- **Media queries** — تخطيط على مستوى الصفحة، نقاط فاصلة عامة، تفضيلات المستخدم (الوضع الداكن، تقليل الحركة).
- **Container queries** — الاستجابة على مستوى المكون للمكونات القابلة لإعادة الاستخدام.

## لماذا يهم

Mobile-first يحافظ على CSS سريع الاستجابة قليل الحجم وسهل الصيانة.

Container queries هي قفزة كبيرة للأمام: تسمح للمكونات بالاستجابة للمساحة *المتاحة* الخاصة بها، وهذا بالضبط ما تحتاجه في معمارية قائمة على المكونات (نظم التصميم، البطاقات/الأدوات القابلة لإعادة الاستخدام) حيث يظهر نفس المكون في سياقات عديدة.