‏infinity توی CSS؛ ۹ کاربرد واقعی

نویسنده تو این پست نشون می‌ده کلیدواژهٔ infinity (و -infinity) توی CSS فقط یه بازیچهٔ ریاضی نیست و چند تا مسئلهٔ واقعی رو تمیز حل می‌کنه. قاعدهٔ پایه اینه که همیشه باید داخل calc() بیاد، و اگه قراره یه اندازه باشه باید در یه واحد ضرب بشه:

div {
  border-radius: calc(infinity * 1px);
  z-index: calc(infinity);
}

معروف‌ترین کاربردش ساختن دایره و شکل قرصیه: قبلاً برای این کار عددهای دستی مثل 1e9px می‌نوشتیم، حالا یه calc(infinity * 1px) کافیه. برای z-index هم مقدار نهایی روی بزرگ‌ترین عدد صحیحی که مرورگر اجازه می‌ده، یعنی 2147483647، می‌شینه؛ نویسنده حتی نشون می‌ده چطور با counter-reset همین عدد رو روی صفحه چاپ کنی.

یه کاربرد جالب دیگه فریزکردن زمانه. اگه مدت انیمیشن یا ترنزیشن رو calc(infinity * 1s) بذاری، حالت فعلی تا آخر عمر صفحه ثابت می‌مونه. همین ترفند روی ::view-transition-group و هم‌خانواده‌هاش باعث می‌شه ویو ترنزیشن هیچ‌وقت تموم نشه و درختش توی DOM دواتولز بمونه تا راحت بازرسیش کنی.

infinity توی clamp() هم به درد می‌خوره: با calc(-infinity * 1px) کف و با calc(infinity * 1px) سقف محدودیت برداشته می‌شه. از همین ایده برای شعاع واکنش‌گرا استفاده می‌شه؛ اگه عرض المان از عرض ویوپورت یا کانتینر کمتر باشه شعاع صفر می‌مونه و در غیر این صورت ۲۰ پیکسل می‌شه.

خلاقانه‌ترین بخش، ساختن بولین با کلمپ‌کردن یه عدد دلخواه به صفر یا یکه؛ بعدش همون یه متغیر می‌تونه رنگ، فاصله، شفافیت و اندازه رو با هم بچرخونه:

.flippy {
  --solo: clamp(0, (2 - sibling-count()) * infinity, 1);
  --crowded: clamp(0, (sibling-count() - 5) * infinity, 1);
  flex-grow: calc(1 - var(--solo));
  font-size: calc(1rem - var(--crowded) * 0.125rem);
}

دو تا کاربرد آخر هم بامزه‌ان: با اسپردِ بی‌نهایتِ box-shadow می‌شه یه بک‌دراپ غیرتعاملی ساخت که فراتر از کل ویوپورت رنگ می‌خوره، و با timeline-trigger-activation-range-end می‌شه یه انیمیشن اسکرول‌محور رو یه بار اجرا کرد و دیگه هیچ‌وقت برنگردوند.

نکات کلیدی:

• infinity و -infinity همیشه باید داخل calc() بیان و برای طول در یه واحد ضرب بشن
• calc(infinity * 1px) جایگزین تمیز عددهای بزرگ دستی برای شعاع کامل و بک‌دراپه
• z-index: calc(infinity) روی 2147483647 سقف می‌خوره
• مدت calc(infinity * 1s) انیمیشن، ترنزیشن یا ویو ترنزیشن رو عملاً فریز می‌کنه
• ترکیب clamp() با infinity هم محدودیت رو برمی‌داره هم بولین می‌سازه