يجب أولاً تسجيل الحاوية ويمكن الاستعلام عنها.

تسجيل حاوية

استخدم محددًا لتسجيل الحاوية.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

أو استخدم خيار الاختصار

.parent {
    container: myname / inline-size;
    ... other code
}

في وقت التسجيل، يجب تحديد تفاصيلين - النوع والاسم.

نوع الحاوية

نوع الحاوية: ...

• مقاس
• الحجم المضمّن
• طبيعي

اسم الحاوية

اسم الحاوية: ؛

يحدد الحاوية بشكل مفيد بشكل خاص إذا كان بإمكانك سيناريو حاويات متعددة.

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

يبدأ استعلام الحاوية بقاعدة @container متبوعة باسم الحاوية واستعلام الميزة.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

استعلام حاوية لتعيين حجم الخط لـ div داخل حاوية myname على 3em إذا كان عرض الميزة أكبر من 30ch.

ميزات للاستعلام

الاستعلام عن الحجم...

• عرض
• ارتفاع
• الحجم المضمّن
• حجم الكتلة
• نسبة العرض إلى الارتفاع
• توجيه

استعلام النمط...

• النمط (الخاصية: القيمة)

الخاصية المراد التحقق من قيمتها.

على سبيل المثال

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

استعلام الحاوية لتطبيق الأنماط إذا كان لون خلفية اسم الحاوية أزرق

الاستعلامات المركبة

و، أو لا يمكن استخدامها لإنشاء استعلامات مركبة

على سبيل المثال

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

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

يمكن دمج استعلامات الحاوية ضمن استعلامات حاوية أخرى.

على سبيل المثال

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }