قواعد @container ونقاط التوقف
اكتب قواعد @container لتطبيق الأنماط عندما تصل الحاوية إلى أبعاد محددة.
قواعد @container ونقاط التوقف درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
صيغة قاعدة @container
تُعدّ @container قاعدة at-rule التي تطبّق الأنماط عندما تستوفي الحاوية شروطًا معينة للحجم. وتشبه صيغتها صيغة استعلامات الوسائط:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
استعلامات الحاويات المسمّاة
استهدفوا حاوية مسمّاة محددة:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
استعلامات الحاويات بأقصى عرض
استخدم max-width لتطبيق الأنماط على الحاويات الأصغر:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
استعلامات الحاوية ذات النطاق
يدعم بناء جملة استعلامات الحاوية الحديث النطاقات:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
مكوّن بطاقة متكيف
مكوّن بطاقة يتكيف استنادًا إلى عرض الحاوية التي يوجد فيها:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
استعلامات الحاوية المتداخلة
يمكن تداخل استعلامات الحاوية. ويشير الاستعلام الداخلي، افتراضيًا، إلى أقرب حاوية سلف.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
نقاط توقف استعلامات الحاوية
على خلاف نقاط توقف نافذة العرض، ينبغي اختيار نقاط توقف الحاوية استنادًا إلى الوقت الذي يحتاج فيه تخطيط المكوّن إلى التغيير، لا إلى أحجام أجهزة اعتباطية. ابدأ بالحد الأدنى والأقصى لعرض محتوى المكوّن.
الطباعة في الحاويات
اضبط الطباعة لتناسب الحاويات الصغيرة:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
استعلام الحاوية لتخطيط الشبكة
غيّر الشبكة الداخلية للمكوّن عند نقاط توقف الحاوية:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
استعلامات الأنماط (ما يتجاوز الحجم)
تدعم استعلامات الحاوية أيضًا استعلامات الأنماط التي تتحقق من قيم الخصائص المخصصة المحسوبة. يتيح ذلك إنشاء متغيرات للمكوّنات تتحكم فيها متغيرات CSS من دون فئات إضافية:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
تحقق سريع
ما الذي يستهدفه @container (min-width: 500px)؟
خلاصة
تطبّق قواعد @container الأنماط على العناصر الموجودة داخل حاوية عندما تستوفي الحاوية شروط الحجم. استخدم الحاويات المسماة لاستهداف أسلاف محددين. ينبغي أن تستند نقاط توقف الحاوية إلى احتياجات المحتوى، لا إلى أحجام الأجهزة. وتوسّع استعلامات الأنماط استعلامات الحاوية لتتحقق من قيم متغيرات CSS، ما يتيح إنشاء متغيرات قوية للمكوّنات بطريقة تصريحية.
الأسئلة الشائعة
هل درس «قواعد @container ونقاط التوقف» مجاني؟
نعم — نص درس «قواعد @container ونقاط التوقف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «قواعد @container ونقاط التوقف»؟
اكتب قواعد @container لتطبيق الأنماط عندما تصل الحاوية إلى أبعاد محددة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «قواعد @container ونقاط التوقف»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- container-type وcontainer-name
- قواعد @container ونقاط التوقف
- وحدات استعلام الحاوية: cqw وcqh
- استعلامات الحاويات مقابل استعلامات الوسائط