CSS با تابع جدید if() شرطی می کند

Una Kravets

تاریخ انتشار: 1 جولای 2025

از Chrome 137 می‌توانید شرط‌های درون خطی CSS را با تابع if() امتحان کنید. if() یک رابط توسعه‌دهنده تمیزتر را برای سبک‌های پویا مانند کوئری‌های استایل و پرس‌وجوهای رسانه‌ای، با برخی تفاوت‌های کلیدی، فعال می‌کند، که می‌توانید در این پست با آنها آشنا شوید.

تابع if() CSS با استفاده از یک سری جفت شرط-مقدار کار می کند که به صورت زیر ساختار یافته اند:

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() یک راه عالی برای گنجاندن پرس و جوهای رسانه ای درون خطی در استایل های شماست. برای مثال، می‌توانید ترجیحات موضوعی کاربر (روشن یا تاریک) را بررسی کنید یا برای عرض پورت دید، درخواست‌های رسانه درون خطی انجام دهید. مثال زیر درخواست رسانه را برای دستگاه های اشاره گر نشان می دهد. اندازه پیش‌فرض دکمه در دستگاهی با اشاره‌گر ظریف، مانند ماوس، 30 پیکسل خواهد بود، اما برای دستگاه‌های صفحه لمسی، مانند دستگاه‌هایی که نشانگر درشت دارند، اندازه دکمه حداقل 44 پیکسل برای فاصله لمسی مناسب برای دسترسی آسان‌تر است.

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() ایجاد کوئری های پشتیبانی درون خطی است. به عنوان مثال، برای بررسی پشتیبانی از طیف گسترده رنگ، مانند 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 pseudo content دریافت می‌کند.

برای کسب اطلاعات بیشتر و مشاهده تفاوت بین rgb و فضاهای رنگی پیشرفته تر، انتخابگر رنگ و منابع را در oklch.com بررسی کنید.

نسخه ی نمایشی: تجسم وضعیت رابط کاربری

همچنین می‌توانید از if() برای استایل‌سازی مبتنی بر حالت استفاده کنید. برای مثال، استایل کردن کارت‌های پیشرفت بر اساس وضعیت رابط کاربری (در انتظار یا کامل) آن‌ها. وضعیت را مستقیماً در یک ویژگی داده یا یک ویژگی سفارشی ذخیره کنید، و سپس با استفاده از if() استایل ها را به صورت درون خطی به ویژگی اعمال کنید.

<div class="card" data-status=>"c<ompl>ete"
  ...
/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);
}

با استفاده از style() در داخل تابع if() ، می‌توانید مستقیماً به عنصر مورد نظر خود استایل دهید، بدون نیاز به عنصر والد مانند کوئری‌های سبک CSS.

این نسخه ی نمایشی یک مورد اساسی را نشان می دهد که چگونه می توانید از if() برای پشتیبانی از یک رویکرد معماری جدید به CSS استفاده کنید. یکی از مزایای استفاده از ویژگی های سفارشی CSS بر روی کلاس ها، سهولت به روز رسانی آنها در CSS است. برای مثال، می‌توان آن‌ها را با استفاده از پرسش‌های رسانه یا حالت‌های شبه مانند :hover به‌روزرسانی کرد.

بعدش چی

افزودن if() فرصت معماری جدیدی را برای توسعه دهندگان CSS فراهم می کند. همانطور که فناوری‌هایی مانند پرس‌وجوهای سبک تکامل می‌یابند، پرس‌وجو دامنه احتمالاً در توابع if() امکان‌پذیر خواهد بود، و همچنین زمانی که با پیشنهاد توابع سفارشی آتی (CSS @function ) ترکیب شوند، مفید خواهند بود.

برای کسب اطلاعات بیشتر در مورد این ویژگی ها، بررسی کنید:

• نمایش ویدیویی 3 دقیقه‌ای از نسخه ی نمایشی شماره 3
• مقاله از Lea Verou