بررسی تابع ()calc-size در CSS

به نظر می‌رسد که تنظیم

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

تابع calc-size()

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

  • auto
    auto
  • min-content
    min-content
  • max-content
    max-content
  • fit-content
    fit-content
  • stretch
    stretch
  • contain
    contain

اساساً، کاری که این تابع انجام می‌دهد این است که مقادیری مانند

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.element.open {
height: calc-size(auto);
}
.element { height: 0; overflow: hidden; transition: height 0.3s; } .element.open { height: calc-size(auto); }
.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

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

با قرار دادن مقدار

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

تنها موردی که باید از آن اجتناب کنیم این است که نمی‌توانیم بین دو مقدار محاسبه‌شده خودکار، مانند

auto
auto و
min-content
min-content، عمل animate کردن را انجام دهیم.

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

calc-size
calc-size را روی یکی از مقادیر موجود در animation داشته باشیم، کار می‌کند.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
/* This still works */
height: calc-size(0px);
overflow: hidden;
transition: height 0.3s;
}
.element.open {
height: auto;
}
.element { /* This still works */ height: calc-size(0px); overflow: hidden; transition: height 0.3s; } .element.open { height: auto; }
.element {
  /* This still works */
  height: calc-size(0px);
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
}

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
width: calc-size(min-content, size + 50px);
}
.element { width: calc-size(min-content, size + 50px); }
.element {
  width: calc-size(min-content, size + 50px);
}

کد CSS بالا مقدار

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

تابع ()calc-size دو آرگومان می‌گیرد. آرگومان اول اندازه‌ای است که می‌خواهیم محاسبه کنیم و آرگومان دوم محاسبه‌ای است که می‌خواهیم انجام دهیم. در این مثال، ما اندازه

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
width: calc-size(calc-size(min-content, size + 50px), size * 2);
}
.element { width: calc-size(calc-size(min-content, size + 50px), size * 2); }
.element {
  width: calc-size(calc-size(min-content, size + 50px), size * 2);
}

با این کار، اندازه

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

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

در زمان نگارش این مقاله، تابع ()calc-size تنها زمانی در Chrome Canary پشتیبانی می‌شود که flag

#enable-experimental-web-platform-features
#enable-experimental-web-platform-features فعال باشد.

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.element.open {
height: auto;
height: calc-size(auto);
}
.element { height: 0; overflow: hidden; transition: height 0.3s; } .element.open { height: auto; height: calc-size(auto); }
.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
auto را بسیار آسان می‌کند. همچنین امکانات زیادی را برای انجام محاسباتی که قبلاً در CSS غیرممکن بود، فراهم می‌نماید.

دیدگاه‌ها:

افزودن دیدگاه جدید