**Container Queries** هي من أكثر الميزات المُطلوبة في تاريخ CSS — أُضيفت رسمياً في عام 2023 وتدعمها كل المتصفحات الحديثة.
**المشكلة مع media queries:** media queries تستعلم عن عرض **النافذة**، لكن المكوّن لا يعرف كم مساحة لديه — يعتمد على حاويته.
**الحل: Container Queries** تستعلم عن عرض الحاوية المباشرة للمكوّن.
**الخطوات:** 1. عرّف الحاوية: `container-type: inline-size;` (أو `size` لكليهما) 2. أختياراً: أعطِها اسماً: `container-name: card;` 3. استعلم داخل المكوّن: `@container (min-width: 400px) { ... }`
**القيم:** - `inline-size` — يستعلم عن العرض فقط (الأكثر استخداماً) - `size` — يستعلم عن العرض والارتفاع - `normal` — لا استعلام (الافتراضي)
| 1 | /* الحاوية */ |
| 2 | .card-wrapper { |
| 3 | container-type: inline-size; |
| 4 | container-name: card; |
| 5 | } |
| 6 | |
| 7 | /* المكوّن يتكيف مع حاويته */ |
| 8 | @container card (min-width: 400px) { |
| 9 | .card { flex-direction: row; } |
| 10 | .card-image { width: 40%; } |
| 11 | } |
مثال 1: بطاقة تتكيف مع مكانها
| 1 | /* الحاوية */ |
| 2 | .card-container { |
| 3 | container-type: inline-size; |
| 4 | } |
| 5 | |
| 6 | /* المكوّن الأساسي - موبايل */ |
| 7 | .product-card { |
| 8 | display: flex; |
| 9 | flex-direction: column; |
| 10 | gap: 12px; |
| 11 | } |
| 12 | |
| 13 | /* بطاقة في سياق واسع */ |
| 14 | @container (min-width: 480px) { |
| 15 | .product-card { |
| 16 | flex-direction: row; |
| 17 | align-items: center; |
| 18 | } |
| 19 | .product-card .image { width: 160px; flex-shrink: 0; } |
| 20 | } |
| 21 | |
| 22 | /* بطاقة في سياق ضيق جداً */ |
| 23 | @container (max-width: 280px) { |
| 24 | .product-card .actions { display: none; } |
| 25 | .product-card .description { font-size: 0.8rem; } |
| 26 | } |