منتشرشده: ۱ ژوئیه ۲۰۲۵
از Chrome 137 می‌توانید با تابع if()، شرط‌های درون‌خطی CSS را امتحان کنید. if() با چند تفاوت کلیدی، که می‌توانید در این پست درباره آن‌ها بیشتر بدانید، رابط توسعه‌دهنده پاکیزه‌تری برای سبک‌های پویا مثل پُرسمان‌های سبک و پُرسمان‌های رسانه فراهم می‌کند.
تابع CSS if() بااستفاده از مجموعه‌ای از جفت‌های شرط-مقدار کار می‌کند که به‌صورت زیر ساختاردهی شده است:
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);
می‌توانید بیانیه else ارائه دهید که درصورت برآورده نشدن هیچ‌یک از شرایط دیگر استفاده می‌شود:
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);
درحال‌حاضر، if() با سه نوع پُرسمان مختلف کار می‌کند:
style(): پرسمان‌های سبک-
media(): پُرسمان‌های رسانه -
supports(): از پُرسمان‌ها پشتیبانی می‌کند
بیایید با چند مثال این موضوع را در بافتار قرار دهیم:
نسخه نمایشی: پُرسمان‌های رسانه به‌خط
استفاده از if() روشی عالی برای افزودن پُرسمان‌های رسانه‌ای به‌خط در سبک‌هایتان است. برای مثال، می‌توانید اولویت زمینه‌بندی کاربر (روشن یا تیره) را بررسی کنید یا پُرسمان‌های رسانه‌ای درون‌خطی برای عرض درگاه دید داشته باشید. مثال زیر پُرسمان رسانه را برای دستگاه‌های اشاره‌گر نشان می‌دهد. اندازه پیش‌فرض دکمه در دستگاهی با اشاره‌گر دقیق، مثل موشواره، ۳۰ پیکسل است، اما برای دستگاه‌های دارای صفحه‌نمایش لمسی، مثل دستگاه‌های دارای اشاره‌گر درشت، اندازه دکمه حداقل ۴۴ پیکسل توصیه‌شده برای فاصله لمسی مناسب است تا دسترسی آسان‌تر شود.
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
کد قبلی همان نتیجه را می‌دهد که پُرسمان رسانه زیر:
button {
aspect-ratio: 1;
width: 44px;
}
@media (any-pointer: fine) {
button {
width: 30px;
}
}
استفاده از قالب if() به شما امکان می‌دهد منطق را به‌صورت درون‌خطی داشته باشید، بدون اینکه منطق سبک‌دهی در دو مکان مختلف لازم باشد.
if() اندازه قلم دکمه را در دستگاه‌های دارای اشاره‌گرهای درشت افزایش می‌دهد.نسخه نمایشی: پُرسمان‌های پشتیبانی به‌خط
روش دیگر استفاده از if() ایجاد پُرسمان‌های پشتیبانی به‌خط است. برای مثال، برای بررسی پشتیبانی از رنگ گاموت گسترده، مانند OKLCH، می‌توانید از این استفاده کنید:
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3;
);
&::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
else: "Your browser does not support OKLCH";
);
}
}
با این کد، اگر مرورگر از فضای رنگ oklch پشتیبانی کند، کاربر رنگ زنده‌تری خواهد دید و همچنین پیام «مرورگر شما از OKLCH پشتیبانی می‌کند» را در محتوای کاذب ::after دریافت خواهد کرد.
if().برای کسب اطلاعات بیشتر و دیدن تفاوت بین rgb و فضاهای رنگی پیشرفته‌تر، به انتخابگر رنگ و منابع در oklch.com مراجعه کنید.
نسخه نمایشی: دیداری‌سازی وضعیت واسط کاربر
همچنین می‌توانید از if() برای سبک‌دهی براساس وضعیت استفاده کنید. برای مثال، سبک‌دهی کارت‌های پیشرفت براساس وضعیت میانای کاربر آن‌ها (معلقه یا کامل). وضعیت را مستقیماً در دارایی داده یا دارایی سفارشی ذخیره کنید، و سپس بااستفاده از if()، سبک‌ها را به‌صورت درون‌خطی روی دارایی اعمال کنید.
<div class="card" data-status="complete">
...
</div>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7);
}
if() به دارایی اضافه کنید.با style() در تابع if()، می‌توانید مستقیماً عنصری را که هدف‌یابی می‌کنید سبک‌بندی کنید، دیگر نیازی به عنصر والد مانند آنچه پُرسمان‌های سبک CSS نیاز دارند نیست.
این نسخه نمایشی مورد ساده‌ای از نحوه استفاده از if() برای پشتیبانی از رویکرد معماری جدید به CSS را نشان می‌دهد. یکی از مزایای استفاده از دارایی‌های سفارشی CSS نسبت‌به کلاس‌ها، سهولت به‌روزرسانی آن‌ها در CSS است. برای مثال، می‌توان آن‌ها را بااستفاده از پُرسمان‌های رسانه یا حالت‌های شبهی مانند :hover به‌روز کرد.
قدم بعدی چیست
افزودن if() فرصت معماری جدیدی برای توسعه‌دهندگان CSS فراهم می‌کند. با تکامل فناوری‌هایی مثل پُرسمان‌های سبک، احتمالاً پُرسمان محدوده در if() تابع امکان‌پذیر خواهد شد و این توابع وقتی با پیشنهاد توابع سفارشی آینده (CSS @function) ترکیب شوند مفید خواهند بود.
برای کسب اطلاعات بیشتر درباره این ویژگی‌ها، به موارد زیر مراجعه کنید: