دستور @supports در CSS برای Feature Query استفاده میشه.
یعنی می‌تونیم بررسی کنیم مرورگر یک ویژگی خاص CSS رو پشتیبانی می‌کنه یا نه.

ساختار کلی

@supports (property: value) {
  /* کدی که فقط اگه پشتیبانی بشه اجرا میشه */
}

مثال ساده

@supports (display: grid) {
  .container {
    display: grid;
  }
}

📌 مرورگر فقط وقتی Grid رو پشتیبانی کنه، این کد اجرا میشه.

استفاده از not

@supports not (display: grid) {
  .container {
    float: left; /* استایل جایگزین */
  }
}

📌 اگه مرورگر Grid رو پشتیبانی نکنه، این استایل اجرا میشه.

استفاده از and

@supports (display: grid) and (display: flex) {
  .box {
    display: grid;
  }
}

📌 فقط وقتی هر دو ویژگی پشتیبانی بشن اجرا میشه.

استفاده از or

@supports (display: grid) or (display: flex) {
  .box {
    background: lightgreen;
  }
}

📌 اگه یکی از ویژگی‌ها پشتیبانی بشه، این کد اعمال میشه.

نکته

• @supports مثل یک شرط عمل می‌کنه (مشابه if در برنامه‌نویسی).

• برای Fallback CSS عالیه (وقتی مرورگرهای قدیمی یک ویژگی رو ندارن).