قانون @container CSS

تعریف و استفاده

CSS @container قاعده‌ای است برای تعریف استایل برای عناصر دیگر بر اساس اندازه یا استایل مخزن.

اعلامیه‌های استایل بر اساس شرط فیلتر می‌شوند، اگر شرط صحیح باشد، به مخزن اعمال می‌شوند. زمانی که اندازه یا مقدار استایل مخزن تغییر می‌کند، شرط دوباره ارزیابی می‌شود.

توجه:در CSS، مخزن عناصری است که عناصر دیگر را محصور می‌کند، برای گروه‌بندی آن‌ها برای تنظیم استایل استفاده می‌شود.

مثال

استایل‌ها را برای عناصر دیگر بر اساس اندازه یا استایل مخزن تعریف کنید:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* استایل‌ها را اضافه کنید اگر عرض myContainer کمتر از 500px باشد */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

آزمایش کنید

زبان CSS

@container containername (containerquery) {
  اعلامیه‌های css
}

مقدار مقیاس

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای از مرورگر هستند که کامل‌ترین قاعده @ را پشتیبانی می‌کند.