به نظر می‌رسد که تنظیم height: auto; در CSS باید کار آسانی باشد، اما CSS قادر به animate کردن height: auto; نیست. زیرا، برای اجرای هر animation یا transition به یک مقدار ارتفاع خاص نیاز دارد. این موضوع یک چالش برای توسعه‌دهندگان وب بوده است، و تنها راه برای animate کردن height: auto; استفاده از جاوااسکریپت برای محاسبه ارتفاع المنت و سپس animate کردن آن بود. بدیهی است که این روش ایده‌آل نمی‌باشد، به همین دلیل CSS تابع جدید ()calc-size را اضافه کرده است تا انجام این نوع انیمیشن را ساده‌تر کند.

تابع calc-size()

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

اساساً، کاری که این تابع انجام می‌دهد این است که مقادیری مانند auto را به مقادیر پیکسلی خاص تبدیل می‌کند، سپس می‌تواند در محاسبات با مقادیر دیگر از آن‌ها استفاده نماید. این موضوع به خودی خود مفید است، اما جایی که بیشترین کاربرد را دارد المنت‌های متحرکی هستند که دارای اندازه auto می‌باشند.

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: calc-size(auto);
}

با قرار دادن مقدار auto در تابع ()calc-size، اکنون می‌توانیم بدون هیچ کد جاوااسکریپتی ارتفاع المنت را از ۰ به auto animate کنیم.

تنها موردی که باید از آن اجتناب کنیم این است که نمی‌توانیم بین دو مقدار محاسبه‌شده خودکار، مانند auto و min-content، عمل animate کردن را انجام دهیم.

یکی دیگر از نکات جالب در مورد تابع ()calc-size این است که می‌توانیم آن را روی مقدار non-automatic موجود در animation استفاده کنیم و همچنان animate درستی داشته باشیم. به طور کلی تا زمانی که calc-size را روی یکی از مقادیر موجود در animation داشته باشیم، کار می‌کند.

.element {
  /* This still works */
  height: calc-size(0px);
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
}

انجام محاسبات واقعی

تا حد زیادی رایج‌ترین استفاده از این تابع همانطور که در مورد آن صحبت کردیم، کار با animationها و یا transitionها خواهد بود. اما از آنجایی که تابع ()calc-size دقیقاً مانند تابع calc عمل می‌کند، در واقع می‌توانیم از آن برای انجام محاسبات خاصی استفاده کنیم که قبلا غیرممکن بودند.

.element {
  width: calc-size(min-content, size + 50px);
}

کد CSS بالا مقدار width  المنت را بر روی حداقل اندازه محتوا به اضافه ۵۰px تنظیم می‌کند. سینتکس کدی که داریم ممکن است کمی گیج‌کننده به نظر برسد. اما برای درک بهتر، کد را باهم بررسی می‌کنیم.

تابع ()calc-size دو آرگومان می‌گیرد. آرگومان اول اندازه‌ای است که می‌خواهیم محاسبه کنیم و آرگومان دوم محاسبه‌ای است که می‌خواهیم انجام دهیم. در این مثال، ما اندازه min-content المنت را محاسبه می‌کنیم و سپس ۵۰px به آن مقدار اضافه می‌نماییم. کلمه کلیدی size همیشه برای نشان دادن اندازه فعلی اولین ویژگی ارسال شده به calc-size استفاده می‌شود. این به این معنی است که در مثال ما، size آن برابر با اندازه min-content المنت است.

همچنین برای انجام محاسبات پیچیده‌تر، می‌توانیم از چندین تابع ()calc-size به صورت تودرتو استفاده کنیم.

.element {
  width: calc-size(calc-size(min-content, size + 50px), size * 2);
}

با این کار، اندازه min-content المنت محاسبه می‌شود، ۵۰px به آن مقدار اضافه شده و سپس نتیجه در ۲ ضرب می‌شود.

بررسی پشتیبانی مرورگرها

در زمان نگارش این مقاله، تابع ()calc-size تنها زمانی در Chrome Canary پشتیبانی می‌شود که flag #enable-experimental-web-platform-features فعال باشد.

خوشبختانه، این ویژگی CSS چیزی نیست که در صورت عدم پشتیبانی سایت ما را خراب کند. این فقط به این معنی است که animation کار نمی‌کند، بنابراین می‌توانیم از آن در پروژه‌های خود استفاده کنیم.

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
  height: calc-size(auto);
}

با CSS بالا، animation در مرورگرهایی که از تابع ()calc-size پشتیبانی می‌کنند کار می‌کند، در حالی که در مرورگرهای قدیمی‌تر فقط المنت را بدون هیچ گونه حالت انیمیشنی نشان می‌دهد.

جمع‌بندی

تابع ()calc-size یک افزودنی جدید به CSS است که animate کردن اندازه‌های مبتنی بر auto را بسیار آسان می‌کند. همچنین امکانات زیادی را برای انجام محاسباتی که قبلاً در CSS غیرممکن بود، فراهم می‌نماید.