قانون @supports در CSS
قانون «@supports» در CSS یا همان «قانون @supports (Supports Rule)» به شما اجازه می دهد بررسی کنید مرورگر از یک ویژگی یا مقدار خاص پشتیبانی می کند یا نه؛ سپس بر اساس نتیجه، استایل مناسب یا جایگزین را اعمال کنید.
قانون @supports چیست؟
با نوشتن شرط داخل پرانتز، اگر ویژگی مدنظر پشتیبانی شود، استایل های داخل بلاک اجرا می شوند؛ در غیر این صورت، استایل های بیرون بلاک نقش «جایگزین» را دارند.
سینتکس پایه
@supports (property: value) { /* قوانین CSS */ }نکته: همیشه استایل های fallback را بیرون از بلاک @supports تعریف کنید تا در مرورگرهای قدیمی اعمال شوند.
نمونه: fallback برای Flex و Grid
در این مثال ها، ابتدا استایل پایه می آید؛ سپس اگر مرورگر پشتیبانی کند، استایل مدرن فعال می شود.
Flex
/* وقتی display:flex پشتیبانی نمی شود */
.container { float: left; width: 100%; }
/* وقتی display:flex پشتیبانی می شود */
@supports (display: flex) { .container { display: flex; } }Grid
/* وقتی display:grid پشتیبانی نمی شود */
.container { display: table; width: 90%; background-color: #2196F3; padding: 10px; }
/* وقتی display:grid پشتیبانی می شود */
@supports (display: grid) { .container { display: grid; grid: auto; gap: 10px; background-color: #2196F3; padding: 10px; } }نفی شرایط با not
با not می توانید استایل ها را فقط هنگام «عدم» پشتیبانی اعمال کنید.
@supports not (display: grid) { .warning { background-color: pink; padding: 10px; border: 1px solid red; } }ترکیب شرایط با and / or / not
شرایط چندگانه را ترکیب کنید تا فقط هنگام پشتیبانی مجموعه ای از ویژگی ها، استایل ها فعال شوند.
@supports (display: grid) and (gap: 10px) { .container { display: grid; gap: 10px; } }هشدار: اگر ویژگیِ جایگزین را بیرون از بلاک ننویسید، در مرورگرهای قدیمی هیچ استایلی اعمال نخواهد شد.
مسیر مطالعه و منابع
برای آشنایی بیشتر با چیدمان ها، صفحات مقدمه گرید و آیتم گرید را ببینید. همچنین صفحه قانون @supports را به عنوان مرجع سریع نگه دارید.