محاسبه با اندازه‌های درونی

‫calc-size() یک تابع CSS برای انجام عملیات ریاضی روی کلیدواژه‌های اندازه‌گذاری ذاتی مانند auto، min-content، و fit-content است. اجباری: فقط زمانی از calc-size() استفاده کنید که لازم باشد اندازه ذاتی را با محاسبه یا محدودیت اصلاح کنید؛ برای پویانمایی‌های ساده مبتنی بر کلیدواژه (مثلاً 0 به auto)، باید از interpolate-size: allow-keywords استفاده کنید.

مراحل پیاده‌سازی

1. شناسایی مبنای ذاتی: تعیین کنید کدام کلیدواژه ذاتی (auto، min-content، و غیره) باید مبنای محاسبه شما را تشکیل دهد.
2. تعریف محدودیت‌ها: از توابع ریاضی CSS مانند clamp()، min()، یا max() در آرگومان دوم برای اعمال محدودیت‌های طراحی بر اندازه ذاتی استفاده کنید.
3. اجباری: ارائه یک گزینه جایگزین: همیشه یک کلیدواژه یا طول استاندارد اندازه‌گذاری را بلافاصله قبل‌از ویژگی بااستفاده از calc-size() اعلام کنید تا مطمئن شوید که چیدمان در مرورگرهای پشتیبانی‌نشده همچنان کار می‌کند.
4. اعمال کردن ویژگی‌های منطقی: به‌طور پیش‌فرض از ویژگی‌های منطقی مثل inline-size یا block-size استفاده کنید تا مطمئن شوید محاسبات از حالت نوشتاری سند پیروی می‌کند.
5. اختیاری: ارتقای پیش‌رو: منطق چیدمان پیچیده یا پویانمایی‌ها را در بلوک @supports (inline-size: calc-size(auto, size + 0px)) قرار دهید تا ویژگی‌های پیشرفته فقط به مرورگرهای توانمند ارائه شود.

نحو پایه

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

آرگومان‌های مبنای معتبر (<calc-size-basis>)

آرگومان اول اندازه «پایه» را برای محاسبه تعریف می‌کند.

کلیدواژه‌های استاندارد:

• ‫auto: اندازه پیش‌فرض برای عنصر.
• ‫min-content: کوچک‌ترین اندازه‌ای که عنصر می‌تواند بدون سرریز شدن داشته باشد.
• ‫max-content: اندازه‌ای که عنصر برای جا دادن همه محتوا در یک خط می‌گیرد.
• fit-content: معادل با clamp(min-content, auto, max-content).
• content: فقط زمانی معتبر است که calc-size() در ویژگی flex-basis استفاده شود.

آرگومان‌های ویژه:

• any: مبنای عمومی که وقتی نوع ذاتی خاص ناشناخته است یا هنگام محاسبات تودرتو استفاده می‌شود.
• calc-size() تودرتو: امکان محاسبات چندمرحله‌ای یا شرطی را فراهم می‌کند.
• <calc-sum>: طول، درصد، یا عبارت ریاضی خاص (مثلاً 100px یا 20%). وقتی از مقدار ثابتی به‌عنوان مبنا استفاده می‌شود، کلیدواژه size همچنان دردسترس است (اما فقط در آرگومان دوم) و مقدار حل‌شده آن مبنا را نشان می‌دهد.

اجباری: کلیدواژه size در خودِ متغیر مستقل اول (<calc-size-basis>) معتبر نیست. این متغیر محلی فقط برای ارجاع به مبنا از درون شناسه دوم (<calc-sum>) وجود دارد.

متغیرهای مستقل محاسبه معتبر (<calc-sum>)

آرگومان دوم عبارت ریاضی است.

• معمولاً از کلیدواژه size برای ارجاع به مقدار مبنا استفاده می‌کند.
• اگرچه کلیدواژه size ازنظر فنی اختیاری است، اما حذف آن به این معنی است که محاسبه به یک مقدار ثابت تبدیل می‌شود و مبنا را کاملاً نادیده می‌گیرد.
• این فرمول می‌تواند شامل عملگرهای ریاضی استاندارد (+، -، *، /) باشد.
• می‌تواند شامل توابع ریاضی CSS مانند clamp()، min()، max()، و round() باشد.
• اجباری: calc-size() فقط یک مقدار اندازه ذاتی تکی (پایه) را در هر محاسبه مجاز می‌داند. نمی‌توانید کلیدواژه‌های اندازه‌گذاری ذاتی را در یک فراخوانی calc-size() ترکیب کنید.

موارد استفاده

پویانمایی به و از اندازه‌های درونی

به‌طور پیش‌فرض، مرورگرها نمی‌توانند بین طول (مثلاً 0px) و کلیدواژه ذاتی (مثلاً auto) درون‌یابی کنند. قرار دادن کلیدواژه در calc-size() آن را به مقدار قابل‌درون‌یابی تبدیل می‌کند.

انتخاب ابزار مناسب برای پویانمایی‌ها

• اجباری: از interpolate-size: allow-keywords استفاده کنید: برای پویانمایی‌های ساده به یا از اندازه‌های ذاتی (مثلاً height: 0 به height: auto) بدون هیچ‌گونه تغییرات ریاضی. این رویکرد الزامی برای درون‌یابی کلیدواژه ساده است و در حالت ایده‌آل باید به‌صورت سراسری ازطریق :root اعمال شود.

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

• از calc-size() استفاده کنید: فقط زمانی‌که لازم است محاسبات ریاضی را روی اندازه ذاتی درطول انتقال انجام دهید (مثلاً افزودن حاشیه داخلی یا محدود کردن اندازه).

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

اجباری: درون‌یابی بین دو کلیدواژه اندازه‌گذاری ذاتی مستقیماً امکان‌پذیر نیست. یک انتهای انتقال باید طول یا درصد باشد.

احترام به اولویت‌های حرکتی کاربر

پویانمایی‌هایی که اندازه نواحی بزرگ چیدمان را تغییر می‌دهند می‌توانند به‌طور خاص برای کاربران مبتلا به اختلالات دهلیزی مختل‌کننده باشند. اجباری: همیشه بااستفاده از پُرسمان رسانه prefers-reduced-motion به اولویت‌های حرکتی کاربر احترام بگذارید تا پویانمایی‌های غیرضروری را ساده یا کمینه کنید. راهبردهای رایج شامل غیرفعال کردن کامل حرکت، کاهش مدت، یا جایگزین کردن تغییرات چیدمان با انتقال‌های شفافیت ظریف است.

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

اعمال محدودیت‌ها بر اندازه‌های درونی

می‌توانید از calc-size() با هر تابع ریاضی CSS (مانند min()،‏ max()،‏ clamp()، یا round()) استفاده کنید تا مطمئن شوید اندازه ذاتی عنصر در محدوده طراحی باقی می‌ماند.

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

ملاحظات مهم

• مشکلات درصد: درصدها در <calc-sum> نسبت به اندازه محفظه حل می‌شوند، نه کلیدواژه size. برای مثال، calc-size(auto, size + 10%) مقدار ۱۰٪ از عرض والد را به عرض auto عنصر اضافه می‌کند که ممکن است به نتایج غیرمنتظره یا سرریز منجر شود.
• الزامات محاسبات: اجباری: برای پویانمایی‌های ساده (مثلاً 0 به auto) از interpolate-size: allow-keywords به‌جای calc-size() استفاده کنید. calc-size() فقط باید زمانی استفاده شود که چیدمان به تنظیمات ریاضی پویا برای پایه ذاتی نیاز داشته باشد.
• نکته عملکرد: متحرک‌سازی ویژگی‌های مدل جعبه مانند inline-size یا block-size باعث بازمحاسبه چیدمان می‌شود که می‌تواند پرهزینه باشد. از پویانمایی‌های calc-size() عمدتاً برای عناصر مهم چیدمان استفاده کنید، جایی که جایگزین‌های غیرچیدمانی کافی نیستند.

راهبردهای جایگزین

‫calc-size() و interpolate-size ارتقای پیش‌رو هستند. در مرورگرهایی که از آن‌ها پشتیبانی نمی‌کنند، این ویژگی‌ها نادیده گرفته می‌شوند و چیدمان همچنان کار می‌کند، هرچند پویانمایی‌ها به‌جای انتقال به کلیدواژه‌های ذاتی، پرش خواهند داشت. همیشه یک کلیدواژه یا طول استاندارد به‌عنوان جایگزین ارائه دهید.

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

جایگزین‌های پویانمایی و انتقال

در مرورگرهایی که از calc-size() یا interpolate-size پشتیبانی نمی‌کنند، انتقال‌های شامل کلیدواژه‌های اندازه‌گذاری ذاتی درون‌یابی نخواهند شد.

• تنزل متین: حالت بازگشت پیش‌فرض «پرش فوری» بین وضعیت‌ها است (مثلاً از 0 به auto). این حالت اغلب قابل‌قبول است زیرا چیدمان همچنان کار می‌کند.
• تجربه بهبودیافته: از @supports برای اعمال منطق چیدمان پیچیده یا سبک‌بندی اضافی استفاده کنید که فقط زمانی منطقی است که پویانمایی‌های ذاتی روان امکان‌پذیر باشد.
• از اندازه‌گیری‌های مبتنی بر JS اجتناب کنید: اگرچه می‌توانید از جاوا اسکریپت برای اندازه‌گیری عناصر و پویانمایی دستی ابعاد آن‌ها استفاده کنید، این کار اغلب غیرضروری است و می‌تواند منجر به کوبش چیدمان شود. تکیه بر «پرش فوری» بومی، جایگزین توصیه‌شده برای برنامه‌های وب مدرن است.

برای پویانمایی‌ها، تجربه جایگزین پرش فوری به اندازه نهایی خواهد بود. برای شناسایی پشتیبانی در CSS یا جاوا اسکریپت:

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}