قاعدة @container CSS

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

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

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

نصيحة:في نص-التصميم، المستودع هو عنصر يغلف العناصر الأخرى، ويستخدم لجمعها لغرض إعداد النمط.

مثال

تعريف النمط لغير العناصر بناءً على حجم أو النمط للمستودع.

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

جرب بنفسك

نحو-التصميم-النصية

@المستودع اسم-المستودع (استعلام-المستودع) {
  تعليمات-التصميم-النصية
}

قيمة-الصفة

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم تمامًا @ القاعدة الأولى.