قانون @supports
قانون «@supports» می پرسد مرورگر فلان ویژگی CSS را دارد؟ اگر داشت، همین استایل ها را اعمال کن. «ویژگی (Property)» یعنی اسم تنظیم CSS؛ «مقدار (Value)» یعنی عدد یا کلمه آن تنظیم. با این قانون، اول سازگاری را می سنجی، بعد خیالت راحت می شود.
سینتکس پایه
داخل پرانتز، یک تست می نویسیم. اگر درست بود، بلوک اجرا می شود.
@supports (display: grid) {
/* این استایل فقط وقتی پشتیبانی شود اجرا می شود */
}
نمونه: fallback برای Flex
اول یک استایل ساده بیرون @supports بنویس. سپس نسخه بهتر را داخل @supports بده.
/* اگر مرورگر flex نداشت */
.container {
float: left;
width: 100%;
}
/* اگر مرورگر flex داشت */
@supports (display: flex) {
.container {
display: flex;
}
}
نمونه: fallback برای Grid
اگر Grid بود، گرید فعال می شود؛ وگرنه طرح ساده اجرا می شود.
/* وقتی grid نیست */
.container {
display: table;
width: 90%;
background-color: #2196F3;
padding: 10px;
}
/* وقتی grid هست */
@supports (display: grid) {
.container {
display: grid;
grid: auto;
grid-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 بنویس.
- داخل @supports، استایل بهتر را قرار بده.
- برای نبود پشتیبانی، از not استفاده کن.
- نیاز داشتی، شرایط را and یا or کن.
- در پایان، نتیجه را روی مرورگرها تست کن.
نکته: همیشه fallback بیرون @supports بگذار. کاربران قدیمی جا نمانند.
جمع بندی سریع
- @supports یعنی تست ویژگی CSS.
- همیشه fallback بیرون بلوک بده.
- not برای نبود پشتیبانی است.
- and و or برای شرایط ترکیبی اند.
برای ادامه طراحی واکنش گرا، سر بزن به چیدمان 12 ستونه و بخش طراحی واکنش گرا. همچنین از همین صفحه قانون @supports به عنوان مرجع سریع استفاده کن.