‏تابع progress() در CSS و منطق شرطی

تو این مقاله اومده که CSS یه تابع تازه به اسم progress() داره که یه مقدار رو در برابر یه بازه می‌سنجه. ساختارش ساده‌ست:

progress(current value, lower bound, upper bound)

فرمولش هم همون (مقدار فعلی - کف) / (سقف - کف) هست. اگه مقدار از کف کمتر یا مساوی باشه خروجی ۰ می‌شه، اگه از سقف بیشتر یا مساوی باشه ۱، و وسط بازه یه عدد متناسب. مثلاً progress(500px, 400px, 600px) می‌شه ۰.۵.

به گفته‌ی نویسنده مزیت اصلی اینه که خروجی یه عدد خالیه، پس هم می‌شه مستقیم روی چیزی مثل opacity نشوندش و هم با انواع داده‌های محاسباتی مثل زاویه و درصد ترکیبش کرد. جالب‌تر از اون، همین چسبیدن (clamp) خروجی به ۰ و ۱ ـه که می‌شه ازش مثل منطق بولی استفاده کرد. این رفتار پیش‌فرض رو می‌شه با کلیدواژه‌ی no-clamp خاموش کرد؛ اون‌وقت progress(no-clamp 10, 20, 60) به جای ۰، منفی ۰.۲۵ می‌ده و فعلاً فقط فایرفاکس ازش پشتیبانی می‌کنه.

مثال مقاله یه فرم نشان‌گیریه: کاربر اسم فیلم‌هایی که دیده رو وارد می‌کنه و با ۳، ۶ و ۹ فیلم نشان‌های مختلف می‌گیره. هر نشان مقدار --badgeLevel خودش رو داره و یه فلگ با progress() ساخته می‌شه:

.badge {
  --isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel));
}

اگه تعداد فیلم‌ها به سطح نشان برسه یا ازش بیشتر بشه، خروجی ۱ می‌شه؛ یعنی هم اون نشان و هم همه‌ی نشان‌های پایین‌ترش باز می‌شن.

قدم آخر نمایش دادنه. --isLevelUnlocked باید با @property به‌عنوان یه custom property ثبت‌شده تعریف بشه (یعنی نوعش رو به مرورگر اعلام کنی) تا بشه بعداً مقدارش رو چک کرد. بعد با @container style(--isLevelUnlocked: 1) محتوای نشان از hidden به visible تغییر می‌کنه. نتیجه اینه که دیگه لازم نیست تو جاوااسکریپت روی نشان‌ها حلقه بزنی و تک‌تک مقایسه کنی؛ جاوااسکریپت فقط تعداد فیلم‌ها رو می‌شمره و بقیه‌ش با CSS انجام می‌شه.

نکات کلیدی:

• progress(cv, lb, ub) عددی بین ۰ تا ۱ می‌ده و مقدارهای بیرون بازه رو به ۰ یا ۱ می‌چسبونه
• کلیدواژه‌ی no-clamp این چسبوندن رو خاموش می‌کنه و فعلاً فقط فایرفاکس پشتیبانی می‌کنه
• خروجی عددیه، پس مستقیم روی property هایی مثل opacity قابل استفاده‌ست
• فلگ باید با @property ثبت بشه تا تو container style query قابل بررسی باشه
• کاربردهای دیگه‌ش: تایپوگرافی سیال، استایل بر اساس اندازه‌ی container یا viewport و انیمیشن‌های واکنش‌گرا