تابع محاسبات در CSS3

شاید به طور کلی استفاده از کلمۀ تابع برای CSS عجیب باشه؛ ولی واقعا یه همچین چیزی وجود داره. امروز می خوام یکی از ناشناخته ترین و در عین حال کاربردی ترین ویژگی های ورژن سوم سی اس اس رو معرفی کنم.

این تابع برای انجام محاسبات انجام میشه؛ حتی محاسبات با واحدهای متفاوت!

اسم این تابع ()calc هست. تعریف W3Schools اینطوریه:

تابع ()calc برای انجام محاسبات در مقدار ویژگی ها استفاده می شود.

البته تقریبا همینه تعریفش!

به عنوان مثال این تابع میتونه برای این استفاده بشه که مثلا بخوایم بگیم width فلان المنت برابر باشه با کل المنت مادر منهای 100 پیکسل! به این شکل میگیم:

width: calc(100% – 100px);

به همین سادگی. حالا شما میتونید اون رو در ویژگی های دیگه (مثل width) و با واحدهای دیگه استفاده کنید.

پشتیبانی مرورگرهای جدید از این تابع خوبه ولی پیشنهاد میشه از prefix ها استفاده کنید.

سینتکس کلی این تابع به این صورت هست:

calc(expression);

اون expression میتونه شامل یه عملیات ریاضی شامل 4 عمل اصلی (+ – / *) بشه. در ضمن پیشنهاد میشه بین عدد ها و operator ها حتما از فاصله (space) استفاده کنید.

برای اطلاعات بیشتر هم می تونید صفحۀ این تابع رو در MDN مطالعه کنید.

همین! خیلی به نظرم لازم بود تا این تابع رو توضیح بدم چون واقعا توی سایت های ایرانی خیلی کم دیدم که استفاده بشه (برعکس سایت های Awwwards و FWA).

اگه خوشتون اومد مطلب رو به اشتراک بذارید. ممنون. 🙂

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *