تابع if() در CSS شبیه دستورهای if…else در JavaScript عمل میکنه و به ما اجازه میده با کمک منطق شرطی، مقدارهای متفاوتی برای یک ویژگی (property) تعیین کنیم.
تابع if() رو میتونیم داخل مقدار (value) هر ویژگی استفاده کنیم. این تابع میتونه شامل چند تا <if-condition> باشه که با نقطهویرگول از هم جدا شدن، یا حتی بدون شرط هم نوشته بشه. هر <if-condition> از یک جفت <if-test>: <value> یا else: <value> تشکیل شده.
نکته: این تابع در حال حاضر در همه مرورگرها پشتیبانی نمیشه، برای اطلاعات بیشتر جدول سازگاری مرورگرها رو بررسی کنید.
کد زیر یک نمونه از کاربرد تابع if() در CSS هست:
div {
margin: if(
media(width < 700px): 0 auto;
else: 20px auto;
);
}در این کد، با استفاده از دو <if-condition> برای ویژگی margin مقدارهای متفاوتی رو به صورت شرطی مشخص کردیم. اگه عرض فعلی viewport کمتر از 700px باشه، مقدار margin برابر با 0 auto و در غیر اینصورت مقدار این ویژگی 20px auto خواهد بود.
انواع if-test ها
در مثال بالا، برای شرط اول توی بخش <if-test> از عبارت media(width < 700px) استفاده کردیم که بهش <if-test> از نوع media query گفته میشه. البته این تنها نوع if-test نیست؛ شما میتونید از style query و feature query هم به عنوان <if-test> استفاده کنید، در ادامه انواع مختلف <if-test> رو بررسی میکنیم.
مدیا کوئریها (media queries)
یک <if-test> از نوع مدیا کوئری زمانی استفاده میشه که بخواهیم مقدار یک ویژگی رو بر اساس درست (true) بودن یک media query مشخص کنیم.
میتونید از انواع مدیا مثل print ،all و یا screen استفاده کنید. برای مثال در کد زیر، اگر مدیا از نوع print باشه، مقدار ویژگی background-color برابر با white خواهد بود. اما اگر مدیا print نباشه، مقدار #eeeeee برای background-color در نظر گرفته میشه.
background-color: if(
media(print): white;
else: #eeeeee;
)همچنین میتونید مثل کدی که در ابتدای پست دیدید از media feature هایی مثل width هم استفاده کنید.
استایل کوئریها (style queries)
یک <if-test> از نوع استایل کوئری این امکان رو میده که بررسی کنید آیا یک ویژگی مشخص روی یک عنصر (element) مقداردهی شده یا نه، و بر همون اساس مقدار ویژگی دیگهای رو تعیین کنید:
background-image: if(
style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
else: none;
);در مثال بالا، اگر ویژگی سفارشی (custom property) --scheme روی همون عنصر مقدار ice داشته باشه، مقدار linear-gradient() برای background-image اعمال میشه. اما اگر این مقدار وجود نداشته باشه یا چیز دیگهای باشه مقدار none در نظر گرفته میشه.
نکته: ویژگی سفارشی یا custom property با نام متغییر CSS یا CSS variable هم شناخته میشه.
فیچر کوئریها (feature queries)
با استفاده از فیچر کوئریها به عنوان یک <if-test> میتونید مقدار یک ویژگی رو بر اساس اینکه مرورگر از یک قابلیت خاص پشتیبانی میکنه یا نه، مشخص کنید.
در مثال پایین اگر مرورگر از رنگهای lch() پشتیبانی کنه مقدار ویژگی color بصورت lch() و در غیر اینصورت مقدار color بصورت rgb() تنظیم میشه:
color: if(
supports(color: lch(75% 0 0)): lch(75% 0 0);
else: rgb(185 185 185);
)میتونید از کوئریهای پشتیبانی برای انتخابگرها هم استفاده کنید. در مثال پایین، اگر مرورگر از شبهکلاس :buffering پشتیبانی کنه، مقدار margin-top برابر 1em و اگر پشتیبانی نکنه مقدار initial خواهد بود:
margin-top: if(
supports(selector(:buffering)): 1em;
else: initial;
)یک نمونه با استفاده از تابع ()if در CSS
خب تئوری کافیه، بیایید نمونهای که با استفاده از تابع if() برای چالش این هفته CodePen ساختم رو بررسی کنیم.
سه پیغام (alert) با سه حالت موفقیت، خطا و هشدار داریم، هر سه پیغام یکسری استایل مشترک دارن ولی مقدار ویژگیهای background-color و color با توجه به نوع پیغام متغییر هست و با استفاده از تابع if() تعیین میشه.
در ادامه بخشهایی که مربوط به تابع if() هست رو بررسی میکنیم تا ببینید چطور میتونید از این تابع استفاده کنید. فقط توجه داشته باشید که برای تمرکز روی موضوع اصلی، کدها سادهتر و موارد غیرضروری حذف شدن.
هر پیغام یه کلاس alert داره که برای اعمال استایلهای مشترک استفاده میشه، یه کلاس پیراینده (modifier) هم داره که نوع پیغام رو مشخص میکنه و با کمک این کلاس رنگهای پیغام تغییر میکنه. ساختار کلی کدهای HTML به شکل زیر هست:
<div class="alert alert--success"></div>
<div class="alert alert--danger"></div>
<div class="alert alert--warning"></div>برای CSS هم از <if-test> های استایل کوئری استفاده شده و با توجه به مقدار ویژگی سفارشی یا متغییر --alert-type مقدارهای مختلفی برای ویژگیهای background-color و color تنظیم میشه.
.alert {
background-color: if(
style(--alert-type: success): var(--light-green);
style(--alert-type: danger): var(--light-red);
style(--alert-type: warning): var(--light-yellow);
);
color: if(
style(--alert-type: success): var(--green);
style(--alert-type: danger): var(--red);
style(--alert-type: warning): var(--yellow);
);
}
.alert--success {
--alert-type: success;
}
.alert--danger {
--alert-type: danger;
}
.alert--warning {
--alert-type: warning;
}در نهایت درون کلاسهای پیراینده مقدار متغییر --alert-type تغییر میکنه و هر عنصر با توجه به اینکه چه کلاس پیرایندهای داره رنگهای متفاوتی خواهد داشت.
جمع بندی
خیلی وارد جزئیات نشدم و سعی کردم فقط نکات پایهای که باید درباره تابع if() بدونید رو توضیح بدم. برای مطالعه بیشتر، مقاله ()if در وبسایت mozilla.org که منبع اصلی برای نوشتن این پست بوده میتونه خیلی مفید باشه.