at koluun @container koluun CSS

التعريف والاستخدام

CSS @container القاعدة تستخدم لتحديد النمط للأعمدة الأخرى بناءً على حجم أو نمط القالب.

سيتم تصفية تصريحات النمط بناءً على الشروط، إذا كانت الشروط صحيحة، سيتم تطبيقها على القالب. عند تغيير حجم أو قيمة النمط للقالب، سيتم تقييم الشروط مرة أخرى.

نصيحة:في CSS، القالب هو عنصر يلتف حول العناصر الأخرى، يستخدم لتجميعها لتحديد النمط.

مثال

تعريف النمط للأعمدة الأخرى بناءً على حجم أو نمط القالب:

.parent {
  اسم-القالب: myContainer;
  نوع-القالب: حجم-خط;
}
/* أضف النمط إذا كان حجم myContainer أقل من 500px */
@container myContainer (عرض < 500px) {
  .child {
    عرض: 50%;
    الحدود: 2px متصلب مارون;
    لون-الخلفية: كاربونات السالمون;
  }
}

تجربة شخصية

نحو CSS

@container containername (containerquery) {
  بيانات النمط css
}

قيمة الخاصية

دعم المتصفح

رقم الحروف في الجدول يعني إصدار المتصفح الذي يدعم هذه @ القاعدة بشكل كامل.