جاري التحميل...

استعلامات الحاوية في CSS

التداخل (Nesting) جمع محدّدات المكوّن في مكان واحد. استعلامات الوسائط ما زالت تراقب نافذة العرض. استعلامات الحاوية تطرح سؤالاً آخر: ما عرض صندوق الأب هذا؟ هكذا يبقى بطاقة المنتج مضغوطة في شريط جانبي ضيق وتتسع في العمود الرئيسي — حتى لو لم يتغيّر حجم نافذة المتصفّح.

لماذا لا يكفي viewport

كثيراً ما توضَع نفس المكوّن في خانات بعرض مختلف: شريط جانبي بعرض 16rem ومنطقة رئيسية مرنة. الخانتان تشتركان في عرض viewport واحد، فيُفعَّل @media (min-width: …) بنفس الشكل لكليهما. تحتاج أن تعتمد الأنماط على الحاوية التي تلف البطاقة، لا على الشاشة كلها.

إنشاء سياق احتواء للقياس

اختر الأب الذي يجب أن يُبلّغ عن حجمه. ضع container-type — غالباً inline-size لتستطيع الاستعلام عن الحجم السطري للأب (العرض في الكتابة الأفقية) دون فرض احتواء كامل على المحورين:

Turn a rail into a size container

css

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
padding: 1rem;
background: #f8fafc;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
padding: 1.25rem;
}

بدون container-type، ليس لـ @container ما يقيسه بثقة. container-name اختياري لكنه مفيد عندما يكون عدة أسلاف حاويات — يمكنك التوجيه إلى واحد بالاسم.

الاستعلام عبر `@container`

بعد هذا الإعداد، ضع القواعد داخل @container مع شرط حجم. تتفاعل العناصر النسلية عندما يطابق ذلك الصندوق الشرط — لا عندما يتغيّر viewport وحده:

Product card reacts to its parent width

css

.product-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}

.product-card .media {
aspect-ratio: 16 / 10;
border-radius: 0.5rem;
background: #cbd5e1;
}

.product-card .meta {
font-size: 0.875rem;
color: #64748b;
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
align-items: center;
}

.product-card .title {
font-size: 1.25rem;
}
}

عندما تعيش .product-card داخل .rail ضيق، يبقى التكديس عمودياً. ضع نفس HTML في .stage عريضاً فيُفتح تخطيط عمودين — HTML واحد، viewport واحد، عرض حاوية مختلف.

حاويات مُسمّاة

إذا أربكك أي صندوق يُستعلم عنه مع تداخل الحاويات، مرّر الاسم بعد @container:

Target a named containment context

css

@container stage (min-width: 36rem) {
.product-card {
grid-template-columns: 12rem 1fr auto;
gap: 1.25rem;
}

.product-card .buy {
justify-self: end;
}
}

@container rail (max-width: 18rem) {
.product-card .meta {
display: none;
}
}

@container stage (…) يهتم فقط بالسلف المسمّى stage. هكذا لا تتصادم قواعد الشريط الضيقة مع قواعد المنطقة الواسعة عندما يلفّان نفس البنية.

وحدات استعلام الحاوية

بمجرد وجود سياق احتواء، وحدات مثل cqi (1% من الحجم السطري لحاوية الاستعلام) وcqw (1% من عرضها) تجعل الخط والمسافات تتبع الأب، لا viewport (vi / vw):

Type that tracks the container

css

.product-card .title {
font-size: clamp(1rem, 0.85rem + 2.5cqi, 1.5rem);
}

.product-card {
padding: clamp(0.75rem, 2.5cqi, 1.5rem);
}

اجمعها مع var() وclamp() من دروس Modern Toolkit السابقة. وحدات الحاوية تقيس سياق الاحتواء المستخدم في الاستعلام — مثالية للودجات القابلة لإعادة الاستخدام.

الحاوية مقابل الوسائط — من يقوم بأي مهمة؟

📊 استعلامات الحاوية مقابل استعلامات الوسائط

السؤال الذي تطرحه	الأفضل	الأداة المعتادة
ما عرض viewport المتصفّح؟	هيكل الصفحة، التنقل، تخطيط متعدد الأعمدة	`@media (min-width: …)`
ما عرض هذا الأب حول المكوّن؟	بطاقات، ودجات، تضمينات في خانات غير متساوية	`@container (min-width: …)` بعد `container-type`
هل أحتاج الاثنين؟	غالباً نعم	MQ للصفحة؛ CQ للمكوّن داخل الخانة

خانتاان، مكوّن واحد

رسم بسيط يبيّن الفائدة — حاويتان، صنف بطاقة واحد:

Sidebar rail and main stage share one card

css

.page {
display: flex;
gap: 1rem;
align-items: start;
}

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
}

/* Same .product-card class in both slots — @container rules above decide layout */

لا حاجة لتفرّع .product-card--sidebar و.product-card--main فقط لعكس عرض الخانة. الخانة تُبلّغ عن حجمها؛ البطاقة تستمع.

جمع وسائط الصفحة مع حاويات المكوّن

احتفظ باستعلامات viewport لقرارات الصفحة (طيّ تنقل الموقع، تحويل الهيكل إلى عمود واحد). واستعلامات الحاوية لقرارات المكوّن داخل أي خانة أعطتها الصفحة:

Viewport for the page, container for the card

css

@media (max-width: 40rem) {
.page {
flex-direction: column;
}

.rail {
width: auto;
}
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
}
}

على هاتف صغير تتكدّس الصفحة؛ على سطح مكتب عريض قد يبقى الشريط ضيقاً والمنطقة الرئيسية واسعة — فقط استعلامات الحاوية تعبّر عن هذا الفارق بوضوح.

جرّب بنفسك

أضف container-type: inline-size على غلاف حول البطاقة؛ تأكد في DevTools من ظهور سياق احتواء.
اكتب @container (min-width: 24rem) لتحويل البطاقة من تكديس إلى عمودين.
ضع container-name: panel واستهدف بـ @container panel (min-width: 30rem).
حدّد حجم عنوان بـ cqi وغيّر عرض الأب فقط (لا النافذة) لترى الخط يتحرك.
اترك @media واحداً على هيكل الصفحة؛ لا تكرّر نفس المنطق داخل البطاقة.

أخطاء شائعة

كتابة @container دون container-type على سلف — لا شيء مفيد للقياس
استبدال كل استعلامات الوسائط باستعلامات الحاوية — هيكل الصفحة ما زال لـ @media
تداخل ثلاث حاويات والحيرة أي عرض «يفوز» — سمِّها واستهدف صراحةً
نسخ نقاط توقف viewport (48rem) أعمى في كل ودجت — اضبط على الخانة لا على دليل الأجهزة
الخلط بين التداخل (&، محدّدات متداخلة) والاحتواء — التداخل ينظّم المحدّدات؛ استعلامات الحاوية تقيس الصناديق

ملخص

استعلامات الحاوية تنسّق من حجم الأب، لا من viewport وحده
ضع container-type (غالباً inline-size)؛ container-name اختياري للوضوح
استخدم @container (min-width: …) / @container name (…) لإعادة تنسيق النسل
استخدم cqi / cqw عندما يجب أن تتبع الأطوال الحاوية
التالي في Modern Toolkit: استعلامات الميزات (@supports) — ربط الأنماط بقدرة المتصفّح

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة